angularjs應用骨架

時間 2019-12-08

原文原文鏈接

　　使用典型的類庫時，你能夠選擇並使用你所喜歡的功能；而對於angularjs框架來講，必須把它當作一個完整的套件來使用，框架中的全部的東西都包含在裏面，接下來將會介紹angular的基礎模塊，這樣你就能夠理解它們是如何被裝配在一塊兒的。javascript

　　調用Angular

　　爲了使用angular，全部的引用都必須作兩件事情：css

　　一、加載angular庫。html

　　二、使用ng-app指令告訴angular應該管理DOM中的那一部分。java

　　加載腳本

　　加載類庫的操做很是簡單，與其餘javascript類庫遵循一樣的規則。angularjs

　　使用ng-app聲明Angular的邊界

　　你可使用ng-app指令告訴angular管理頁面的那一塊。若是你正在構建一個純angular應用，那麼你應該把ng-app寫在html標籤中，如：、數組

　　<html ng-app>瀏覽器

　　……服務器

　　</html>app

　　若是隻想管理頁面中某一個部分，那麼能夠這樣寫：框架

　　<html>

　　　　　　……

　　　　</div>

　　</html>

　　Model View Controller

　　angular自己是支持MVC風格的應用設計。儘管angular有很大的靈活性，可是一下的風格會常常涉及：

　　一、用來容納數據的模型，模型表明應用當前的狀態。

　　二、用來展現數據的一些試圖。

　　三、用來管理數據和模型之間的一些控制器。

　　eg. var sometext='you hava started your journey.';

　　你將會使用對象的屬性來建立數據模型，甚至只用數據基本類型來存儲數據；你可一編寫一個HTML頁面來建立試圖，而後把它和你數據中的模型融合起來

　　eg.<p>{{sometext}}</p>

　　咱們把這叫作雙括號插值語法

　　把以上東西整合起來就有了以下內容：

 1 <!DOCTYPE html>
 2 <html ng-app="textApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World!</title>
 6     <script src="static/js/angular.js" type="text/javascript"></script>
 7     <script src="static/app/controller/controller.js" type="text/javascript"></script>
 8 </head>
 9 <body ng-controller="TextController">
10 <p>{{sometext}}</p>
11 </body>
12 </html>

View Code

1 !(function (){
2     var app= angular.module('textApp',[]);
3     app.controller('TextController', function ($scope) {
4         $scope.sometext = 'you hava started your journey.';
5     });
6 }());

View Code

　　模版和數據綁定

　　angular中的模版只是一些HTML的一些片斷而已，咱們能夠從服務器上加載，也能夠在<script>標籤中定義，處理方式與其餘全部靜態資源相同

　　基本的運做流程以下：

　　一、用戶請求用戶起始頁。

　　二、用戶的樓蘭其向服務器發起一次HTTP鏈接，而後加載頁面，這個頁面裏面包含了模版。

　　三、angular被加載到頁面中，等待頁面加載完成，而後查找ng-app指令用來定義模版邊界。

　　四、angular遍歷模版，查找指令和綁定關係，這將出發一系列動做：註冊監聽器、執行一些DOM操做、從服務器獲取初始化數據。這項工做的最後結果是，應用將會啓動起來，最後模版會轉換成dom視圖

　　五、鏈接到服務器去加載須要展現給用戶的其餘數據。　

　　對於每個angularjs應用來講，步驟1到步驟3都是必須的，可是步驟4和步驟5是可選的。　

　　顯示的文本

　一、ng-bind指令

　二、{{}}方式

　　對於輸出的內容是等價的。那麼爲何還要出現ng-bind指令呢？咱們使用{{}}會是代碼閱讀起來更加簡潔，可是在angular使用數據來替換化括號以前，{{}}有可能會被用戶看到，而第一種則不會遭遇這種問題。形成這種現象的緣由是，瀏覽器須要先加載HTML頁面，渲染它，而後angular纔會有機會去把她解釋成你指望看到的內容。

　　表單輸入　　

　 Angular表單元素很是方便。如：

1 <form ng-controller="someController">
2     <input type="checkbox" ng-model="youCheckedIt"/>
3 </form>

View Code

　這樣作的含義是：

　一、當用戶選擇了複選框以後，SomeController中的$scope中的youCheckedIt的屬性就會變成true，而反選複選框youCheckedIt的屬性就會變成false。

　二、若是在控制器中把$scope.youCheckedIt的值設置爲false時，UI中複選框就會反選。反之，則勾選複選框。　

　當一個文本框被改變的時候，某個方法就會被調用作出一些列的邏輯操做，可使用ng-change來指定一個控制器方法，如：

 1 <!DOCTYPE html>
 2 <html ng-app="myapp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="static/js/angular.js" type="text/javascript"></script>
 7     <script src="static/app/controller/form.js" type="text/javascript"></script>
 8 </head>
 9 <body>
