亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

Web前端基礎知識

標簽:
AngularJS

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


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
2
獲贊與收藏
20

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消