javascript 的mvc框架
- jQuery就是其中的一个类库，也就是函数的集合。你的代码起主导作用，并且决定何时调用类库的方法。主要是封装简化dom操作。
- 但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度的应用，就不是AngularJS的用武之地了
- angularjs 是一个js的结构化框架，它的重点不再是找dom元素，而是页面中的动态数据
AngularJS 通过 指令（directive） 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
使用：
- 导入angularjs框架
- 创建模块对象 app
var app = angular.module('myApp', []);
angular.module参数：
第一个是模块名，也是ng-app绑定的
第二个：模块的依赖部分
3.生成作用域对象
var app = angular.module('myApp', []);
app.controller('myCtrl1', function($scope) {//显式声明注入$scope
$scope.firstName1 = "John";
$scope.lastName2 = "Doe";
});
app.controller('myCtrl2', function($scope) {
$scope.firstName2 = "John";
$scope.lastName2 = "Doe";
});
返回值是作用域对象
controlle(控制器名，conductor)
conductor就是构造函数，所以一定要传递$scope参数
优化：
问题：js的代码正式发布会压缩，所以形参$scope会被abc代替，angular解析不了，使用数组来解决，压缩后angular会找数组的第一个参数，并且使用链式调用来优化代码，提高执行速度
angular.module('myApp', []).controller('myCtrl', [$scope,function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
}]).controller('myCtrl2', [$scope,function($scope) { //隐式声明注入$scope
$scope.firstName2 = "John";
$scope.lastName2 = "Doe";
}]);
开发的两种模式
- 命令式
更注重执行的过程
for 循环
类似解答题 - 声明式
更注重执行的结果
使用map进行循环
声明式是对命令式的局部包装
类似于选择题
概念
MVC
Model(模型), 当前视图中可用的数据。
View(视图), 即 HTML。（angularjs的指令与表达式）
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
Model(模型层)：
应用程序中用于处理数据的部分，(包括将数据保存或者修改到数据库、变量、文件中)。在AngularJS中，Model特指的是应用程序中的各种数据。 可以看做作用域对象
View(视图层)：
用户可以看到的用户显示数据的页面。
Controller(控制器):
控制器是连接View和Model的桥梁，负责从View读取数据，接受用户的操作输入；并将数据发送给Model层。Model层对数据处理完毕后，将结果返回给Controller，Controller再将结果返回给View层显示。
使用
1. 导入ng1的框架
2. 声明ng应用程序
3.使用丰富的ng指令(属性)编写代码
- 模板(Template) 带有Angular扩展标记的HTML
- 指令(Directive) 用于通过自定义属性和元素扩展HTML的行为
- 模型(Model) 用于显示给用户并且与用户互动的数据
- 作用域(Scope) 用来存储模型(Model)的语境(context)。模型放在这个语境中才能被控制器、指令和表达式等访问到
6.表达式(Expression) 模板中可以通过它来访问作用域（Scope）中的变量和函数
编译器(Compiler) 用来编译模板(Template)，并且对其中包含的指令(Directive)和表达式(Expression)进行实例化 - 过滤器(Filter) 负责格式化表达式(Expression)的值，以便呈现给用户
- 视图(View) 用户看到的内容（即DOM）
- 数据绑定(Data Binding) 自动同步模型(Model)中的数据和视图(View)表现
10.控制器(Controller) 视图(View)背后的业务逻辑
11.依赖注入(Dependency Injection) 负责创建和自动装载对象或函数 - 注入器(Injector) 用来实现依赖注入(Injection)的容器
13.模块(Module) 用来配置注入器
14.服务(Service) 独立于视图(View)的、可复用的业务逻辑
特性
AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。所有活动局限在一个页面上
当前页面的部分数据变化不会刷新整个页面 而是局部刷新利用ajax的技术 路由
优点
双向数据绑定
声明式依赖注入
解耦应用逻辑、数据模型、视图
完善的页面指令
定制的表单验证
Ajax封装
表达式
AngularJS使用{{}}绑定表达式。用于将表达式的内容输出到页面中。表达式中可以是文字、运算符、变量等，也可以在表达式中进行运算输出结果。
作用：就是显示数据 从当前作用域对象的指定属性名中取 就是ng-model定义的变量
实质数据时从内存流过来的，因为指定的属性位于内存中
语法:{{expression}} 作用：显示表达式的结果数据 表达式是只读的
表达式引用的变量必须是当前作用域对象有的属性 （包括其原型属性）
expresion:
- 基本数据类型 number boolean string
- undefined Infinity NaN null 都会解析为空串 不显示任何数据
- 对象的属性或者方法
所以在{{}}中有一个不存在的变量 页面什么也不会显示 是因为属性不存在会返回undefined - 数组
双向数据绑定
数据绑定：数据从A流向B
页面与ng内存：
ng-model（双向数据绑定）页面的数据自动流到内存中去 view----model
同时可以在页面立刻显示数据 当改变view的数据，也会改变在MODEL中的属性
{{}}表达式：model-----view 单向数据绑定（最终显示在页面）
在model域中的对象中修改属性值的时候，在页面的数据也会随之改变
ng-init :view----model单向数据绑定（最终显示在内存）
传统的数据绑定是单向绑定，数据只能从model和controller生成需要的html，但是不能返过来使用。只是单方向的。双向数据绑定:也就是说我在前面填写，后面直接生成代码，将填写的显示出来。双向的意思就是如果view修改了属性值，那么model机会看到这个改变。相反也是一样的。
作用域
rootScope根作用域对象。 ng-app会自动产生根作用域对象
这个对象的属性与方法与页面中指令或表达式是关联的
声明在rootScope上的属性和方法，可以在整个ng-app所包含的范围使用。Scope作用域对象 声明在
Scope，它是rootScope的子对象，要在控制器函数中声明
Scope
如果没有使用scope上。
2、如果ng-model没有写在任何一个controller中，则这个变量会默认绑定到$rootScope 上。
父子作用域：
1、AngularJS中，子作用域只能访问父作用域中的变量，而不能修改父作用域的变量。
2、为了解决上述问题，可以将父作用域中的变量声明为引用数据类型，例如对象等。
这样可以在子作用域中，直接修改对象的属性，而不需要修改对象本身保存的地址。
依赖注入
- 依赖对象
完成某个特定功能需要某个对象才能完成，这个对象就是依赖对象.事件里的event对象
比如angularjs里的$scope对象就是依赖对象，并且是依赖注入的形式使用的
注意：在angular里必须使用该方式，形参必须是这种特定的名称，否则无法注入，会抛异常
2依赖注入
依赖的对象是以形参的形式被注入使用的，这种方式称为声明式依赖植入
var Mymdule=angular.module("MyApp",[])
Angular将常用的功能封装到Angular.js，创建主模块时直接可以使用，无需注入而一些应用较少的功能，需要导入对应的JS文件，并且在[]中注入进这个模块，才能够使用。这就是AngularJS中的【【依赖注入】！
模块对象:
angular对应的函数：
var Mymdule=angular.module("MyApp",[])
对象对应的方法：
Mymdule.controller('mycontroller',function($scope){})
angularjs的模块
AngularJS 模块（Module） 定义了 AngularJS 应用。
可以通过 AngularJS 的 angular.module 函数来创建模块：
angularjs的控制器
过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
currency 将数字格式化为货币格式
filter 从数组项中选择一个子集
lowercase 格式化字符串为小写
orderBy 根据某个表达式排列数组
uppercase 格式化字符串为大写
自定义过滤器：
概念
MVC
Model(模型), 当前视图中可用的数据。
View(视图), 即 HTML。（angularjs的指令与表达式）
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
Model(模型层)：
应用程序中用于处理数据的部分，(包括将数据保存或者修改到数据库、变量、文件中)。在AngularJS中，Model特指的是应用程序中的各种数据。 可以看做作用域对象
View(视图层)：
用户可以看到的用户显示数据的页面。
Controller(控制器):
控制器是连接View和Model的桥梁，负责从View读取数据，接受用户的操作输入；并将数据发送给Model层。Model层对数据处理完毕后，将结果返回给Controller，Controller再将结果返回给View层显示。
使用
1. 导入ng1的框架
2. 声明ng应用程序
3.使用丰富的ng指令(属性)编写代码
- 模板(Template) 带有Angular扩展标记的HTML
- 指令(Directive) 用于通过自定义属性和元素扩展HTML的行为
- 模型(Model) 用于显示给用户并且与用户互动的数据
- 作用域(Scope) 用来存储模型(Model)的语境(context)。模型放在这个语境中才能被控制器、指令和表达式等访问到
6.表达式(Expression) 模板中可以通过它来访问作用域（Scope）中的变量和函数
编译器(Compiler) 用来编译模板(Template)，并且对其中包含的指令(Directive)和表达式(Expression)进行实例化 - 过滤器(Filter) 负责格式化表达式(Expression)的值，以便呈现给用户
- 视图(View) 用户看到的内容（即DOM）
- 数据绑定(Data Binding) 自动同步模型(Model)中的数据和视图(View)表现
10.控制器(Controller) 视图(View)背后的业务逻辑
11.依赖注入(Dependency Injection) 负责创建和自动装载对象或函数 - 注入器(Injector) 用来实现依赖注入(Injection)的容器
13.模块(Module) 用来配置注入器
14.服务(Service) 独立于视图(View)的、可复用的业务逻辑
特性
AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。所有活动局限在一个页面上
当前页面的部分数据变化不会刷新整个页面 而是局部刷新利用ajax的技术 路由
优点
双向数据绑定
声明式依赖注入
解耦应用逻辑、数据模型、视图
完善的页面指令
定制的表单验证
Ajax封装
表达式
AngularJS使用{{}}绑定表达式。用于将表达式的内容输出到页面中。表达式中可以是文字、运算符、变量等，也可以在表达式中进行运算输出结果。
作用：就是显示数据 从当前作用域对象的指定属性名中取 就是ng-model定义的变量
实质数据时从内存流过来的，因为指定的属性位于内存中
双向数据绑定
数据绑定：数据从A流向B
页面与ng内存：
ng-model（双向数据绑定）页面的数据自动流到内存中去 view----model
同时可以在页面立刻显示数据 当改变view的数据，也会改变在MODEL中的属性
{{}}表达式：model-----view 单向数据绑定（最终显示在页面）
在model域中的对象中修改属性值的时候，在页面的数据也会随之改变
ng-init :view----model单向数据绑定（最终显示在内存）
作用域
rootScope根作用域对象。 ng-app会自动产生根作用域对象
这个对象的属性与方法与页面中指令或表达式是关联的
声明在rootScope上的属性和方法，可以在整个ng-app所包含的范围使用。Scope作用域对象 声明在
Scope，它是rootScope的子对象，要在控制器函数中声明
如果没有使用scope上。
2、如果ng-model没有写在任何一个controller中，则这个变量会默认绑定到$rootScope 上。
模块
模块化就是一系列函数的集合，当应用被启动时，这些函数就会被执行。主要利用angular.module来定义模块。也是Angular.js的亮点。
模块对象:使用Angular.module来创建
var Mymdule=angular.module("MyApp",[])
参数：模块名 依赖的模块
使用该对象对应的方法生成作用域对象：
controller(名称, constructor);
Mymdule.controller('mycontroller',function($scope){})
来取缔构造函数的那个做法（ng-controller）
事件监听
NG框架中通过对元素标签添加【ng-事件名】指令，来对元素添加事件监听，事件监听的回调函数需要定义在controller中，通过scope.回调函数名=function(形参){
在函数中形参就是传入的NG变量的值
}
···
服务 service 运行在服务器家阿尔卖弄
在 AngularJS 中，服务是一个函数或对象，使用服务需要提前注入.
之前出现的服务包括watch以及 apply
filter
interval
相当于app提供给用户使用的全局变量，服务存在的目的，是对每个controller功能的一个扩展。
出现原因：
因为作用域的原因。各个控制器之间的变量时无法访问的，通过在控制器中注入服务来实现平级的控制器的交互。
1.系统内置的服务，统一使用http：向服务器发送请求，读取远程服务器的内容，类似于JQuery中的Ajax;
语法：
$http({
method:'GET',
url:'22_service.php'
}).sucess(function(data){
console.log(data)
}).error(function(err){
console.log(err)
})
这里类似于jquery的ajax请求，为了节省多次请求，会设置延迟
对controller注入了服务之后只是说明在这个controller的脚本内可以使用网络请求，而不是已经使用了请求，具体的网络请求还需要我们自己定义。
timeout:相当于setTimeout()
anchorScroll 与哈希值关联
log
$interpolate
服务的配置（供应商）
就是对服务进行初始化操作。服务名+Provider。
语法：
模型.config(["服务名+Provider）{
$服务名+Provider.方法（参数）
}])
自定义服务
为了与系统的服务相区分。我们自定义的服务不使用$前缀符号。
接收两个参数：第一个参数是服务名：第二个参数是自定义服务的构造函数。 我们自定义的服务，本质是一个对象。
对象的属性 ，可以在构造函数中，使用this.属性 表示；
对象的方法 ，可以在构造函数中，使用this.方法 表示；provider服务
在AngularJs中，service服务和 fantory服务都是基于provider服务实现的。
在定义provider时，可以使用this.$get方法，接受一个函数，函数里面采用与factory完全相同的写法
<!DOCTYPE html >
<html ng-app="myApp">
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<title ng-controller="maincontroller">{{mytitle}}</title>
<body>
<div ng-controller="myCtrl1">
</div>
<script>
var app = angular.module('myApp', []);
app.provider("myprovideservice",function(){
//与factory的不同在多了一个return以及$GET
return{
$get:function(){
return{
name:'hello',
show:function(){
return this.name+":angular"
},
myrandom:function(number1,nummber2){
return Math.random()*(nummber2-number1)+number1
},
};
}
}
})
app.controller('maincontroller',function($scope) {
$scope.mytitle="provider-service"
});
app.controller('myCtrl1', ['$scope','myprovideservice',function($scope,myprovideservice) {
console.log(myprovideservice.show())
console.log(myprovideservice.myrandom(3,9))
console.log(myprovideservice(3,9))
}]);
</script>
</body>
</html>
service服务
factory服务
<!DOCTYPE html >
<html ng-app="myApp">
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<title ng-controller="maincontroller">{{mytitle}}</title>
<body>
<div ng-controller="myCtrl1">
</div>
<script>
var app = angular.module('myApp', []);
app.factory("myfactoryservice",function(){
/// 返回一个对象。调用对象的属性以及方法
// return{
// name:'hello',
// show:function(){
// return this.name+":angular"
// },
// };
//仅仅返回一个匿名函数，调用的时候使用服务名
return function(num1,num2){
return Math.random()*(num2-num1)+num1
}
})
app.controller('maincontroller',function($scope) {
$scope.mytitle="factory-service"
});
app.controller('myCtrl1', ['$scope','myfactoryservice',function($scope,myfactoryservice) {
// console.log(myfactoryservice.show())
console.log(myfactoryservice(3,9))
}]);
</script>
</body>
</html>
factory服务在使用上与service服务没有太大差距。唯一的不同点，是声明服务时，factory服务是在函数中先声明好一个对象，然后使用return将对象返回。而service服务，则是直接在函数中使用this将属性和方法添加到对象上面。
在三种服务中，provider服务是唯一可以写进config配置阶段的服务。所以说，如果服务需要在配置阶段，也就是在声明controller之前执行的话，则可以使用provider，否则一般使用service或者factory。
路由(由a标签的点击跳转功能延展而来的)
路由允许我们通过不同的 URL 访问不同的内容。实现多视图的单页 Web 应用（single page web application，SPA）。
使用路由：
1.载入实现路由的 js 文件：angular-route.js。
- 如果使用路由，必须在创建页面的数据模型的时候，注入ngRoute 模块作为主应用模块的依赖模块。
angular.module('routingDemoApp',['ngRoute']) - 使用 ngView 指令。 ng-view提供标注[显示不同页面容器] 的功能
- router的实现需要依赖a标签的href属性
href="#+要加载的页面的代号" 这个属性的作用，是当用户点击链接时，通知路由加载那个页面。
4.配置routeProvider 定义路由规则。
具体使用：
通过数据模型的config方法创建一个路由，通过路由的.when判断加载哪一个页面，通过.otherwise判断默认加载哪一个页面
apm模型.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/页面代号',{
template:'要加载的页面的url地址，以路由地址为起点'，
controler:'对应页面的控制器名称'
})
·····
.otherwise({
redirectTo:'/默认加载页面代号'
})
}]);
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:第一个参数是 URL 或者 URL 正则规则。第二个参数是路由配置对象。
