AngularJS笔记

指令

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

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

ng-model = “name” ：

• 定义变量名
• 数据类型验证
  
  • number
  • email
  • 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核心组件

• value
• factory
• service
• provider
• constant

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-empty
• ng-not-empty
• ng-touched
• ng-untouched
• ng-valid ： 是否合法
• ng-invalid ： 不合法
• ng-dirty ： 是否修改过表单
• ng-pending
• ng-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 有效

---