手记

Web前端基礎知識

請多多指教!感覺很久沒有接觸到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 深入講解。


0人推荐
随时随地看视频
慕课网APP