angular(二)

angularjs第二章

自定义指令

scope

控制器

AngularJS控制器控制AngularJS应用程序的数据，是常规的JavaScript对象。
ng-controller指令就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上。
所谓作用域就是一个指向应用模型的对象，它是表达式的执行环境，作用域有层次结构，这个层次和相应的DOM几乎是一样的，作用域能监控表达式和传递事件并且可以从父作用域继承属性。
每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。一个应用可以有多个作用域，因为有一些指令会生成新的子作用域，当新作用域被创建的时候，他们会被当成子作用域添加到父作用域下，这使得作用域会变成一个和相应DOM结构一个的树状结构。
控制器上的属性：
现在我们就用ng-controller指令来创建一个简单的控制器定义，如下所示：
<div ng-app=“” ng-controller=“MyController”>
请输入一个名字：<input type=“text” ng-model=“person.name”>
Hello <span ng-bind=“person.name”></span>
</div>
<script>
function MyController($scope) {
$scope.person = {
name: “yuanyingke”
};
}
</script>
如上所述，我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性，那参数$scope是什么呢，代表什么意思呢。
现在我们就来解答MyController对象参数 —— $scope。
$scope就是把一个DOM元素连结到控制器上的对象，它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。
要明确创建一个$scope对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性。
所有$scope都遵循原型继承，这意味着它们都能访问父$scope们,对任何属性和方法，如果AngularJS在当前$scope上找不到，就会到父$scope上去找，如果在父$scope上也没找到，就会继续向上回溯，一直到$rootScope上，这个$rootScope是最顶级的$scope，它对应着含有 ng-app指令属性的那个DOM元素，也就是说根作用域关联的DOM就是ng-app指令定义的地方。
也就是说，拥有了$scope，我们就可以操作作用域内任何我们想要获取的对象数据。
控制器上的方法：
控制器不仅声明属性也可以声明方法，如下所示：
<div ng-app=“” ng-controller=“MyController”>
名称:
<input type=“text” ng-model=“username”>
<button ng-click=“sayHello()”>打招呼</button>
<hr>
{{greeting}}
</div>
<script>
function MyController($scope) {
$scope.username = ‘yuanyingke’;
$scope.sayHello = function() {
$scope.greeting= ‘Hello ‘ + $scope.username + ‘!’;
};
}
</script>
注意事项：
不要试图去复用controller,一个控制器一般只负责一小块视图
不要在controller中操作DOM，这不是控制器的职责，是指令的职责。
不要在controller里做数据格式化，ng有很好用的过滤器实现此功能。
不要在controller里面做数据过滤操作，ng有$filter服务
一般来说，controller是不会互相调用的，控制器这间的交互是通过事件进行的。

创建指令

<head>
<meta charset=“UTF-8”>
<title></title>
<script src=“angular.min.js” type=“text/javascript” charset=“utf-8”></script>
<style type=“text/css”>
.directive{
color:red;
}
</style>
</head>
<body ng-app=“myApp”>
<!—<runoob-directive></runoob-directive>—>
</body>
<script type=“text/javascript”>
var app = angular.module(“myApp”, []);
app.directive(“runoobDirective”, function() {
return {
template : “<h1><a href=‘###’ class=‘directive’>我是a</a></h1>”
};
});
</script>
指令定义对象的常用属性如下：
template : string
使用template指定的HTML标记替换指令内容（或指令自身）
restrict : string
用来限定指令在HTML模板中出现的位置。
replace : true|false
使用这个属性指明template的替换方式。
<head>
<meta charset=“UTF-8”>
<title>Title</title>
<script type=“text/javascript” src=“angular.min.js”></script>
</head>
<body ng-controller=“testController”>
<test-directive></test-directive>
</body>
<script type=“text/javascript”>
//
var app = angular.module(“myApp”,[]);
app.controller(“testController”, function ($scope) {

$scope.title = “myApplication”;
});
app.directive(“testDirective”,function(){
return {
replace:true,//替换
restrict:”EA”,//限制指令的出现位置
/*
* E - 指令可以作为HTML元素使用
   A - 指令可以作为HTML属性使用
   C - 指令可以作为CSS类使用
   M - 指令可以在HTML注释中使用
* */
template:”<div>name:{{name}}</div>”
}
});

</script>

mvvm-延伸阅读

简介

