1.AngularJS 表达式与JavaScript对比
类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。
2.调用指令的方式
- 元素名
- 属性
- 类名
- 注释
3.限制使用指令
var app = angular.module("myApp", []); app.directive("testDirective", function(){ return { restrict: "A", template: "<h1>测试自定义指令!</h1>" }; });
restrict值可以是以下几种:
E
作为元素名使用A
作为属性使用C
作为类名使用M
作为注释使用
restrict 默认值为EA,即可以通过元素名和属性名来调用指令。
4.ng-show
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
以上实例中,提示信息会在ng-show 属性返回true的情况下显示。
5.ng-model 指令根据表单域的状态添加/移除以下类:
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
6.作用域 $scope
创建控制器时,将$rootScope作为参数传递,可在应用中使用:
1 <div ng-app="myApp" ng-controller="myCtrl"> 2 <h1>{{lastname}} 家族成员:</h1> 3 <ul> 4 <li ng-repeat="x in names">{{x}} {{lastname}}</li> 5 </ul> 6 </div> 7 8 <script> 9 var app = angular.module('myApp', []); 10 11 app.controller('myCtrl', function($scope, $rootScope) { 12 $scope.names = ["Emil", "Tobias", "Linus"]; 13 $rootScope.lastname = "Refsnes"; 14 }); 15 </script> 16 来自:www.runoob.com
7.控制器
AngularJS 控制器控制AngularJS应用程序的数据,是常规的JavaScript对象。
控制器可以有控制器属性和方法;可在script标签中定义也可以定义在外部文件中供其他文件通过script标签引用。
控制器文件*.js:
angular.module("myApp",[]).controller("testControl", function($scope){ $scope.humans = [ {name:'Json', country:'America'}, {name:'Lili', country:'China'} ]; });
8.过滤器
过滤器 | 描述 |
currency | 格式化数字为货币格式。 |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。 |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写。 |
通过管道字符使用:表达式中添加过滤器 {{name | lowercase}}。可使用多个,用管道字符隔开。
9.服务 如果要使用某个服务,需要在controller定义时参数中声明。
$location 服务,返回当前页面的URL地址。
$http服务 向服务器发送请求,响应服务器传过来的数据。
$http.get("hello.com").then(function(response){ $scope.something = response.data; });
$timeout服务类似于window.setTimeout
两秒后do something
$timeout(function(){$scope.myHeader = "some thing";}, 2000);
$interval服务 类似JS的window.setInterval函数
使用:$interval(function(){//要执行的操作},millisecond);
创建自定义服务:
app.service('myService', function(){this.myFun = function(){}});
要使用自定义的服务,需要在定义控制器的时候独立添加。
app.controller('myControl', function($scope, myService){});