這篇文章介紹的內(nèi)容是關(guān)於angularjs基礎(chǔ)入門介紹,有著一定的參考價(jià)值,現(xiàn)在分享給大家,有需要的朋友可以參考一下。
關(guān)鍵點(diǎn):
?前端JS框架:封裝了使用JS開發(fā)前端重複功能,擴(kuò)展了HTML,主要用於頁(yè)面操作和顯示。
核心:MVC、模組化、雙向資料綁定、依賴注入、語(yǔ)義化標(biāo)籤、表達(dá)式等。 【相關(guān)影片教學(xué)推薦:angularjs影片教學(xué)】
雙向資料綁定
引入相關(guān)js檔案
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入Angularjs--> <script type="text/javascript" src="../js/angular.min.js" ></script> </head> <body> <!--匿名應(yīng)用模塊--> <p ng-app=""> <input ng-model="username" name="username"/> <input ng-model="username"/> <p>{{username}}</p> <p ng-bind="username"></p> </p> </body> </html> |
#ng-app=」」匿名應(yīng)用模組,一般要寫名字,方便後面初始化ng-model:自動(dòng)綁定
表單元素的value的值到Angularjs內(nèi)部變數(shù)中。
ng-bind:作用等同於表達(dá)式,但用法不同。一般用於綁定非表單元素,用來(lái)顯示變數(shù)的。
ng-bind和{{}}差異:前者會(huì)將標(biāo)籤的子標(biāo)籤的所有內(nèi)容替換為變數(shù)的內(nèi)容,而後者只是在目前位置顯示變數(shù)的內(nèi)容。
基於模組化的MVC(MVVM)
檢視:主要指HTML靜態(tài)頁(yè)面資料標(biāo)籤,主要是用來(lái)顯示。
模型:主要只填入視圖的、邏輯處理的一些資料。例如json、變數(shù)
控制:一些js程式碼,寫邏輯。主要是取得模型、填滿視圖、從視圖取得資料、填入模型。
m和vm的轉(zhuǎn)換:
例如變數(shù):
var username=”XiaoQi”; $scope.username=username;
vm的變數(shù)其實(shí)就是綁定到全域變數(shù)$scope中屬性。
頁(yè)面上:{{username}}注意:Angularjs變數(shù)在頁(yè)面上不能加$scope。
如果是定時(shí)器等內(nèi)部js改變了變量,那麼預(yù)設(shè)情況下Angularjs不能實(shí)現(xiàn)雙向資料的綁定顯示,需要使用$.digest強(qiáng)制通知(刷新)
|
#注意:
依賴注入DI |
##重複遍歷
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入Angularjs--> <script type="text/javascript" src="../js/angular.min.js" ></script> </head> <body> <!--視圖--> <p ng-app="myApp" ng-controller="myCtrl"> <table border="1"> <tr> <th>序號(hào)</th> <th>商品編號(hào)</th> <th>商品名稱</th> <th>商品價(jià)格</th> </tr> <tr ng-repeat="product in products"> <td>{{$index+1}}</td> <td>{{product.id}}</td> <td>{{product.name}}</td> <td>{{product.price}}</td> </tr> </table> </p> <!--控制器--> <script type="text/javascript"> angular.module("myApp",[]) .controller("myCtrl",["$scope",function($scope){ //json數(shù)組 $scope.products=[ {"id":1001,"name":"電視機(jī)","price":998}, {"id":1002,"name":"洗衣機(jī)","price":988898} ]; }]) </script> </body> </html>
底層實(shí)作:透過(guò)html中#(錨點(diǎn))來(lái)實(shí)現(xiàn)的。 |
寫法:url # 子路徑(要在中間顯示的)
引入路由模組:
<!--引入路由模塊--> <script type="text/javascript" src="../js/angular-route.min.js" ></script>
#
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入Angularjs--> <script type="text/javascript" src="../js/angular.min.js" ></script> <!--引入路由模塊--> <script type="text/javascript" src="../js/angular-route.min.js" ></script> </head> <body> <p ng-app="myApp"> <p>===========我是頭<br /> <a href="#/">首頁(yè)</a> <a href="#/computer">電腦分類</a> <a href="#/money">財(cái)務(wù)管理</a> </p> <!--路由中的包含的頁(yè)面的顯示,只能有一個(gè)元素--> <p ng-view></p> <p>==========我是腳</p> </p> <!--控制器--> <script type="text/javascript"> angular.module("myApp",['ngRoute']) //angularjs的配置,在配置中配置路由內(nèi)容 .config(['$routeProvider', function($routeProvider){ $routeProvider //template中支持html標(biāo)簽 .when('/',{template:'這是<h1>首頁(yè)頁(yè)面</h1>'}) //.when('/computer',{template:'這是電腦分類頁(yè)面'}) .when('/computer',{templateUrl:'computer.html'}) .when('/money',{template:'這是財(cái)務(wù)頁(yè)面'}) //如果都匹配不上,則跳轉(zhuǎn)到一個(gè)頁(yè)面 .otherwise({redirectTo:'/'}); }]); </script> </body> </html>when:判斷語(yǔ)句templateUrl:支援載入另外的頁(yè)面###############相關(guān)推薦:############AngularJS所有版本下載######## #####AngularJS學(xué)習(xí)總結(jié)############angularjs和angular4的差異。為什麼要使用angular4############angular入門教學(xué)######