請多多指教!感覺很久沒有接觸到angular js框架了,今天先簡單的講講。
它學起來還是比較簡單的,它具有四大特性:MVC,雙向綁定,依賴注入,模塊化設計。
我使用它的最主要原因是因為:雙向數據綁定和模塊化設計;
1.使用它之前先要把它的庫文件引入;
2.在html元素中,加入ng-app=""指令,它的目的:限定angular 的範圍,且自動初始化;
再加入ng-controller=""控制器;當然還有很多指令如:ng-model綁定數據;ng-repeat可以循環出集合 中的每一項常用於循環輸出集合中的內容。
3.在js中使用:
var app=angular.module("",[]);
app.controller('',function($scope){
初始化一個數據:$scope.data="";
});
其大致用法就是這樣的。
實例:
HTML: <div ng-app="MyApp">//添加ng-app指令 <div ng-controller="MyCtrl1"> <div>{{data1}}</div> <input type="text" ng-model="data1">//這就是數據的雙向綁定,這裡改變了數據,js中 //相應的數據也會改變,若是js中數據改變這裡的數據也會改變 </div>//模塊1 <div ng-controller="MyCtrl2"> <div>{{data2}}</div> </div>//模塊2;模塊的設定是按自己的需求來的。 <div>
js: var app=angular.module("MyApp",[]); app.controller("MyCtrl1",function($scope){ $scope.data1="one"; }) app.controller("MyCtrl2",function($scope){ $scope.data2="one"; })
這裡講的都是單頁面的,而不是多頁面的,所以就沒有將依賴注入了,注:
1.{{data1}}:這樣綁定數據,若是數據很多,網絡很差的時候,可能會出現原生的{{data1}}, 而不是裡面的數據,所以最好使用<div ng-bind="data1"></div>; 2.在引入它的庫文件時,最好將他的庫文件下載到本地,再引入。
之後我會深入對angular 深入講解。