angular学习

一，常用指令

1.ng-app 指令ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；ng-app可以出现在html文档的任何一个元素上。ng-app作用：告诉子元素指令是属于angularJs。ng-app的值可以为空（练习），项目中一定要赋值，后面所说的模块

2.ng-init 指令ng-init 指令为 AngularJS 应用程序定义了 初始值。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

3.ng-model 指令ng-model 指令 绑定 HTML 元素 到应用程序数据。ng-model 指令也可以：为应用程序数据提供类型验证（number、email、required）。为应用程序数据提供状态（invalid、dirty、touched、error）。为 HTML 元素提供 CSS 类。绑定 HTML 元素到 HTML 表单。

4.ng-repeat 指令ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

5.ng-bind和表达式{{}}结果是一样的{{1+5}}  ==  <span ng-bind="1+5"></span>

6.AngularJS 对象就像 JavaScript 对象ng-init="person={firstName:'John',lastName:'Doe'}"

7.数组元素中，字符串一定要使用单引号，数字可以不使用。

二：自定义指令

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {    
return {        
template : "<h1>自定义指令!</h1>"    };});
</script>

1.自定义指令的使用：元素名<runoob-directive></runoob-directive>属性<div runoob-directive></div>类名<div class="runoob-directive"></div>注释<!-- directive: runoob-directive -->

2.限制使用通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);app.directive("runoobDirective", function() {    return {        restrict : "A",       template : "<h6>自定义指令!</h6>"    };
})
}

restrict 值可以是以下几种:E 作为元素名使用A 作为属性使用C 作为类名使用M 作为注释使用restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

3.ng-model是用于表单元素的，支持双向绑定。对普通元素无效；ng-bind用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容

三：ng-model 指令作用：双向绑定，验证用户输入，应用状态，CSS 类四：AngularJS Scope(作用域)

1，视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

2，AngularJS 应用组成如下：View(视图), 即 HTML。Model(模型), 当前视图中可用的数据。Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

3，scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

4，所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

5，控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

五：过滤器

1，作用：转化数据currency格式化数字为货币格式。filter从数组项中选择一个子集。lowercase格式化字符串为小写。orderBy根据某个表达式排列数组。uppercase格式化字符串为大写。

2，自定义过滤器

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

   
六：service服务
1，Angular的很多服务，在DOM中有对应的对象，那为什么不使用这些对象，而是要用服务呢？因为这些服务可以获取到Angular应用声明周期的每一个阶段，并且和$watch整合，让Angular可以监控应用，处理事件变化。普通的DOM对象则不能在Angular应用声明周期中和应用整合,
2，$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
七：模块模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []); 
</script>