一:angularJS :
1.angularJS
描述:angularJS 诞生于2009年,是由Google提供的一个优秀的前端框架
特性:angularJS框架的特点是(MVW--model+view+whatever)、模块化的程序思维
应用:angular的提出是为了克服HTML语言在构建应用上的不足而设计的
2.angularJS的整体感知
mvc(model-view-controller)
1) 边界指令:ng-app
描述:angularJS框架在使用时需要指明一个边界,表示angularJS框架在哪一个范围内生效
通过对页面标签添加ng-app属性来设置
说明:如果不指明边界,则无法执行属于angularJS部分的内容
2)脚本引入
描述:框架直接通过script标签引入
3)呈现指令
描述:angularJS通过{{}}来表示内容呈现,在花括号中字符串、变量、算式、甚至是具体的语句
注意:在这里提到的变量等结构,指的是框架范畴之内规定的变量和表达式,并不意味着在{{}}中可以进行js脚本的编写
4)信息指令:ng-model
描述:angularJS规定ng-model用来对input和textarea这类用于手机用户信息的数据标签进行绑定
【ng-model即为保存有用户信息的angular变量】
5)初始化指令:ng-init
描述:angularJs规定ng-init用来对边界内所有的数据模型即angular变量进行初始化操作
ng-init没有规定的书写位置,但一般都写在body标签内
ng-init没有书写的必要但如果页面加载时需要对angular变量赋初值,即可书写
如果多个变量同时需要赋初值,之间用分号隔开
6)绑定指令:ng-bind
描述:作用等价于呈现指令{{}},能够将angular变量的值显示在指定的标签上
说明:{{}}在angularJS框架没被正确加载时,会暴露出来,而ng-bind则解决了这个问题
3.angularcontroller模式
1)angular.module()
描述:本方法是由angularJS框架提供的,用来生成APP模型的方法
语法:var 模型名称 = angular.module('边界名称',[注入信息]);
2)声明控制者指令ng-controller
描述:本指令在页面中声明谁是控制器,控制器的作用就是用来操控数据的部件结构
3 )创建控制器指令xxx.controller()
本指令是在angular框架中提供,用来在脚本中生成页面控制器的方法
例子:app.controller('mainController',['$scope',function($scope){...}]);
4)angular中控制器目的
描述:可以通过控制器对页面内容进行操作
可以认为$scope等价于整个controller,为其核心部件
用法:$scope.xxx
5)遍历指令:ng-repeat
描述:本指令用来遍历angular变量,并根据angular变量构建页面
语法:<E ng-repeat=''angular变量名1 in angular变量名2 track by $index>{{angular变量名1}}</E>
6)事件监听通用指令【ng-事件名】
描述:angular-JS 中通过对元素的标签添加事件名进行事件监听,而事件监听的回调函数需要在controller中进行声明
<E ng-事件名='回调函数名(形参angular变量)'></E>
$scope.回调函数名 = function(形参){..}
7)ng-show/ng-hide/ng-if
描述:在元素标签中通过添加以上指令来对元素进行显示或隐藏
语法:<E ng-xxx='变量名'></E>
$scope.变量名 = true/false;
ng-show:true为显示,false为隐藏
ng-hide:true为隐藏,true为显示
ng-if:用法同ng-show,但是ng-show的true表示渲染并显示,false表示渲染并消失
ng-if的show表示渲染并显示,false表示不渲染且消失
4.ng-controller与多控制器思想
1)将控制器按照不同的的模块进行划分,一个控制器只对一个模块的逻辑思维进行操控,多个控制器之间互不干扰
2)优势:分工明确,代码清晰,便于维护
3)弊端:前期的代码架构工作十分繁琐 ,对于初学者不是非常友好
注意:每一个控制器只要被声明,就必须在xxx.controller()实现,即使控制器中什么也不写,也要实现,否则报错
每一个控制器的作用域都是嵌套的
任何时候都要保证mainController是唯一的存在,且mainconteroller能够访问任何控制器的任何内容
二 router路由
描述:router路由是由angular提出的处理单页面应用的模块,实际上就是在页面内进行a标签的跳转
说明:
1):router功能的实现需要依赖于angular扩展文件angular-route.min.js
2)router功能的实现需要依赖于ng-view指令,ng-view指令用来设置加载点击a标签时要显示页面的容器
3)ng-view的 功能的实现需要依赖于<a><a/>标签的href属性
href='要加载的页面的代号'
4)router路由的构建方式
angular路由的构建是通过APP模型来完成的
通过APP模型.config()命令来创建一个路由器
通过.when来决定加载那一个页面
通过.otherwise()在路由器中默认加载哪一个页面
语法:
app模型.config(['$routeProvider’,function($routeProvider){
$routeProvider
.when(‘/页面代号‘{
templateUrl:'点击这个a标签要加载的页面的url',
controller:'对应页面的控制器名称'
})
.otherwise({
redirectTo:'/默认加载的页面代号'
});
})
}]);
注意:
(1)如果使用路由功能,app.js文件中数据模型的注入部分,需要注入一个ngRoute
var app = angular.module('app', ['ngRoute']);
(2)ng-view声明的承载视图在页面渲染的时候,会获得一个名为ng-scope的类名
设置css样式时候不要覆盖这个类名,否则会导致路由加载失败