1.angular：前端js框架 https://angularjs.org
① SPA单页应用程序
通过ajax从后台获取数据，动态渲染页面，不出现白屏，提高效率，节省流量
（1）锚点值
锚点：是网页制作中超级链接的一种，又叫命名锚记。锚点像一个迅速定位器一样是一种页面内的超级链接。使用锚点可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些锚点的链接，这些链接可快速将访问者带到指定位置。
示例：
在HTML页面中适当位置定义如下的锚点：
<div id="top">这里是TOP部分</div>
<div id="content">这里是CONTENT部分</div>
<div id="foot">这里是FOOT部分</div>
（可以使用 name 属性来替代 id 属性，命名锚点同样有效。）
利用超链接标签<a></a>制作锚点链接，主要用于页面内的锚点访问
<a href="#top">点击我链接到TOP</a>
<a href="#content">点击我链接到CONTENT</a>
<a href="#foot">点击我链接到FOOT</a>
点击锚点连接，将锚点对应的id内容显示在window中
在动态页面制作中，主要通过点击锚点连接后，页面地址栏会添加相应的锚点值，可通过这个锚点值从后台动态的获取对应的数据，再渲染到页面上，实现页面内容的更改
动态获取页面的锚点值：添加hashchange事件，监听锚点值改变
window.addEventListener("hashchange", function() {
var hash = location.hash
})
② angular基本指令：ng-开头的属性叫指令
ng-app：需要在angular管理的代码的父元素上添加这个属性
ng-click：给该元素添加点击事件
ng-model = “val”：给文本框添加这个指令，相当于把value值付给val变量，如果input的type是checkbox，val设置成一个boolean值变量，可实现切换选中功能
ng-class = “{‘className1’:false , ’className2’:true , ’className3’:true}”：给元素设置样式类名，false表示不添加，true表示添加
ng-checked：表示单选、复选框是否被选中
ng-selected：表示下拉框是否被选中
ng-disabled：表示是否被禁用
ng-readonly：表示是否只读
ng-src：在引用img标签时，如果不使用这个指令，直接使用src，浏览器会先解析这个路径下的内容，如果内容是表达式形式添加的，例如：src=”{{item.images}}”，系统会报404错误，改为ng-src即可
事件绑定指令：
ng-click：点击事件 ng-change：改变事件 ng-copy：复制事件
ng-blur：失去焦点 ng-dblclick：双击事件 ng-submit：表单提交事件
…….
动态输出代码演示：
<body ng-app>
<input type="text" ng-model="user.name">
<p>输入内容:{{user.name}}</p>
<p> {{“输入内容:” + user.name}}</p> 也可以写成这种形式，表达式语法
</body>
ng-init= “user.name=’Tom’”：给ng-model=”user.name”指令初始化
处理表达式闪烁：
ng-bind只能在双标签中使用，如<input>不能使用，双标签中不能写任何内容
ng-bind = “val”：用<p ng-bind=”val”></p>替换{{val}}表达式，可以解决闪烁问题
ng-cloak <p class = “ng-cloak”>{{val}}</p>，因为angular在加载完成之后会移除类名为ng-cloak的所有内容，由于，表达式在移除之前就加载好了，所以最好既有表达式的效果，又不会将表达式原始内容在页面上闪烁显示
渲染json格式或者数组格式的数据：ng-repeat 遍历渲染数据
<div ng-app="demoMod">
<ul ng-controller="demoController">
<li ng-repeat = "item in data track by $index">
item是随意设置的变量，data是需要渲染的数据名，如果数据中有重复的元素就需要添加track by $index指令，否则会报错
{{item.name}}: {{item.age}}
ng-class = “{‘A’:’red’ , ‘B’:’blue’ , ‘C’:’green’}[item.class]”给每个元素遍历设置相应的类名所对应的样式，此处red、blue、green都是类名
ng-hide = “item.class==’A’” 隐藏class为A的这个元素
ng-show = “item.class==’A’” 显示class为A的这个元素
ng-if =布尔值为true时显示当前元素，为false时删除当前
ng-switch: 与ng-switch-when同用，用法类似于js中的switch case
</li>
</ul>
</div>
var demo=angular.module("demoMod",[]);
demo.controller("demoController",function($scope) {
$scope.data=[
{name:"Tom",age:20,class:’A’},
{name:"Mark",age:18,class:’B’},
{name:"Lucy",age:19,class:’C’}
];
});
ng-repeat下的元素具备一些angular属性，可以在chrome中安装AngularJS Batarang 查看这些属性，例如$even，$odd，$first，$last，$middle
指令在H5标准下使用：data-
在指令前加上data-即可，例如data-ng-app，data-ng-model
③自定义指令：
<div ng-app="demoMod">
<div my-btn>内容</div> 此处引入的my-btn必须与自定义属性的名字相对应
var app = angular.module("demoMod", []);
app.directive('myBtn', [
引入自定义属性：directive，myBtn是指令的名字，必须按照驼峰命名法命名
function() {
var obj = {
template: '<button>btn</button>'
在具有my-btn指令的标签之中创建上述模板
templateUrl: './test.html’
这个属性，可以将test.html文件中的html引用到具有my-btn指令的标签之中
templateUrl: 'tpl’
在页面中指定一个type为text/ng-template的<script>标签，id为tpl，上述指令能加载到这个<script>标签中的内容，标签如下：
<script type = “text/ng-template” id = “tpl”>
<button>btn</button>
</script>
restrict: 'ECAM’
这个属性表示指令在标签中设置成什么形式，A：以属性的形式、C：以类名的形式例如：<div class = “my-btn”></div>、E：以自定义标签的形式例如：<my-btn></my-btn>、M：以注释的形式使用。该属性可以设置成A、E、C、M中的任意一个或多个
replace: true
这个属性表示，将具有my-btn指令的标签全部替换成模板字符串，而不是在其innerHTML中添加模板字符串，主要用于单标签不具备innerHTML
transclude: true 转置
这个属性表示，将具有my-btn指令的标签的innerHTML添加到模板字符串，不能与replace同用，且要添加该innerHTML的模板字符串标签需要添加ng-transclude指令<div ng-transclude></div>
scope:{
mytest: ‘@test’,
设置一个任意属性，例如：mytest，对其赋任意值，必须以@开头，例如：@test，然后给具有my-btn指令的标签，设置test值，例如<div my-btn test = “btn-primary”></div>，这里的“btn-primary”相当于是类名，其他标签可以动态引用这个类名，<button ng-transclude class = ‘’{{mytest}}”></button>
test:’@’ 这是上述方法的简写模式
}
link: function(scope,element,attributes){ 包含3个参数的函数
scope 类似于控制器中的$scope
element 具有my-btn指令标签的jqLite对象（包含jQuery方法）
attributes 具有my-btn指令标签的所有属性集合
element.on(‘click’,function(){
console.log(this);
})
scope.name = “Tom” <p>{{name}}</p>
}
};
return obj;
}
]);
</div>
④ angular中写js代码
（1）创建模块
angular.module(‘demoMod’ , [ ]) 写在<script>标签中
如果不传递[ ]空数组，angular.module(‘demoMod’)表示获取demoMod这个对象
（2）创建控制器
给标签元素设置相应的控制器，和模块指令：
<div ng-app = “demoMod” ng-controller = “demoController”>
在模块demoMod下创建控制器demoController：写在<script>标签中
var app = angular.module(‘demoMod’ , [ ]);
app.controller(‘demoController’ , [‘$scope’ , ‘$log’ , ‘$location’ , ‘$http’ , function($scope , $log , $location , $http){
$scope是angular提供的整个数据模型对象，可以通过他操作dom对象，设置的dom都可以看做是他的属性
$log和console一样，输出写法：$log.log( )
$location.url() 获取页面的锚点值，不包含#号，可通过$watch监视变化
angular中的ajax请求，需要调用参数$http，其中then属性包含两个函数，第一个是成功时的回调函数，第二个是失败时的回调函数
$http.get(‘/demo/app/demo_data/data.json’).then(function( res ){ 这是请求成功的回调函数
$scope.data = res.data
} , function(){ 这是请求失败的回调函数
})
$scope.user = {};
$scope.user.name = “Tom” 创建初始模型，类似使用ng-init
$scope.$apply() 在数据改变之后调用，强制angular监视数据模型，可用于异步请求之中
$scope.$watch("name",function(nowValue,oldValue) {
console.log(nowValue)
console.log(oldValue)
}, true])
$watch( )是$scope的属性，用于监听$scope的相关属性的改变，第一个参数是需要监听的属性；第二个参数是回调函数，回调函数中第一个参数是该属性改变后的值，第二个参数是该属性改变前的值；$watch( )中第三个参数true表示深度监听，数据中每个对象的所有属性变化都会被监听
})
（不推荐）旧版本控制器的创建方法：声明一个全局函数即可
function demoController ( $scope ){ $scope.name = “Tom” }
构造函数方式创建控制器：
<div ng-app = “demoMod” ng-controller = “demoController as obj”>
{{obj.name}}
</div>
var app = angular.module(‘demoMod’ , [ ]);
app.controller(‘demoController’ , function($scope){
this.name = “Tom”; 由于启用了构造函数对象obj，所以这里可以用this指向这个obj
})
方便代码压缩的方式创建控制器（依赖注入）：
app.controller(‘demoController’ ,[‘$scope’ , ’$log’ , function(a,b){ }])
由于$scope、$log是angular提供的固定写法的参数，在用工具压缩代码时会被替换成a、b但，后续代码不能识别所以会报错，angular提供了上述数组的写法，以字符串的形式存储这两个参数，可以保证在代码压缩时不会被替换
（3）创建服务service
创建服务：
var app = angular.module(‘demo.service’ , [ ]);
app.service( ‘DemoService’ , [‘$window’,function($window){
this.name = “Tom”;
var storage = $window,localStorage;
此处的$window是angular提供的window对象，和BOM中的window对象一致，可以通过$window，获取页面的localStorage对象
storage.getItem(‘demoKey’);可以调用localStorage的getItem方法
} ])
service中的回调函数，会被当做构造函数来使用，在将其作为参数引用的控制器中，可以得到这个构造函数创建的对象
创建控制器：
var app = angular.module(‘demo.controller’ , [ ]);
app.controller( ‘demoController’ , [‘$scope’ , ‘$location’ , ‘DemoService’ , function($scope , $location , DemoService){ console.log(DemoService) }])
此处的打印结果为：object{name: ’Tom’}，即可以获得service中回调函数，创建的对象
（4） angular中通过js向页面渲染字符串标签”<div>value</div>”
首先要引用angular的扩展模块sanitize angular-sanitize.js
<div ng-app="demoMod">
<div ng-controller='demoController'>
<p ng-blind-html='name'></p>
</div>
</div>
var demo=angular.module("demoMod",['ngSanitize']);
在demoMod模块中引入ngSanitize模块
demo.controller("demoController",[ ‘$scope’ , function($scope) {
$scope.name="<div>Tom</div>";
}]);
⑤ angular路由
使用路由之前先安装路由模块：npm install angular-route –save
引入angular.js和angular-route.js
<body ng-app="demoApp">
<div ng-view></div> ng-view指令，用来指导template模板的插入
<script>
var app = angular.module('demoApp',['ngRoute']); 指定使用ngRoute模块
app.controller( ‘nameController’ , [‘$scope’ , ‘$routeParams’ , ‘$route’ , function($scope , $routeParams , $route){
console.log($routeParams)
$routeParams为锚点参数对象，如果在when中传入了相应的属性，例如：'/name/:name'，那么这个对象就可以拿到name属性，值为传入的锚点值
$route.updateParams({name:’Jack’})
$route.updateParams用于更新路由参数，这个方法需要传入一个对象，这个对象需要包含一个路由参数作为属性，例如本案例中设置的:name，使用了该方法后，页面会跳转到其设置的锚点值位置
}])
app.config(['$routeProvider',function($routeProvider){
$routeProvider是angular提供的用来设置规则的对象
$routeProvider.when('/name/Tom',{
when，方法包含两个参数，第一个/name/Tom是锚点值，第二个是一个对象，里面包含很多属性，用法和自定义指令基本类似
也可以写成'/name/:name?'，这样可以在控制器中拿到$routeParams包含name属性的对象，这个属性的值就是传入的锚点值，?表示即使没有传入name锚点值，也可以匹配到，即这个参数可以不写，不会出现问题
template: '<p>这是插入的controller变量{{name}}</p>'
template内容插入到包含ng-view指令的标签中，此demo插入到上述div中
controller: 'nameController'
指向一个controller的名字，使when中可以使用这个controller提供的变量例如：{{name}}
}). when('/name/Jack',{
templateUrl: '/template/view.html'
可以不断使用when方法，给不同的锚点设置不同的内容，templateUrl引用路径从主模块所在路径开始计算，即模板要添加到哪个文件，就从这个文件计算
}). otherwise({ 指定所有when没有设置的锚点值，跳转到固定页面
redirectTo: '/name/’ 这是没有设置的锚点，跳转的页面
})
}])
</script>
</body>
⑥ angular中DOM操作（jqLite：具备jQuery方法的对象）
var $ = angular.element; 开启轻量级jQuery的DOM操作
$(document).ready(function() {
var test=$(document.getElementById("test")); 需要传入原生js
console.log(test);
test.addClass("class"); 可以使用类似jQuery的方法
console.log(test);
})
⑦过滤器（filter）
货币过滤器：<p>{{myMoney | currency: ￥}}</p> 不传参数￥，默认是$
日期过滤器：<p>{{myDate| date: ’yyyy年MM月dd日 hh:mm:ss’}}</p>
冒号后是参数，不传参数，默认是英文格式日期
字符串限制过滤器：<p>{{str | limitTo: 5: 2}}</p>从索引为2开始，显示5个字符
json过滤器：<p>{{myJson| json: 6}}</p>表示前面有6个空字符的，格式化json
排序过滤器：<p ng-repeat = “item in myArr | orderBy : ‘age’”> 表示输出数据时按照数组中age值的大小，从小到大排序，参数改成-age，则从大到小排序
filter过滤器：<p ng-repeat = “item in tasks | filter : { completed: false }”> 表示选择数据中completed属性为false的对象输出，如果不使用{ completed: false }对象参数，直接写filter:false，表示全局匹配包含字符串”false”的数据输出
在js中使用过滤器：
在控制器中传入过滤器:
controller(‘demoController’ ,[‘$scope’ , ’$filter’ , function(a,b){ }])
$scope.tmp = $filter(‘date’)($scope.myDate , ‘yyyy年MM月dd日 hh:mm:ss’ )
⑧ angular被称为：MVC框架
M：Model模型 存储数据
V：View视图 包含html标签代码，用来展示数据
C：Controller控制器 调度业务逻辑，处理用户交互
MVVM框架：Model-Veiw-VeiwModel
由于angular中$scope和VeiwModel类似，所以也有说法认为angular是MVVM框架
⑨ CDN内容分发网络（第三方服务器提供的文件路径）
<script type = "text/javascript"
src = "http://apps.bdimg.com/libs/ angular-material/ 0.9.6/angular-material.js" ></script>
可以引用第三方，例如百度的cdn静态资源库，也同样可以实现angular的功能