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放的是條件字符串或者條件值，關係是顯示與不顯示，符合條件就會顯示，不符合條件就會被註釋。