1.应用：一些功能的组合就是应用。
2.jQuery是一个类库（一系列函数的集合），AngularJS是一个框架（一堆类库的集合）。
3.AngularJS
◆前端MVC框架/诸多类库的集合/以数据和逻辑为核心。
◆其它前端框架：backbone/knockoutJS/vue/react框架。
◆核心特性：模块儿化/双向数据绑定/语义化标签/依赖注入。
◆
◆
◆
◆
4.前端要学的东西越来越多了，造轮子的人越来越多，各有各的特点，前端的语言很灵活，导致很多东西出现。
5.MVC开发模式
◆Model(模型)：处理数据
◆View（视图）：展示数据
◆Controller（controller）:连接模型和视图
◆
◆
6.thinkphp的使用
★工作原理是，先执行根目录下的index.php文件，这个php文件会去加载ThinkPHP（核心类库）中的ThinkPHP.php文件，这个php文件会根据配置去找根目录下的Application文件夹里的Home目录，Home目录中有Controller、Model、View这三个文件夹，会先去Controller文件夹中找对应的类文件，会去执行Controller中类文件的内容，其实每一个对应的类文件都会在View文件夹中有一个对应的文件目录，找到对应的控制器，执行对应控制器中的行为，控制器的名称决定View中的子文件夹名称，行为决定了View中的子文件夹里的文件名称。
◆静态资源放到 public文件夹中
◆public文件夹的路径在php文件中可以使用__PUBLIC__来替代。
◆controler文件夹中一个指定的控制器类文件对应一个view文件夹中一个指定的类文件夹，文件夹中对应一个html文件
◆在控制器中的类文件中输出方式
【
◇输出纯文本：$this->show('1111');
◇分配数据和页面取数据：$title="测试MVC";$this->assign("title",$title); ，对应的视图页面使用{$title}来取数据。
◇显示对应的视图：$this->display();
◇
◇
】
◆
◆
7.AngularJS的使用
◆引入框架：angular.min.js
◆这个框架中定义了一个全局对象angular，在此对象下有N多方法。
◆使用该对象的module方法可以创建一个模块儿，var App=angular.module('APP',[]);//App就是新创建的模块儿，这个模块儿就是一个对象，这个对象有N多方法，使用该对象的方法可以实现具体的业务逻辑。
◆调用创建的App对象创建控制器，App.controller('DemoController',['$scope',function($scope){
//$scope就是一个Model
$scope.name='高金彪';
$scope.scholl='传智播客';
$scope.courses=[
'MVC',
'指令',
'模块儿化'
];
}]);//创建了一个控制器
◆页面就是视图，在页面的使用 【
<div class="box" ng-app="App">
<div ng-controller="DemoController">
</div>
<h1>{{name}}在{{school}}学习使用AngularJS</h1>
<ul >
<li ng-repeat="(key,course) in courses">第{{key+1}}天学习了{{course}}</li> </ul>
</div>
】,使用ng-app来关联一个模块儿，使用ng-controller来关联该模块儿下的控制器，通过在该控制器范围下使用{{name}}的方式来使用Model中的数据，这样就建立了Controler、Model、View中的联系。
◆一个页面可以有多个模块儿，但是不允许相互嵌套，一般情况下只会有一个。
◆一个页面下的一个模块儿中，可以有多个控制器，允许互相嵌套。
◆
◆
8.AngularJS的指令
◆HTML在构建应用时存在诸多不足之处，AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，如：ng-app、ng-controller、ng-repeat等。
◆ng-bind等价于{{}}，也是从模型中读取数据，<li ng-bind="name"></li>和<li>{{name}}</li>一样。
◆ng-show表示页面元素是否显示，ng-hide表示页面元素是否显示，<li ng-show="true"></li>，表示显示，如果值为false就不会显示，<li ng-hide="true"></li>，表示隐藏，如果值为false就会显示。
◆ng-if表示页面元素是否存在，<li ng-if="true"></li>表示元素存在，如果值为false，页面元素的标签就会被注释掉。
◆ng-src表示当页面加载完模块儿后会被替换为src，<img ng-src="{{path}}"/>，这么做是为了减少<img src="{{path}}"/>请求错误的地址的一次请求。
◆ng-href原理和ng-src一样。
◆ng-class表示使用已存在的css类，<li ng-class="{red:true,blue:true}"></li>表示加载类名为red的样式和blue的样式，如果值为false就不加载该样式了。
◆ng-include表示通过服务器来读取文件，然后添加到指定区域，<div ng-include="'./header.html'"></div>，发送的是ajax请求，ajax基于http协议，但是一开始就读取其它页面然后添加到指定区域这种事儿应该是后端做的事儿。
◆ng-disabled表单禁用
◆ng-readonly表单只读
◆ng-checked单/复选框表单选中
◆ng-selected下拉框表单选中
9.AngularJS的自定义指令
◆首先通过var App = angular.module('App', []);创建一个模块儿
◆是用模块的directive方法自定义指令，App.directive('tag',function(){
//返回一个对象，这个对象记录了自定义指令相关的内容
return {
restrict:'ECMA';//表示这个指令可以当作元素标签element、类名class、备注标记mark、属性attribute来使用
templat:'<ul><li>首页</li></ul>';//表示这个指令输出一串html代码
templateUrl:'./list.html';//表示这个指令输出另一个html页面
// replace:true;//这个属性要配合restrict:'M'作为备注标记来使用。
}
});
◆自定义指令的使用方法：当restrict:'ECMA'时，作为标签元素<tag></tag>，作为类<div class='tag'></div>，作为注释标记<!-- directive:tag -->（必须让replace:true），作为属性 <div tag></div>
◆
◆
10.AngularJS的数据绑定
◆以数据驱动整个MVC框架
◆单项绑定：模型（model）上的数据传到视图（view）中。
◆双向绑定：模型（model）上的数据可以传到视图（view）中，也可以将视图（view）上的数据可以传到模型（model）中。
◆{{}}是ng-bind的简写形式，但是{{}}是写在标签对之间的，所以可能会出现闪烁的现象，可以通过给标签添加ng-cloak来解决闪烁的现象，原理是先加载angularJS脚本，然后通过添加属性选择的css样式来实现不显示，然后加载完毕所有模块儿之后再显示，这么做一定要把angularJS的脚本放在最上面，不然还是会显示。
◆ng-bind-template可以绑定多个数据，<li ng-bind-template="今天星期{{day}}，我要去{{address}}"></li>
◆双向绑定需要借助表单标签，可以通过修改表单中的内容，改变模型的值，控制器里也可以获取到改变后模型的值，并且可以通过给模型添加方法来实现从后台拿数据，从而修改当前模型中的属性值。
【
◇<div ng-app="App">
//通过修改表单中的内容，改变模型的值
<input type="text" ng-model="msg"><h3>{{msg}}</h3></div><button ng-click="show()">显示</button>
◇var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
// $scope Model
//模型中也可以得到表单中修改的值
//通过调用模型的方法可以达到从后台拿数据，然后修改模型的值
$scope.show = function () {
alert($scope.msg);
}
}]);
】，完全碾压微软的ASP.NetWebForm
11.AngularJS的模型初始化
◆可以通过ng-init来初始化模型（Model）也就是给模型对象$scope添加属性和方法，<div ng-init="name='itcast';age=10;"></div>，和写在App.controller('DemoController', ['$scope', function ($scope) {});里面一样。
12.AngularJS的事件
◆AngularJS对事件也进行了扩展，无需显式的获取DOM元素便可以添加事件，易用性变的更强。
◆通过在原有事件名称基础上添加ng-做为前缀，然后以属性的形式添加到相应的HTML标签上即可。如ng-click、ng-dblclick、ng-blur等。
13.AngularJS的遍历与过滤
◆通过ng-repeat可以将数组或对象数据迭代到视图模板中，ng-switch、on、ng-switch-when可以对数据进行筛选。
◆<li ng-repeat="item in items" ng-switch="item"> <span ng-switch-when="css">{{item}}</span>
</li>
◆ng-repeat="item in items"类似foreach，ng-switch类似switch，ng-switch-when类似case。
◆switch放的是模型或者与模型相关的变量，case放的是条件字符串或者条件值，关系是显示与不显示，符合条件就会显示，不符合条件就会被注释。
2.jQuery是一个类库（一系列函数的集合），AngularJS是一个框架（一堆类库的集合）。
3.AngularJS
◆前端MVC框架/诸多类库的集合/以数据和逻辑为核心。
◆其它前端框架：backbone/knockoutJS/vue/react框架。
◆核心特性：模块儿化/双向数据绑定/语义化标签/依赖注入。
◆
◆
◆
◆
4.前端要学的东西越来越多了，造轮子的人越来越多，各有各的特点，前端的语言很灵活，导致很多东西出现。
5.MVC开发模式
◆Model(模型)：处理数据
◆View（视图）：展示数据
◆Controller（controller）:连接模型和视图
◆
◆
6.thinkphp的使用
★工作原理是，先执行根目录下的index.php文件，这个php文件会去加载ThinkPHP（核心类库）中的ThinkPHP.php文件，这个php文件会根据配置去找根目录下的Application文件夹里的Home目录，Home目录中有Controller、Model、View这三个文件夹，会先去Controller文件夹中找对应的类文件，会去执行Controller中类文件的内容，其实每一个对应的类文件都会在View文件夹中有一个对应的文件目录，找到对应的控制器，执行对应控制器中的行为，控制器的名称决定View中的子文件夹名称，行为决定了View中的子文件夹里的文件名称。
◆静态资源放到 public文件夹中
◆public文件夹的路径在php文件中可以使用__PUBLIC__来替代。
◆controler文件夹中一个指定的控制器类文件对应一个view文件夹中一个指定的类文件夹，文件夹中对应一个html文件
◆在控制器中的类文件中输出方式
【
◇输出纯文本：$this->show('1111');
◇分配数据和页面取数据：$title="测试MVC";$this->assign("title",$title); ，对应的视图页面使用{$title}来取数据。
◇显示对应的视图：$this->display();
◇
◇
】
◆
◆
7.AngularJS的使用
◆引入框架：angular.min.js
◆这个框架中定义了一个全局对象angular，在此对象下有N多方法。
◆使用该对象的module方法可以创建一个模块儿，var App=angular.module('APP',[]);//App就是新创建的模块儿，这个模块儿就是一个对象，这个对象有N多方法，使用该对象的方法可以实现具体的业务逻辑。
◆调用创建的App对象创建控制器，App.controller('DemoController',['$scope',function($scope){
//$scope就是一个Model
$scope.name='高金彪';
$scope.scholl='传智播客';
$scope.courses=[
'MVC',
'指令',
'模块儿化'
];
}]);//创建了一个控制器
◆页面就是视图，在页面的使用 【
<div class="box" ng-app="App">
<div ng-controller="DemoController">
</div>
<h1>{{name}}在{{school}}学习使用AngularJS</h1>
<ul >
<li ng-repeat="(key,course) in courses">第{{key+1}}天学习了{{course}}</li> </ul>
</div>
】,使用ng-app来关联一个模块儿，使用ng-controller来关联该模块儿下的控制器，通过在该控制器范围下使用{{name}}的方式来使用Model中的数据，这样就建立了Controler、Model、View中的联系。
◆一个页面可以有多个模块儿，但是不允许相互嵌套，一般情况下只会有一个。
◆一个页面下的一个模块儿中，可以有多个控制器，允许互相嵌套。
◆
◆
8.AngularJS的指令
◆HTML在构建应用时存在诸多不足之处，AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，如：ng-app、ng-controller、ng-repeat等。
◆ng-bind等价于{{}}，也是从模型中读取数据，<li ng-bind="name"></li>和<li>{{name}}</li>一样。
◆ng-show表示页面元素是否显示，ng-hide表示页面元素是否显示，<li ng-show="true"></li>，表示显示，如果值为false就不会显示，<li ng-hide="true"></li>，表示隐藏，如果值为false就会显示。
◆ng-if表示页面元素是否存在，<li ng-if="true"></li>表示元素存在，如果值为false，页面元素的标签就会被注释掉。
◆ng-src表示当页面加载完模块儿后会被替换为src，<img ng-src="{{path}}"/>，这么做是为了减少<img src="{{path}}"/>请求错误的地址的一次请求。
◆ng-href原理和ng-src一样。
◆ng-class表示使用已存在的css类，<li ng-class="{red:true,blue:true}"></li>表示加载类名为red的样式和blue的样式，如果值为false就不加载该样式了。
◆ng-include表示通过服务器来读取文件，然后添加到指定区域，<div ng-include="'./header.html'"></div>，发送的是ajax请求，ajax基于http协议，但是一开始就读取其它页面然后添加到指定区域这种事儿应该是后端做的事儿。
◆ng-disabled表单禁用
◆ng-readonly表单只读
◆ng-checked单/复选框表单选中
◆ng-selected下拉框表单选中
9.AngularJS的自定义指令
◆首先通过var App = angular.module('App', []);创建一个模块儿
◆是用模块的directive方法自定义指令，App.directive('tag',function(){
//返回一个对象，这个对象记录了自定义指令相关的内容
return {
restrict:'ECMA';//表示这个指令可以当作元素标签element、类名class、备注标记mark、属性attribute来使用
templat:'<ul><li>首页</li></ul>';//表示这个指令输出一串html代码
templateUrl:'./list.html';//表示这个指令输出另一个html页面
// replace:true;//这个属性要配合restrict:'M'作为备注标记来使用。
}
});
◆自定义指令的使用方法：当restrict:'ECMA'时，作为标签元素<tag></tag>，作为类<div class='tag'></div>，作为注释标记<!-- directive:tag -->（必须让replace:true），作为属性 <div tag></div>
◆
◆
10.AngularJS的数据绑定
◆以数据驱动整个MVC框架
◆单项绑定：模型（model）上的数据传到视图（view）中。
◆双向绑定：模型（model）上的数据可以传到视图（view）中，也可以将视图（view）上的数据可以传到模型（model）中。
◆{{}}是ng-bind的简写形式，但是{{}}是写在标签对之间的，所以可能会出现闪烁的现象，可以通过给标签添加ng-cloak来解决闪烁的现象，原理是先加载angularJS脚本，然后通过添加属性选择的css样式来实现不显示，然后加载完毕所有模块儿之后再显示，这么做一定要把angularJS的脚本放在最上面，不然还是会显示。
◆ng-bind-template可以绑定多个数据，<li ng-bind-template="今天星期{{day}}，我要去{{address}}"></li>
◆双向绑定需要借助表单标签，可以通过修改表单中的内容，改变模型的值，控制器里也可以获取到改变后模型的值，并且可以通过给模型添加方法来实现从后台拿数据，从而修改当前模型中的属性值。
【
◇<div ng-app="App">
//通过修改表单中的内容，改变模型的值
<input type="text" ng-model="msg"><h3>{{msg}}</h3></div><button ng-click="show()">显示</button>
◇var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
// $scope Model
//模型中也可以得到表单中修改的值
//通过调用模型的方法可以达到从后台拿数据，然后修改模型的值
$scope.show = function () {
alert($scope.msg);
}
}]);
】，完全碾压微软的ASP.NetWebForm
11.AngularJS的模型初始化
◆可以通过ng-init来初始化模型（Model）也就是给模型对象$scope添加属性和方法，<div ng-init="name='itcast';age=10;"></div>，和写在App.controller('DemoController', ['$scope', function ($scope) {});里面一样。
12.AngularJS的事件
◆AngularJS对事件也进行了扩展，无需显式的获取DOM元素便可以添加事件，易用性变的更强。
◆通过在原有事件名称基础上添加ng-做为前缀，然后以属性的形式添加到相应的HTML标签上即可。如ng-click、ng-dblclick、ng-blur等。
13.AngularJS的遍历与过滤
◆通过ng-repeat可以将数组或对象数据迭代到视图模板中，ng-switch、on、ng-switch-when可以对数据进行筛选。
◆<li ng-repeat="item in items" ng-switch="item"> <span ng-switch-when="css">{{item}}</span>
</li>
◆ng-repeat="item in items"类似foreach，ng-switch类似switch，ng-switch-when类似case。
◆switch放的是模型或者与模型相关的变量，case放的是条件字符串或者条件值，关系是显示与不显示，符合条件就会显示，不符合条件就会被注释。