针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC(Model-View-Controll)设计模式针对不同的人可能意味不同的东西 ,AngularJS并不执行传统意义上的MVC，更接近于MVVM。
MVVM模式是Model-View-ViewMode模式的简称。由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。
Model将和ViewModel互动(通过$scope对象)，将监听Model的变化。这些可以通过View来发送和渲染，由HTML来展示你的代码。
Model与MVC模式一样，Model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。它具有对数据直接访问的权利，例如对数据库的访问，Model不依赖于View和ViewModel，也就是说，模型不关心会被如何显示或是如何被操作，模型也不能包含任何用户使用的与界面相关的逻辑。
ViewModel是一个用来提供特别数据和方法从而维护指定view的对象,。ViewModel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。
Controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。
View是AngularJS解析后渲染和绑定后生成的HTML。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。

模块化

模块之间如何依赖，依赖注入
angular.module()创建、获取、注册angular中的模块
// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
var createModule = angular.module(“myModule”, []);
// 只有一个参数(模块名),代表获取模块
// 如果模块不存在,angular框架会抛异常
var getModule = angular.module(“myModule”);
该函数既可以创建新的模块，也可以获取已有模块，是创建还是获取，通过参数的个数来区分。
angular.module(name, [requires], [configFn]);
- name：字符串类型，代表模块的名称；
- requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可；
- configFn：用来对该模块进行一些配置。
现在我们知道如何创建、获取模块了，那么模块究竟是什么呢？
官方的Developer Guide上只有一句话：You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.
模块是一些功能的集合，如控制器、服务、过滤器、指令等子元素组成的整体。

服务

AngularJS提供了一些功能的封装，但是当你试图通过全局对象angular去访问这些功能时，却发现与以往遇到的库大不相同。
$http
比如，在jQuery中，我们知道它的API通过一个全局对象：$ 暴露出来，当你需要进行ajax调用时，使用$.ajax()就可以了。这样的API很符合思维的预期。
AngularJS也暴露了一个全局对象：angular，也对ajax调用进行封装提供了一个 $http对象，但是，但是，当你试图沿用旧经验访问angular.$http时，发现不是那么回事！在angular中是以一个参数的形式传递到控制器中，如果要使用它，需要在 controller 中定义。
$http服务

<head>
<meta charset=“UTF-8”>
<title></title>
<script src=“angular.min.js” type=“text/javascript” charset=“utf-8”></script>
<script src=“http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js”></script>
</head>
<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<!—{{content}}—>
<span ng-bind-html=“content”></span>
</div>
<script type="text/javascript">
var app = angular.module("myApp",['ngSanitize']);
app.controller("myCtrl",function ($scope,$http){
$http.get("content.html").success(function (res){
$scope.content = res;
});
});
</script>
angular-sanitize.js

<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
{{url}}
</div>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$location){
console.log($location);
// $scope.url = $location.absUrl();
});
</script>
location
定时器

var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$timeout){
$timeout(function (){
alert(‘a’);
},2000);
});
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$interval){
//循环定时器
$interval(function (){
alert(‘a’);
},2000);
});

实例

百度下拉列表

<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
{{userinfo.user}}
</div>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$http){
$http.jsonp(“http://localhost/SH-2/jsonp/jsonp.php?wd=xx&callback=JSON_CALLBACK”).success(function (res){
// console.log(res);
$scope.userinfo = res;
});
});
</script>

百度的接口

<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<input type=“text” ng-model=“wd” />
<ul>
<li ng-repeat=“x in s”>{{x}}</li>
</ul>
</div>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$http){
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=w&cb=
$http.jsonp(“https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=w&cb=JSON_CALLBACK”).success(function (res){
// console.log(res);
$scope.s = res.s;
});
});
</script>
<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<input type=“text” ng-change=“change()” ng-model=“wd” />
<ul>
<li ng-repeat=“x in s”>{{x}}</li>
</ul>
</div>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$http){
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=w&cb=
$scope.change=function (){
$http.jsonp(“https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=JSON_CALLBACK”,{
params:{
wd:$scope.wd
}
}).success(function (res){
$scope.s = res.s;
});
}
});
</script>

过滤器

简介

过滤器可以使用一个管道字符（|）添加到表达式和指令中。
AngularJS 过滤器
AngularJS 过滤器可用于转换数据：
过滤器
描述
currency
格式化数字为货币格式。
filter
从数组项中选择一个子集。
lowercase
格式化字符串为小写。
orderBy
根据某个表达式排列数组。
uppercase
格式化字符串为大写。

html

<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<span>相乘</span>
<input type=“text” ng-model=“num1” />
<input type=“text” ng-model=“num2” /><br />
<!—currency:”￥” 中文—>
结果为：{{myFn() | currency}}
</div>
</body>

var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope){
$scope.num1=5;
$scope.num2=10;
$scope.myFn = function (){
return $scope.num1*$scope.num2;
}
});

<body ng-app=“”>
<div>
<!—{{‘HelloWorld’ | lowercase}}—>
{{‘HelloWorld’ | uppercase}}
</div>

