Angularjs基礎知識及範例匯總_AngularJS

angularjs是google開發的一款高大上的前端mvc開發框架。

Angularjs官網：https://angularjs.org/ 官網有demo,訪問可能需要FQ

Angularjs中國社群：http://www.angularjs.cn/ 適合初學者

引用檔案：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

用angular注意

引用angularjs函式庫：https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... 可以在本節範例的github上下載
需要在你使用的區域加上ng-app="appName",或直接ng-app（全域）。
設定控制器 ng-controller="Ctrl"。
測試範例請注意以下幾點

需要在head之前引入angularjs程式碼,作者使用的是angular-1.0.1.min.js，請注意版本差異。
所有小範例都在以下區域運行，並記得在作用區域加上 ng-app。
下面透過一些小的案例來說明angularjs預設的常見的指令和用法。

hello world程式(雙資料綁定)

使用ng-model={{name}}來綁定資料

複製程式碼 程式碼如下:

name:

---

hello:{{name || 'liteng'}}

 http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html

事件綁定使用小案例

複製程式碼 程式碼如下:

  單價：
  數量:   
 

  總價：{{(price) * (quantity)}}
 

   

註:

涉及html5的input：http://www.w3school.com.cn/html5/att_input_type.asp

">http://www.w3school.com.cn/html5/att_input_type.asp">http://www.w3school.com.cn/html5/att_input_type .asp>
   

ng-init:設定初始值

 

 http://2.liteng.sinaapp.com/angularjsTest/event-bind.html

ng-init:可預設指定屬性值

複製程式碼 程式碼如下:

{{value}}

 http://2.liteng.sinaapp.com/angularjsTest/ng-init.html

ng-repeat:用於迭代資料類似js中的 i for info

複製程式碼 程式碼如下:

 

我有{{friends.length}} 朋友.他們是

 

   
• 
        [{{$index 1}}]:{{friend.name}}年齡為：{{friend.age}}
     

  

 http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html

ng-click:dom的點擊事件

複製程式碼 程式碼如下:

  {{a}}

<script> <br />     function ctrl($scope){<br />       $scope.a='hello';<br />       $scope.showMsg=function(){<br />         $scope.a='world';<br />       }<br />      }<br />   </script>

 http://2.liteng.sinaapp.com/angularjsTest/ng-click.html

ng-show:設定元素顯示

註：ng-show="!xx":在屬性值前面加！表示確定顯示,如果不加！表示不確定則不顯示

複製程式碼 程式碼如下:

  ng-show="!show"

  ng-show="show"

 http://2.liteng.sinaapp.com/angularjsTest/ng-show.html

ng-hide:設定元素隱藏

複製程式碼 程式碼如下:

  ng-hide="aaa"

  ng-show="!aaa"

 http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html

運用ng-show製作toggle效果

複製程式碼 程式碼如下:

toggle

  顯示logo
 

    http://liteng.org/sites/default/files/logo.png" alt="">
 

 http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html

ng-style:和預設style類似

這裡請注意書寫格式：字串需要用引號包含

複製程式碼 程式碼如下:

  box

 http://2.liteng.sinaapp.com/angularjsTest/ng-style.html

filter:過濾欄位

複製程式碼 程式碼如下:

{{9999|number}}

{{9999 1 |number:2}}

{{9*9|currency}}

{{'hello world' | uppercase}}

 http://2.liteng.sinaapp.com/angularjsTest/filter.html

ng-template:可以載入模板

複製程式碼 程式碼如下:

 tpl.html

複製程式碼 程式碼如下:

hello

 http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html

$http:一個類似ajax的方法很管用

複製程式碼 程式碼如下:

 

HTTP請求-方法1

   

       
• 
          {{x.Name}} {{x.Country}}
         

   

方法2

 

    

       
• 
              {{y.aid}} {{y.title}}
         

    

<script><br /> //方法1<br />       var TestCtrl=function($scope,$http){<br />          var p=$http({<br />             method:'GET',<br />             <a href="'json/date.json'">url:'json/date.json'<br />          });<br />          p.success(function(response,status,headers,config){<br />             $scope.names=response;<br />          });<br />          p.error(function(status){<br />             console.log(status);<br />          });<br />       }<br />       //方法2<br />       function TestCtrl2($scope,$http){<br />         $http.get('json/yiqi_article.json').success(function(response){<br />              $scope.info=response;<br />         });<br />       }<br /> </script>

 http://2.liteng.sinaapp.com/angularjsTest/ajax.html

以上所有的code:https://github.com/litengdesign/angularjsTest

實作的demo:http://2.liteng.sinaapp.com/angularjsTest/index.html

至於angularjs的路由（router）和指令（directive）下次本人將單獨拿出來講。