Angular Js总结（一）

Angular Js总结（一）

1. 创建自定义指令

使用驼峰法来命名一个指令，runoobDirective,但在使用它时需要以-分割,runoob-directive:

<bodyng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp",[]);
app.directive("runoobDirective",function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>

调用方式：元素名、属性、类名、注释

<runoob-directive></runoob-directive>

<divrunoob-directive></div>

<divclass="runoob-directive"></div>

<!-- 指令: runoob-directive -->

限制使用：E只限元素名使用 A只限属性使用 C只限类名使用 M只限注释使用

例如

restrict :"A",
template :"<h1>自定义指令!</h1>"

2. ng-model指令的4种状态：invalid,dirty,touched,error

注意error用法

其他3个状态使用：依次分别是合法、值改变、触屏点击

<formng-app=""name="myForm"ng-init="myText = 'test@runoob.com'">
Email:
<inputtype="email"name="myAddress"ng-model="myText"required></p>
<h1>状态</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>

3.Scope

scope是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用 ，如果你修改了视图，模型和控制器也会相应更新（数据的双向绑定）

<divng-app="myApp"ng-controller="myCtrl">

<inputng-model="name">

<h1>我的名字是{{name}}</h1>

</div>

<script>

varapp =angular.module('myApp',[]);

app.controller('myCtrl',function($scope) {
$scope.name ="John Dow";
});

</script>

根作用域：$rootScope

注：所有的应用都有一个$rootScope，它可以作用在ng-app指令包含的所有 HTML 元素中。

$rootScope可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

4. 过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式、指令中

用法例如：<p>姓名为{{ lastName | uppercase }}</p>

<ling-repeat="x in names | orderBy:'country'">
{{x.name + ',' + x.country }}
</li>

过滤输入时要注意：输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称

例：

<divng-app="myApp"ng-controller="namesCtrl">

<p><inputtype="text"ng-model="test"></p>

<ul>
<ling-repeat="x in names |filter:test| orderBy:'country'">
{{(x.name | uppercase) + ',' + x.country }}
</li>
</ul>

</div>

5. 服务Service

AngularJS 内建了30 多个服务（服务可以作为参数传递到controller中）

一些常用的服务有：

有个$location服务，它可以返回当前页面的 URL 地址。

$http是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。

AngularJS$timeout服务对应了 JSwindow.setTimeout函数

AngularJS$interval服务对应了 JSwindow.setInterval函数

创建自定义服务实例：

创建名为hexafy的访问:

app.service('hexafy',function() {
this.myFunc =function(x) {
returnx.toString(16);
}
});

使用自定义的的服务hexafy将一个数字转换为16进制数:

app.controller('myCtrl',function($scope,hexafy) {
$scope.hex =hexafy.myFunc(255);
});

下面给个实例，注意遍历以及自定义的服务在自定义的过滤器中的使用

app.filter('myFormat',['hexafy',function(hexafy) {

return function(x) {

return hexafy.myFunc(x);

};

}]);

app.controller('myCtrl',function($scope) {

$scope.counts = [255,251,200];

});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!