筛选

<body ng-app=“” ng-init=“arr=[‘tangcaiye’,’zhangsan’,’lisi’]”>
搜索：<input type=“text” ng-model=“name” />
<ul>
<li ng-repeat=“x in arr | filter:name”>{{x}}</li>
</ul>

筛选加排序

<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<ul>
<li ng-repeat=“x in friends |filter:’a’ | orderBy:order:true”>{{x}}</li>
</ul>
</div>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope){
$scope.friends = [{name:’John’, phone:’555-1212’, age:21},
{name:’Mary’, phone:’555-9876’, age:19},
{name:’Mike’, phone:’555-4321’, age:10},
{name:’Adam’, phone:’555-5678’, age:35},
{name:’Julie’, phone:’555-8765’, age:29}];
$scope.order=“phone”;
});
</script>

angular(二)的更多相关文章

Angular(二）
<!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset= ...
Angular(二) - 组件Component
1. 组件Component示例 2. Component常用的几个选项 3. Component全部的选项 3.1 继承自@Directive装饰器的选项 3.2 @Component自己特有的选项 ...
【Angular专题】——（1）Angular，孤傲的变革者
目录一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...
angular编译机制
转载https://segmentfault.com/a/1190000011562077 Angular编译机制前言 http://www.cnblogs.com/ztwBlog/p/620975 ...
Angular 7开发环境配置
目录前言一.搭建项目 1.安装Angular CLI 2.创建项目 3.集成Element Angular 二.设置路由 1.创建路由模块 2.导入.导出RouterModule类 3 ...
AngularJS的相关应用
一.[AngularJS常用指令] 1.ng-app:声明Angular所管辖的区域.一般写在body或html上,原则上一个页面只有一个: <body ng- ...
angular服务二
angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...
angular学习笔记(二十九)-$q服务
angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...
Angular组件——组件生命周期(二)
一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意 ...

随机推荐

李洪强iOS经典面试题36-简单介绍 ARC 以及 ARC 实现的原理
李洪强iOS经典面试题36-简单介绍 ARC 以及 ARC 实现的原理问题简单介绍 ARC 以及 ARC 实现的原理. 考查点 ARC 是苹果在 WWDC 2011 提出来的技术,因此很多新入 ...
ORACLE中DELETE和TRUNCATE的区别
语法 delete from AA truncate table AA 区别 1.delete from后面可以写条件(也就是where子句,delete from AA where aa.列名 = ...
per-cpu
What is percpu data? percpu data 是内核为smp系统中不同CPU之间的数据保护方式,系统为每个CPU维护一段私有的空间,在这段空间中的数据只有这个CPU能访问.但是这种 ...
final可以修饰类、属性、方法
final可以修饰类.属性.方法. 当用final修饰类的时候,此类不可被继承,即final类没有子类.这样可以用final保证用户调用时动作的一致性,可以防止子类覆盖情况的发生. 当利用final修 ...
python+selenium之简单介绍继承
python+selenium之简单介绍继承一.此例简单的介绍一下继承 1.面向对象的编程带来的主要好处之一是代码的重用,实现这种重用的方法之一是通过继承机制.继承完全可以理解成类之间的类型和子类型 ...
一稿设计多端适配优雅的解决方案 - rem
规范目的为提高前端团队开发效率,输出高质量的前端页面代码,提高UI设计还原度,特编写该规范文档.本文档如有不对或者不合适的地方请及时提出. JS代码块 (function (doc, win) { ...
WebGL中图片多级处理（FrameBuffer）
在webgl的使用过程中,我们通常会想对texture进行多级处理并对其贴在表面显示如对较精准的边缘检测,要先后使用灰度shader.模糊shader.边缘shader来进行处理,而每次的处理对象则 ...
如何在VS2010中更好的编写JavaScript代码
VS2010默认的JavaScript代码编辑器相对简单.对于大家熟悉的代码折叠,代码结构.函数导航,代码高亮等都不支持,使用很不便.下面介绍下我发现的几个VS2010插件,具有哪些功能,如何安装和使 ...
提高ASP.NET网站性能的方法
http://www.360doc.com/content/14/0705/18/7662927_392224856.shtml Asp.NET有许多秘密,当你了解了这些秘密后,可以使得你的ASP ...
MySQL------代码1024，can't get hostname for your address解决方法
1.hosts文件问题进入C:\Windows\System32\drivers\etc\hosts 查看里面是否包含: # 127.0.0.1 localhost 没有则添加,再重启MySQL服务 ...

angular(二)

angular(二)的更多相关文章

随机推荐

热门专题