Angular Js总结(一)

前端之家收集整理的这篇文章主要介绍了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];

});

猜你在找的Angularjs相关文章