標籤：優先順序 put 瀏覽器 src 案例 border demo cti 密碼
最近學習AngularJS的內容,小果做了總結文檔,方便重複記憶.
AngularJS是一個為動態WEB應用設計的結構架構,這種方式可以擴充HTML文法,彌補構建動態WEB應用時靜態文本的不足.
一.五個核心特性:
1.資料雙向繫結;
2.模板;
3.MVVM;
4.依賴注入;
5.指令.
二.實現:
AngularJS通過指令的新屬性來擴充HTML,是綁定在DOM元素上的函數;瀏覽器啟動,Angular編譯器遍曆DOM樹來解析HTML,尋找指令屬性函數,並收集起來,進行排序,按照優先順序順序執行指令函數.(首碼:ng-)
三.優點:
1.實現前後端分離,後端只提供資料介面;路由以及模板等在前端完成;
2.html和js分離,展示和邏輯的分離;
3.減少js代碼,減少DOM元素尋找,事件綁定等代碼;
4.適合API開發.
ok,代碼君來了:
1.引入
<div ng-app=""></div> //初始化,標明是AngularJS應用程式,並標記範圍
2.初始化資料
<div ng-app="" ng-init=""></div> //賦值對象:字串.數字.數組.對象...
3.綁定資料
<div ng-app="" ng-init=""> <input type="text" ng-model=""/> //把相關事件綁定在指定標籤上面,實現model與view的雙向繫結</div>
4.點擊事件
<div ng-app="" ng-init=""> <button ng-click=""></button> </div>
5.遍曆資料
<div ng-app="" ng-init="arr=[‘3‘,‘5‘,‘9‘]"> <ul> <li ng-repeat=“x in arr”>{{x}}</li> //遍曆集合中的每個資料元素 </ul></div>
6.動態定義css的對應的ClassName
<style type="text/css"> .active{color:red; } .inactive{color:green; }</style>
<body ng-app="" ng-init=""> <input type="text" ng-model="name1" /> <input type="text" ng-model="name2" /> <div ng-class="{true:‘active‘,false:‘inactive‘‘}[isActive]">{{name1 + "" + name2}} </div></body>
7.提取多個公用頁面
<div ng-include="‘header.html‘"></div> //必須用web網站才能開啟,本地模式訪問報錯;寫檔案名稱要加單引號,否則系統當作變數處理
demo展示
1.
<body> <div class="ang" ng-app="">輸入的內容:<input type="text" ng-model="name" ng-init="name=‘奇異果姑娘‘"/><br />顯示輸入值:{{name}} </div></body>
效果:(初始狀態)
(輸入新內容)
2.
<body> <div class="ang" ng-app="" ng-init="name1=‘天氣‘;name2=‘不錯‘">輸入內容1:<input type="text" ng-model="name1" /><br />輸入內容2:<input type="text" ng-model="name2" /><div> 內容顯示:{{name1 + name2}}</div> </div></body>
效果:(初始狀態)
輸入新內容:
3.
<body> <div class="ang" ng-app="" ng-init="fruit={apple:‘蘋果‘,banana:‘香蕉‘}">對象1:<input type="text" ng-model="fruit.apple" /><br />對象2:<input type="text" ng-model="fruit.banana" /><br />{{fruit.apple + "喜歡" + fruit.banana}} </div></body>
效果:
4.
<body> <div class="ang" ng-app="" ng-init="arr=[1,2,3,4]">{{arr[1] + arr[2]}} </div></body>
效果:
5.
<body> <div class="ang" ng-app="" ng-init="click=false"><button ng-click="click=!click">hide/show</button><div ng-hide="click"> 輸入內容: <input type="text" ng-model="fruit" /> <br /> Wow! <span ng-bind="fruit"></span></div> </div></body>
效果:(初始狀態)
輸入內容:
點擊按鈕
再次點擊按鈕
6.
<body> <div class="ang" ng-app="" ng-init="arr=[{‘user‘:‘apple‘,‘pass‘:‘1111‘},{‘user‘:‘banana‘,‘pass‘:‘2222‘}]"> <ul><li ng-repeat="x in arr">使用者:<span>{{x.user}}</span>密碼:<span>{{x.pass}}</span></li> </ul> </div></body>
效果:
7.
<body> <div class="ang" ng-app="" ng-init="arr=[{‘user‘:‘apple‘,‘pass‘:‘1111‘,‘else‘:‘蘋果‘},{‘user‘:‘banana‘,‘pass‘:‘2222‘,‘else‘:‘香蕉‘}]"><table border="1"><tr ng-repeat="x in arr"> <td>{{x.user}} </td> <td>{{x.pass}} </td> <td>{{x.else}} </td></tr></table> </div></body>
效果:
8.
<body> <div class="ang" ng-app="" ng-init="obj={‘user‘:‘apple‘,‘pass‘:‘1111‘,‘else‘:‘蘋果‘}"><table border="1"> <tr ng-repeat="(key,value) in obj"><td>{{key}}</td><td>{{value}}</td> </tr> </table> </div></body>
效果:
9.
.apple{ color: orangered; }.banana{ color: green; }
<body> <div class="ang" ng-app="" ng-init="name1=‘you‘;name2=‘you‘;isActive=‘false‘"><button ng-click="isActive=!isActive">Change</button><br /><input type="text" ng-model="name1" /><input type="text" ng-model="name2" /><div ng-class="{true:‘apple‘,false:‘banana‘}[isActive]"> {{name1 + name2}}</div> </div></body>
效果:(初始狀態)
點擊按鈕:
正在準備綜合性的第10個案例,十全十美,先吃飯O(∩_∩)O
AngularJS總結(一)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
