angularjs 学习笔记

angularJS 指令是以 ng 作为前缀的 HTML 属性

AngularJS 应用组成如下：MVC

    **View(视图),** 即 HTML。
    **Model(模型),** 当前视图中可用的数据。
    **Controller(控制器),** 即 JavaScript 函数，可以添加或修改属性。
    *你修改了视图view，模型model和控制器controller也会相应更新*

AngularJs指令

1 ng-app 指令定义一个 AngularJS 应用程序。
2 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
3 ng-bind 指令把应用程序数据绑定到 HTML 视图。
4 ng-init 指令初始化 AngularJS 应用程序变量
<div ng-app="" ng-init="firstName='John';secondname='Heather'">
<p>姓为<span ng-bind="firstName"></span>,名为<span ng-bind="secondname"></span></p>
</div>
5 ng-controller 定义了控制器，用于控制AngularJs应用
6 ng-repeat 读取数组
7 restrict 值可以是以下几种:(默认值为 EA, 即可以通过元素名和属性名来调用指令。)
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
8 ng-show 提示
状态值：(invalid, dirty, touched, error)
9 ng-invalid 验证不通过
ng-empty 空
ng-not-empty 非空
ng-touched 触屏点击
ng-untouched 无触屏点击
ng-valid 验证通过
ng-dirty 值改变
ng-pending 未失去焦点
ng-pristine
10 自定义指令：app.directive 调用
要调用自定义指令，HTMl 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， myDirective, 但在使用它时需要以 - 分割, my-directive:

AngularJs 过滤器：

管道符 | （没错 就是这个竖线）
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

AngularJs 下拉框

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

选中的是字符串

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

选中的是对象

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

x为键，y为值（x用于显示，y存在value）

AngularJs http

$http.get("...")
    .success(function (response) {$scope.names = response.records;});

AngularJs DOM

1. ng-disabled
2. ng-show
3. ng-hide

AngularJs 事件

1. ng-click
2. ng-

AngularJS 路由

 angular.module('routingDemoApp',['ngRoute'])
    .config(['$routeProvider', function($routeProvider){
                $routeProvider
         .when('/',{template:'这是首页页面'})
         .when('/computers',{template:'这是电脑分类页面'})
         .when('/printers',{template:'这是打印机页面'})
         .otherwise({redirectTo:'/'});
 }]);

语法规则

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});