angular.js学习笔记(二)
2017-02-17 17:36
429 查看
验证
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)<form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span> </form>
试过了不在表单内的不起效。
scope
scope 是模型,一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。作用域
所有的应用都有一个 rootScope,它可以作用在ng−app指令包含的所有HTML元素中。rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。
过滤器
currency 格式化数字为货币格式。filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。
<p>你输入的是 <span>{{name | uppercase}}</span></p>
<li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li>
Service
$location 服务是作为一个参数传递到 controller 中。如果要使用它,需要在 controller 中定义app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); });
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。
app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; }); });
$timeout 服务对应了 JS window.setTimeout 函数。
$interval 服务对应了 JS window.setInterval 函数
app.controller('myCtrl', function($scope, $timeout) { $scope.myHeader = "Hello World!"; $timeout(function () { $scope.myHeader = "How are you today?"; }, 2000); });
你可以创建访问自定义服务,链接到你的模块中
app.service('myService', function() { this.myFunc = function (x) { return x.toString(16); } }); app.controller('myCtrl', function($scope, myService) { $scope.hex = myService.myFunc(255); });
相关文章推荐
- 学习angular.js的一些笔记想法(上)
- Angular.js 学习笔记
- Angular.js学习范例及笔记
- Angular.js学习笔记之关于数据请求遇到的坑
- angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )
- angular.js学习笔记--概念总结
- Angular.js 学习笔记 整理一
- Angular.js之服务与自定义服务学习笔记
- angular.js学习笔记之一
- AngularJS Display and Formatting Data 学习笔记
- Angular.js 学习笔记
- angularjs ng-class学习笔记
- Angular.js学习笔记 (二)
- Angular.js回顾+学习笔记(1)【ng-app和ng-model】
- Angular.js学习笔记(二)
- Angular.js之指令学习笔记
- Full Stack Web Development Angularjs(二)学习笔记
- Angular.js 学习笔记 整理二
- Angular.js之服务与自定义服务学习笔记
- angular2 学习笔记 ( rxjs 流 )