----基础----
1.表达式
AngularJS 表达式写在双大括号内：{{ expression }}，把数据绑定到 HTML，并在表达式书写的位置"输出"数据
AngularJS 表达式 像 JavaScript 表达式一样，它们可以包含文字、运算符和变量。
例：<p>{{(5*(5-2))+""+"123"}}</p>
2. AngularJS 通过指令 ng-directives 扩展 HTML
- ng-app
指令定义一个 AngularJS 应用程序。指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJS 应用都必须要要一个根元素。HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。 - ng-model
指令把元素值（比如输入域的值）绑定到应用程序。 - ng-bind
告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。 - ng-init 指令: 用于对ng-model指定的值进行初始化操作
3.双向数据绑定
- MVVM：模型的改变能影响视图view,视图的改变也能影响到模型
通过和ng-click来改变数据
4.模块（module）
- 通过模块对页面进行业务上的划分
- 将重复使用的指令或者过滤器之类的代码做成模块，方便复用
- 模块是应用控制器的容器。
- 控制器通常属于一个模块。
创建一个模块
语法： angular.module('模块名',[])
第二个参数是个数组,这个数组里的每一个元素，是我们当前模块依赖的其他模块
注意: 即便我们不依赖其他的模块，也需要传递一个空数组，因为如是不传第二个参数的话，这个方法的作用就会变为获取一个名为"模块名"的模块对象
angular.module('myApp'),是获取一个名为myApp的模块对象。
我们需要给ng-app指令一个属性值，这个值就是我们创建的模块名:
告诉anuglar,现在由我们自己创建的这个模块来管理页面。
5.控制器（ng-controller）
AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。控制器采用ng-controller指令定义。控制器是一个包含属性/属性和JavaScript对象的功能。每个控制器接受$scope参数指定应用程序/模块，由控制器控制。
创建一个控制器
1. 函数式声明法 (1.3.0-beta.15之前的版本都可以用)
2. module.controller(‘controllername’,[‘$scope’,function($scope){}])
可以以文件的形式存在
6.作用域 (Scope)
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
注意：scope的范围
$rootScope (根作用域) 它可以作用在 ng-app 指令包含的所有 HTML 元素中
作用域和根作用域相当于js当中的局部变量和全局变量
变量优先级为就近原则
7.过滤器
过滤器使用一个管道字符（|）添加到表达式和指令中。
示例： 1、搜索过滤列表 2、价格计算
8.自定义过滤器
var m1 = angular.module(‘myApp’,[]);//给字符串加“-”
m1.filter('addline',function(){
return function(str){
return "-"+str;
}
});
<p ng-init=“name=‘123’”>{{name | addline}}</p>// -123
----指令----
1. ng-model 指令：
- 绑定 HTML 元素 到应用程序数据。
- 为应用程序数据提供类型验证（number、email、required）。
- 为应用程序数据提供状态（见图表）。
- 为 HTML 元素提供 CSS 类。
-
绑定 HTML 元素到 HTML 表单。
2. ng-repeat 指令：
- 通过in的方式遍历每一项
例： <li ng-repeat="x in ['a','b','c']">{{x}}</li>
辅助功能:
$index , $first, $middle, $last, $even, $odd , ng-repeat-start, ng-repeat-end
3. 事件指令：
- ng-click/dbclick/mousemove……
- ng-copy
- ng-cut
- ng-paste
- ng-change
4.绑定指令:
- ng-bind
- ng-bind-template（解析多个绑定的变量）
- ng-bind-html(sanitize插件)
- ng-cloak(解析之前是display:none,解析成功之后display:block)
- ng-non-bindable(禁止解析)
4.样式相关指令：
- ng-class（如果表达式中变量不为字符串，支持{{}}）
- ng-style （表达式中变量需要加{{}}）
- ng-href
- ng-attr-*
- ng-src
- ng-show
- ng-hide
- ng-if(类似ng-show,dom操作除节点)
5.自定义指令：
directive 函数用来添加自定义的指令
使用驼峰法来命名一个指令， myDirective, 但在使用它时需要以 - 分割, my-directive:
要调用自定义指令，HTML 元素上需要添加自定义指令名
<body ng-app="myApp">
<my-directive></my-directive>
<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
return {
template : "<h1>我的自定义指令!</h1>"
};
});
</script>
restrict 值:
- E 作为元素名使用
- A 作为属性使用
- C 作为类名使用
- M 作为注释使用
区分大小写，可以组合使用的 - restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
- replace-
- template
- templateUrl
scope:
- true:独立作用域 .表示每一条调用的指令都是一个单独的作用域
-- 隔离作用域{} :
绑定策略
- @ 绑定的普通字符串
- = 等作用域下的变量数据
- & 函数
controller:共享的数据
link:（参数:scope,element,attr,reController）
----服务----
Angularjs中的服务指的是一些函数或者对象，他们可以在整个应用中持有某些行为和状态。每一个服务都只有一个实例，无论从应用中何处访问该服务，指向的都是同一个对象。
1.服务与控制器
在用angular进行开发的应用中，毫无疑问的会同时用到控制器和服务。控制器和服务满足了我们应用中某些方面的需求。下面的表可以概览控制器和服务器各自不同的职责。
2. Angular内置服务
Angular提供了许多个内置服务，这些服务可以在控制器中直接调用，无需访问服务所涉及的底层代码，从而确保整个应用的结构不被污染，这些服务在任何地方调用的方法都是统一的。下面是常用的内置服务：
$timeout
$interval
$http
$scope
$apply
$watch
$location
$log
$filter
3.$http服务
$http快捷方法与服务端交互
在angular中，页面与服务端交互的主要方式是调用$http服务模块,该模块的底层封装了javascript中的XMLHttpRequest对象，并接受一个对象作为参数，用于收集生成的HTTP请求的配置内容，同时返回一个promise对象,该对象拥有名为success和error的两个回调方法。根据类型的不同$http模块提供了不同的调用方式，通用格式如下：
$http.请求类型（url,[data],[config]）
.success(data,status,headers,config){//成功后的操作}
.error(data,status,headers,config){//失败后的操作}
请求类型包括POST、GET、JSONP、DELETE、PUT、HEAD
$http配置对象方式与服务端交互
在angular中，还可以将$http服务模板当成一个函数来使用，将构造XHR对象的所有配置项作为一个对象，并将对象定义为函数的形参，在调用时，只需将形参改对象中各属性值即可，调用格式如下：
$http({
method:
url:
data:
params: （字符串或对象，追加到url后，作为发送数据的一部分）
transformRequest:（对请求头和请求体进行序列化，生成数组发送给服务端）
transformREsponse:（解析服务器发送来的被序列化的数据）
cache: (是否对请求返回的数据进行缓存)
timeout: (延迟发送)
})
$http({
//配置对象
}).success(fn1)
.error(fn2)
等价于
$http({
//配置对象
}).then(fn1,fn2)
angular jsonp回调函数名一定是JSON_CALLBACK
4.自定义服务
创建自定义服务有两种方法：
- 1、使用内置的$provide服务(config)
- 2、调用模块当中的服务注册方法（factory,service,constant,value）
5.使用factory方式自定义服务
App.factory（name,fn）
6.使用service方式自定义服务
App.service（name,fn）
7.使用constant和value方式自定义服务
Constant方法调用格式：
App.constant(name,value)
Value方法调用格式：
App.value（name,value）
----插件----
- ng-route
引入对应版本的ng-route插件
设置显示容器ng-view
定义$routeProvider配置(config)
when
template
templateUrl
controller
otherwise
redirectTo
- ng-sanitize
<ul>
<li><a href=“#/”>默认项</a></li>
<li><a href=“#/second”>第二项</a></li>
<li><a href=“#/asdasdasd”>错误路由</a></li>
</ul>
<div ng-view></div>
<script type="text/javascript">
angular.module('routingApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
template: '<h5>这是一个默认页面</h5>'
})
.when('/second', {
template: '<h5>这是第二个页面</h5>'
})
.otherwise({redirectTo: '/'});
}]);
</script>
- ng-animate
Animation api
自带的类
.ng-enter
.ng-enter-active
.ng-leave
.ng-leave-active
- ng-cookies
var myApp = angular.module("myApp", ["ngCookies"]);
myApp.controller("NavCtr", ["$cookieStore", function NavCtr($cookieStore) {
$cookieStore.put("AngularJs", "xcccc");
var xx = $cookieStore.get("AngularJs");
console.info(xx);
}]);
$cookieStore 有三个方法 ：
1:get(key) 获取cookie
2:put(key,value) 设置cookie
3:remove(key) 移除cookie
网友评论