1,Angular是一个非常优秀的前端js框架，它是由谷歌团队负责研发和维护的，通常用来构建单页面应用。angular自身有很多颠覆性的特性，改变了前端的编码格式，大大简化了我们的工作。
2，Angular的核心思想：通过指令扩展 html ,通过表达式绑定数据到 html . angularjs不推崇dom操作，也就是说在ng中几乎找不到任何dom操作，一切操作以数据为中心，用数据操作dom.
3, html和angularjs模块的关系是：管理与被管理的关系，我们创建了angularjs模块，通过模块对象创建控制器，进而通过控制器去管理相应的区域。请参考下图：
4，双向数据绑定：我们通过anjularjs去监听html页面中文本框的值变化，将最新的值给到js中对应的变量，当这个变量发生变化时，angularjs又回去html页面中查找谁在使用这个变量，找到后将变量更新为最新的值。实现双向绑定的必要条件是必须要是表单元素，且设置了ng-model;
5，angularjs的一些语法整理：(前提：先引入angular.js ）
（1）创建模块：angular.module( '模块名字' , [依赖模块] )
（2）创建控制器：angular.controller('控制器名字',[ '$scope',function($scope){ } ])
（3）配置路由：有两种方式：
第一种：angular-route :
将ngRoute作为依赖模块；
然后配置路由：模块对象.config( function( $routeProvider){
$routeProvider.when( '锚点值',{ template/templateUrl : "请求模版" } ).when('锚点值',{ template/templateUrl : "请求模版" } ).otherwise("默认锚点值")
})
页面中要有一个盒子设置属性 ng-view然后情求到的内容会呈现在这个盒子中。
第二种：angular-ui-router:
将ui.router作为依赖模块；
然后配置路由：模块对象.config( function($stateProvider){
$stateProvider.state( { url:锚点值；template/templateUrl:"请求模版"; name:"路由名字" }).state({ url:锚点值；template/templateUrl:"请求模版"; name:"路由名字" }) })
页面中要有一个盒子设置属性 ui-view然后情求到的内容会呈现在这个盒子中。注意页面链接中href属性不能设置，应该设置 ui-sref ='路由名字'。
（4）自定义指令：模块对象.directive( '指令名字'，[ function(){
return {
transclude:true; // 是否保存原指令标签内部的信息（不是模版中的信息）
template/templateUrl :"模版路径";
restrict: ECMA //可以使用的指令类型：依次为：元素，类名，注释，属性
replace:true //是否删除自定义标签
scope: true / false / { } //是否开辟一个局部作用域，自定义指令默认没有作用域
link:function(scope,element,attributes){ dom操作 }
} ])
关于自定义指令有几点需要说明；（1）scope 的取值：1-如果没有写这个属性或者赋值为false,都是默认不开辟局部作用域，会继承父级 ；2-如果赋值为true,会开辟一个局部作用域，也会继承父级；3-如果赋值为一个对象 :则为隔离作用域。比如｛msg : "@" }，则@会去指令所在的元素身上找有没有一个叫做msg的同名属性，如果有，将同名属性的值赋给当前指令内部的msg,通过@取到的数据，得到的结果都是字符串。如果是{ msg:"=" } ,情况和上面一样，只不过此时msg原本是什么类型就得到什么类型 （2）link函数中的三个参数说明：三个形参可以随意指定，不过注意语义化；第一个形参scope：向指令所在的模版内部暴露数据 ； 第二个参数element:当前指令所在的元素;第三个参数：当前指令所在元素身上的属性集合；
今天先更新到这里，稍后继续.........
网友评论