AngularJS+thinkphp相关笔记（一）

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放的是条件字符串或者条件值，关系是显示与不显示，符合条件就会显示，不符合条件就会被注释。