1.AngularJS框架
描述:AngularJS框架诞生于2009年,由google公司提出
特点:AngularJS的核心特点是MVW的设计模式,支持模块化和双向数据绑定
以及依赖注入。
由来:AngularJS框架时为了克服html语言在构建App上天生的不足而设计的
2.AngularJS整体感知
描述:AngularJS框架的内容非常庞大,涉及到WEB应用架构的各个方面
我们在这里学习AngularJS的1.0版本目的主要是为了改变我们的思想
例子:快速实现mvc设计模式(数据模块与页面与用户之间的沟通)
2.边界指令ng-app
描述:AngularJS框架在使用的时候除了需要引入框架文件之外,还需要为框架指明一个边界
告知框架在哪个范围内生效。如果不使用边界指令进行声明,则AngularJS框架引入失败。
习惯上写在html标签之内,表示在当前页面中angularJS都能正常使用
语法:<html ng-app></html>
注意:边界指令是使用NG框架必须使用的一个指令,不写一定使用错误
2.呈现指令{{}}
描述:NG框架规定{{}}嵌套双花括号用来表示【内容呈现】功能
在{{}}中可以书写NG语法规则下的变量、字符串甚至表达式
说明:在上节课例子中{{msg}},
就是使用了呈现指令,将NG变量msg中的内容呈现出来
强调:呈现指令内只能书写合乎NG语法规则的内容,
任何不符合的输入都不能保证最终的呈现结果
这种写法坚决禁止:{{var num = 1;}}
3.信息指令ng-model
描述:NG框架规定ng-model用来对input或textarea这类
用于收集用户信息的标签进行数据绑定
ng-model所赋的值,即为【保存有用户输入内容的NG变量】
语法:<textarea ... ng-model='userInfo'></textarea>
4.绑定指令ng-bind
描述:NG框架中提供了一个用于对非输入性的标签使用的
类似于{{}}呈现指令的辅助指令
即为ng-bind
作用是能够将NG变量绑定到想要显示的标签之上,
并且在NG框架加载失败的时候,也不会直接将语法错误暴露出来
语法:<span ng-bind='message'><span>
5.初始化指令ng-init
描述:NG框架中规定使用本指令来对边界内部的数据模型(NG变量们)进行初始化操作
ng-init并没有规定具体的必须摆放位置,但习惯上放在body上
会在页面加载后,自动对内部规定的数据模型进行初始化操作
语法:<body ng-init='message="hello AngularJS"'></body>
//页面数据模型
var app = angular.module('app', []);
//实现html标签的控制器
app.controller('mainController', ['$scope', function ($scope){
$scope.pageTitle = 'lesson3_控制器新';
/*...收到了后台返回的数据*/
$scope.msg = '鼻音比较重,请见谅';
//
$scope.names = ['frank','lily','lucy','hanMeiMei','frank'];
$scope.bookInfos = [
{bookName:'js入门', author:'frank'},
{bookName:'js精通', author:'frank'}
];
}]);
3.angular.module()方法
描述:本方法是NG框架中提供,用来生成【页面数据模型】的方法
语法:var 模型名称 = angular.module('边界名称', [注入信息])
说明:因为现在还没有涉及到注入内容,因此暂时空置即可
例子:var myApp_module = angular.module('app', []);
2.声明控制器指令ng-controller
描述:本指令用来在页面中声明哪一个元素为控制器
控制器,就是用来操作数据和视图的部件。
语法:<html ng-controller='mainController'>...</html>
注意:只要声明一个标签拥有控制器,这个控制器在脚本中就必须写出!!
3.实现控制器方法*.controller()
描述:本方法是NG框架在script脚本中提供,用来生成【页面控制器】的方法
语法:页面数据模型名称.controller('控制器名称',['$scope', function ($scope){...}]);
例子:app.controller('mainController', ['$scope', function ($scope){...}]);
4.遍历指令ng-repeat
描述:本指令用来遍历NG变量,并根据其进行构建页面html元素
语法:<E ng-repeat='任意变量名 in NG变量 track by $index'>{{任意变量名}}</E>
说明:track by $index 表示允许有重复内容存在,如果不写出现重复内容会报错
例子:<li ng-repeat='pname in names track by $index'>{{pname}}</li>
补充:ng-repeat指令必须在controller中对NG变量赋值之后才会生效
单独的ng-repeat毫无用处,因为NG变量不存在,没法赋值。
4.事件监听
描述:NG框架中通过对元素标签添加【ng-事件名】指令,来对元素添加事件监听
而事件监听的回调函数需要在controller中,通过$scope来实现
说明:整个过程类似html事件
语法:<E ng-事件名称='回调函数名(NG变量)'></E>
...
$scope.回调函数名 = function (形参){
//在函数中形参就是传入的NG变量的值
};
...
例子:
所以为了便于团队开发,为了便于维护
NG提出了【多控制器思想】
说明:
(1)多控制器思想:
类似于div中的布局思想,是将控制器按照页面的不同模块功能进行切分
一个控制器只用来控制一个功能模块,多个控制器之间互不影响,独立工作。
(2)优势:
分工明确,代码清晰,便于维护
当系统出现问题,能够立即定位到问题坐标
(3)弊端:
对于初学者而言,前期代码的架构会变得很繁琐,对初学者不是很友好。
强调:
(1)每一个控制器只要被声明,就必须通过.controller实现
即便控制器中没有代码,也必须写出。
(2)每一个控制器作用域可以认为是嵌套的,
即外层controller可以直接访问到内层controller内的NG变量
而同级controller之间互不影响
(3)对于程序,习惯上mainController作为用户默认加载页面的根控制器
有且仅有唯一一个
6.router路由
描述:router路由是angularJS中提出的,用于构建单页面应用的模块。
其本质是从a标签点击跳转功能延展而来的。
说明:
(1)router功能的实现需要依赖于angularJS的扩展库文件angular-route.min.js
(2)router功能的实现需要依赖于ng-view指令
【ng-view指令】的作用是提供标注【显示不同页面的容器】的作用
(3)router功能的实现需要依赖于a标签的href属性
href='#要加载的页面代号'
此属性设置目的,是在a标签点击的时候能够通知路由,要加载哪一个页面
(4)router路由的具体语法是通过app页面数据模型创建的
通过config方法来构建一个路由
在路由中,通过.when()来判定加载哪一个页面
在路由中,通过.otherwise()来决定路由默认加载哪一个页面
app模型.config(['$routeProvider', function ($routeProvider){
$routeProvider
.when('/页面代号',{
templateUrl:'要加载的页面的url地址(以路由所在的位置为起点)',
controller:'对应页面的控制器名称'
})
...
.otherwise({
redirectTo:'/默认加载页面的代号'
});
}]);
注意:
(1)如果需要使用路由功能,那么在创建页面数据模型app的时候,
必须要注入一条名为【ngRoute】的信息,此注入信息相当于对当前页面声明:我要使用路由功能】
语法:var app = angular.module('app', ['ngRoute']);
(2)在承载不同页面的容器上记得不要忘记加ng-view,否则路由选中的页面无法加载。
7.服务service
描述:可以这么来认为,服务service相当于是app提供给用户使用的全局变量
而服务存在的目的,
其实可以认为是对各个controller功能的一个扩展
说明:
(1)在NG框架中,服务是一个名词。实在不能理解就替换成【NG全局变量】
(2)在NG框架中,因为controller的作用域问题,平级controller之间无法互相沟通
所以提出服务这一概念,不同的controller可以通过注入服务的方式来进行交互
(3)在NG框架中,存在多种不同的服务,有系统服务,也允许自定义服务
【在angular框架内存在多种全局变量,有系统自带的,也可以自己重新定义】
注意:不管是系统服务还是自定义服务,服务没有优劣之分
只是从功能角度去选择更适合的。
2.系统服务$http
描述:NG框架内直接对app数据模型内置了一个用于处理网络功能的服务,就是$http
可以认为系统提供的服务都是带有$前缀的
而为了区分服务,我们自定义的服务一般都不写$前缀
语法:因为$http服务是系统直接提供,所以不需要手动定义服务的内容
而是直接通过注入的方式,添加到controller内,直接使用即可。
app.controller('控制器名', ['$scope','$http', function ($scope, $http){...}]);
注意:
对controller注入了$http服务后,只是说明在这个controller的脚本内可以使用网络请求
而不是已经使用了网络请求
具体的网络请求还需要我们手动编辑。
例:
9.时间轴服务
描述:时间轴服务共有三种,没有统一的名称
在使用之前必须注入到controller之中才能使用
类型:【间隔调用服务$interval】【延迟调用服务$timeout】【清除时间轴内容服务$interval.cancel(timer)】
补充:以上三种服务与bom中间隔调用等函数基本没有区别
10.监听服务$watch
描述:$watch虽然我们称之为服务,但实际上这个服务并不需要我们主动注入
而是可以在任何时刻,在控制器中任何位置直接使用他们。
他的作用是监听任何想要监听的NG变量的值,并在这个值发生变化的时候回调。
语法:$scope.$watch('想要监听的angular表达式或字符串', 回调函数);
11.自定义服务
描述:之前课程中我们提到过,angularJS中的服务实际上就是对app数据模型的扩展
从某种意义上可以理解为【服务就是全局变量】的含义
接下来要提到的自定义服务则很好的贯彻了这个观点
系统服务是系统直接提供的,有不同的功能
自定义服务需要手动编辑功能
但两者都需要注入之后才能使用(特殊的服务不需要注入,$filter $watch)
说明:
自定义服务的方式常见有五种:
(1)value服务
(2)constant服务
(3)factory服务
(4)service服务
(5)provider服务
补充:
不论哪一种自定义服务,自定义服务的目的基本都是一致的,就是提供一个全局变量
来支持controller之间的交流
在自定义value服务中变量是可以被重新赋值的,constant中并不可以重新肤质在factory中可以做函数调用以及其他逻辑运算,在前两者中并不可以。
Provider是先占用内存,然后再随时使用,service及前三种是什么时候用什么时候占用内存,建议你多看service和provider
自定义指令很重要,电脑端页面的导航是多页面的,不能你是用路由,需要使用自定义指令
1).value自定义服务
描述:value服务是通过.value()方法对app数据模型进行扩展的一种服务定制方式
通过对app进行扩展
可以使得服务在controller之间进行信息交换,充当“全局变量”的角色
语法:app.value('自定义服务名称', 服务内容JSON);
说明:value服务实际上就是一个全局变量,所以可以随意的对其内容进行读取和修改
例子:
2)constant服务
描述:constant服务可以认为从作用上完全等价于value服务
区别就是constant服务一旦被定制完成,那么在注入使用之前都是不能更改的
(多次定制constant服务,只有第一个生效)
语法:app.constant('自定义服务名称', 服务内容JSON);
3)1.factory服务
描述:factory服务是通过.factory()方法去创建一个object结构并直接返回的操作。
说明:乍一看返回一个对象,和直接value式提供一个对象并无区别
但是通过函数返回一个对象,那么这个对象的所有结构就都是在函数内完成
而函数内是可以对对象进行任意的操作和扩充的
但是在value式固定结构中却无法做到
4)1.provider服务
描述:provider服务通过.provider()方法添加,并在第二个参数的函数内
通过this.$get = function (){...}的固定结构对服务内容进行扩充
特殊:provider服务只要被创建,就会直接添加到app当中
无论是否对controller进行注入,provider服务都会一直存在。
其余四种自定义服务都不能做到这点。
5)1.service服务
描述:service服务相当于本身已经构建了一个空白对象
在服务内部所有内容的操作均通过this.来完成。
12.【指令】与【自定义指令】
描述:指令可以理解为属性,
angularJS中的系统指令使得页面元素拥有了除了本身之外的一些特殊功能
自定义指令更像是创造了一个组件(标签)
2.如何自定义指令
描述:在angular框架内部,所有的自定义指令都是通过app.directivef()方法创建的。
语法:app数据模型.directive('自定义指令名称', function(){
b:"E",指的是element,意味着指令需要通过元素的方式进行唤醒
c:"C",指的是class,意味着指令需要通过类名的方式呈现
d:"M",指的是comment,意味着指令需要通过注释的方式进行唤醒
注意:
a:指令名称必须采用小写,任何大写都会导致无效。
b:指令名称如果是M类型,则replace字段就是必须写的,并且必须设置为true才能生效
c:指令如果通过template加载,则有且仅有唯一一个根节点。
(2)指令结构template
描述:指令结构template指的是指令在页面中能够显示的html结构
如果需要从外部文件中加载指令的结构,则需要写成templateUrl
(3)指令复写replace
描述:指令复写指的是指令当在页面中存在时,
是否会被当做是一个子元素添加到当前所在的元素内
默认为false,表示不会当成是子元素,而是会直接替换当前元素
可以设置为true,表示不覆盖当前元素,而是作为他的一个子元素添加到页面中
13.指令方案link
描述:指令方案link是angularJS中提供给自定义指令的一种“专有行为”
专门为自定义指令提供了一个用来编写对应脚本的区域
语法:app.directive('指令名称', function (){
...
...
link:function (scope, element, attrs){...}
});
说明:
(1)scope:如果将整个指令看作是一个controller,那么scope的作用等价于$scope
(2)element:一个包含了指令中所有页面元素的数组,每一个元素都是一个dom对象
数组整体支持jq操作,而数组元素本身支持js原生操作
(3)attrs:当前指令的属性集合,用来获取元素的属性。
补充:
在指令内部,需要对scope进行初始化编辑
...
scope:{},
link:function (scope, element, attrs){...}
原因是如果不进行初始化操作,那么scope默认为mainController中的$scope