AngularJS笔记

指令

ng-app = “name” : angularJs 使用范围

ng-init = “x=1;y=2” ：初始化变量值，多变量用;分隔开

ng-model = “name” ：

定义变量名数据类型验证 numberemail required数据提供状态 $invalid 合法$dirty$touched 触屏点击$error 错误为html元素提供css类绑定html元素到html表单

ng-bind = “变量” ： 绑定变量名，获取变量的数据，但是一般用 {{ 变量 }}

ng-repeat ： 循环，eg ： <li ng-repeat = "x in lists">{{ x }}</li> 排序 ： ng-repeat="x in names | orderBy : 'Country'" 显示序号 ： $index + 1，因为从0开始

ng-switch ng-switch-when

---

angularJS依赖注入5核心组件

valuefactoryserviceproviderconstant

factory –》 service –》 controller

---

路由设置参数规则：

$routeProvider.when(url,{ template:string, //在ng-view中插入简单的html内容 templateUrl:string, //在ng-view中插入html模版文件 controller:string,function / array, //在当前模版上执行的controller函数 controllerAs:string, //为controller指定别名 redirectTo:string,function, //重定向的地址 resolve:object<key,function> //指定当前controller所依赖的其他模块 });

---

根作用域 ： $rootScope 可在各个controller之间使用 $scope ： JS对象带有属性和方法

---

过滤器的使用 ： {{ 属性 | 过滤方法 }} ，用“ | ” 添加到表达式，eg ： { { name | uppercase } }

定义过滤器 ：

app.filter('reverse', function() { //可以注入依赖 return function(text) { return text.split("").reverse().join(""); } });

---

定义服务 ：

app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); // 调用时候传递参数进来 app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255); });

---

ng-options ： 下拉选择框 x for x in datas，得到的值是一个对象

<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> </select>

---

表单域的状态：

ng-emptyng-not-emptyng-touchedng-untouchedng-valid ： 是否合法ng-invalid ： 不合法ng-dirty ： 是否修改过表单ng-pendingng-pristine ： 是否为初始状态

---

验证邮箱（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>

---

自定义指令：

app.directive('指令名（chW）', function(){ // 操作 return { restrict : 'A', template : '<h1>自定义指令!</h1>' }; });

调用方式：

元素名 ： <ch-w></ch-w>属性 ： <div ch-w></div>类名 ： <div class = "ch-w"></div>注释 ：

限制调用方式（默认为EA） :

E 元素A 属性C 类M 注释

---

module 定义了应用 controller 定义了控制器 eg :

var app = angular.module('ng-app name', [ ]); app.controller('ng-controller name', function($scope){ // 对索取的数据进行操作 $scope.xxx..... })

疑问点 ：

一个ng-app里可以有多个controller

---

HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效

---