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