10 <form ng-controller="myController">
11     Staring: <input type="text" ng-change="computerNeeded()" ng-model="fundaing.starting"/>
12     Recommendation:{{fundaing.needed}}
13 </form>
14 </body>
15 </html>

View Code

1 var app=angular.module('myapp',[]);
2 app.controller('myController', function ($scope) {
3     $scope.fundaing={starting:0};
4     computerNeeded= function () {
5         $scope.fundaing.needed=$scope.fundaing.starting * 10;
6     };
7 
8     $scope.$watch('fundaing.starting',computerNeeded);
9 });

View Code

　其中最基本的一點就是$watch，就是你能夠調用$watch函數來監視一個表達式，當這個表達式發生變化時，就會調用這個函數。

　列表、表格以及其餘迭代型元素　

　 ng-repeat多是最有用的angular的指令了，它能夠根據集合中的元素一次建立多份拷貝。無論在什麼地方，只要想建立一組事物的列表，你就可使用這條指令。如：

 1 <!DOCTYPE html>
 2 <html ng-app="textApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World!</title>
 6     <script src="static/js/angular.js" type="text/javascript"></script>
 7     <script src="static/app/controller/controller.js" type="text/javascript"></script>
 8 </head>
 9 <body>
10 <div ng-controller="repeatController">
11     <li ng-repeat="item in items">
12         <a href="">{{item.name}}</a>
13         <span>{{item.age}}</span>
14     </li>
15 </div>
16 </body>
17 </html>

View Code

 1 !(function (){
 2     var app= angular.module('textApp',[]);
 3 
 4     app.controller('repeatController', function ($scope) {
 5             var items=[
 6                 {name:"張三",age:20},
 7                 {name:"李四",age:22},
 8                 {name:"王五",age:24}
 9             ];
10             $scope.items=items;
11     });
12 
13 }());

View Code

　隱藏和顯示

　ng-show、ng-hide這兩條指令的功能是等價的，可是運行效果正好相反，它們均可以經過你所傳遞的表達式來顯示和隱藏元素。

　css類和樣式　

　假若有的一段css樣式

　.menu-disabled-true{

　　　color:#ccc;

　}

　使用如下模版：

1 <div ng-controller="deathMenuController">
2     <ul>
3         <li class="menu-disabled-{{isDisabled}}">菜單</li>
4     </ul>
5 </div>

View Code

1 app.controller('deathMenuController', function ($scope) {
2         $scope.isDisabled=true;
3     });

View Code

效果以下:

可是這種方法一點也很差，雖然靈活性比較好，可是在大型項目中根本很差維護，進而沒法建立CSS。

正由於這個緣由，angular提供了ng-class和ng-style指令，表達式的結果，多是以下取值之一：

一、表示CSS類名的字符串，一空格分割

二、CSS類名數組

三、CSS類名到布爾值的映射

首先，咱們來想象一下，若是想在頁面的頭部獲得操做信息

.error{background-color:#f00;}.warning{background-color:yellow;}使用ng-class應該怎麼作？

代碼以下：

1 <div ng-controller="HeaderController">
2     <div ng-class="{error:isError,warning:isWarn}">{{messageText}}</div>
3     <button ng-click="showError()">Error</button>
4     <button ng-click="showWarn()">Warn</button>
5 </div>

View Code

 1    app.controller('HeaderController', function ($scope) {
 2         $scope.isError=false;
 3         $scope.isWarn=false;
 4         $scope.showError= function () {
 5             $scope.messageText="this is error";
 6             $scope.isError=true;
 7             $scope.isWarn=false;
 8         };  
 9         $scope.showWarn= function () {
10             $scope.messageText="this is warn";
11             $scope.isError=false;
12             $scope.isWarn=true;
13         };
14     });

View Code

咱們還能夠作一些更炫的事情：如表格列表把選中的行高亮顯示。

.selected{

　　background-color: #78FA89;

}

代碼以下：

<table ng-controller="TableController">
    <tr ng-repeat="item in items" ng-class="{selected:$index==selectrow}" ng-click="selected($index)">
        <td>{{item.name}}</td>
        <td>{{item.cuisine}}</td>
    </tr>
</table>

View Code

 1     app.controller('TableController', function ($scope) {
 2         var items=[
 3             {name:'Heifer',cuisine:'BBQ'},
 4             {name:'Green',cuisine:'Salads'},
 5             {name:'Fish',cuisine:'Seafood'}
 6         ];
 7 
 8         $scope.items=items;
 9         $scope.selected= function (row) {
10             $scope.selectrow=row;
11         };
12     });

View Code

效果所示：

反思src和href屬性

當在<img>或者<a>標籤上進行數據綁定時，在src或者href屬性上簡單的使用{{}}沒法很好的運行。因爲瀏覽器會使用並行的方式來加載圖片和其餘內容，全部angular沒有機會攔截到數據綁定請求。<img>最天然的用法是<img src="images/{{currentname}}"> 但其實，這裏應該使用ng-src指令：<img ng-src="images/{{currentname}}">,固然對於<a>標籤，應該使用ng-href指令：