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注意

1. 引用angularjs庫：https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... 可以在本節樣本的github上下載
2. 需要在你使用的地區加上ng-app="appName",或者直接ng-app（全域）。
3. 設定控制器 ng-controller="Ctrl"。

測試一下樣本請注意以下幾點

1. 需要在head之前引入angularjs代碼,作者使用的是angular-1.0.1.min.js，請注意版本區別。
2. 所有小樣本都是在以下地區運行，記得在作用地區加上 ng-app。

下面通過一些小的案例來說明angularjs預設的常見的指令和用法。

hello world程式(雙資料繫結)

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

<label for="name">name:</label><input type="text" ng-model="name" id="name"/><hr>hello:{{name || ‘liteng‘}}

 

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

事件綁定使用小案例

<div>  單價：<input type="number" min=0 ng-model="price" ng-init="price=299">  數量: <input type="number" min=0 ng-model="quantity" ng-init="quantity=1">  <br>  總價：{{(price) * (quantity)}}  <dt>    <dl>注:</dl>    <dd>涉及html5的input：<a href="http://www.w3school.com.cn/html5/att_input_type.asp">http://www.w3school.com.cn/html5/att_input_type.asp</a></dd>    <dd>ng-init:設定初始值</dd>  </dt></div>

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

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

<p ng-init="value=‘hello world‘">{{value}}</p>

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

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

<div ng-init="friends=[{name:‘Jhon‘,age:25},{name:‘Mary‘,age:28}]"></div>  <p>我有{{friends.length}} 朋友.他們是</p>  <ul>    <li ng-repeat="friend in friends">      [{{$index+1}}]:{{friend.name}}年齡為：{{friend.age}}    </li>   </ul>

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

ng-click:dom的點擊事件

<div ng-controller="ctrl">  <button ng-dblclick=‘showMsg()‘>{{a}}</button></div><script>    function ctrl($scope){      $scope.a=‘hello‘;      $scope.showMsg=function(){        $scope.a=‘world‘;      }     }  </script>

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

ng-show:設定元素顯示

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

<div ng-show="!show">  ng-show="!show"</div><div ng-show="show">  ng-show="show"</div>

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

ng-hide:設定元素隱藏

<div ng-hide="aaa">  ng-hide="aaa"</div><div ng-hide="!aaa">  ng-show="!aaa"</div>

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

運用ng-show製作toggle效果

<h2>toggle</h2>  <a href ng-click="showLog=!showLog">顯示logo</a>  <div ng-show="showLog">    <img ng-src="http://liteng.org/sites/default/files/logo.png" >  </div>

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

ng-style:和預設style類似

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

<div ng-style="{width:100+‘px‘,height:200+‘px‘,backgroundColor:‘red‘}">  box</div>

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

filter:過濾欄位

<div>{{9999|number}}</div> <!--9,999--><div>{{9999+1 |number:2}}</div><!--10,000.00--><div>{{9*9|currency}}</div><!--$81.00--><div>{{‘hello world‘ | uppercase}}</div><!--HELLO WORLD-->

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

ng-template:可以載入模板

<div ng-include="‘tpl.html‘"></div>

 tpl.html

<h1>hello</h1>

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

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

<div class="container" ng-controller="TestCtrl">  <h2>HTTP請求-方法1</h2>    <ul>    <li ng-repeat="x in names">    {{x.Name}}+{{x.Country}}    </li>    </ul>   </div><h2>方法2</h2>  <div ng-controller="TestCtrl2">     <ul>    <li ng-repeat="y in info">    {{y.aid}}+{{y.title}}    </li>     </ul></div><script>//方法1      var TestCtrl=function($scope,$http){         var p=$http({         method:‘GET‘,         url:‘json/date.json‘         });         p.success(function(response,status,headers,config){            $scope.names=response;         });         p.error(function(status){            console.log(status);         });      }        //方法2      function TestCtrl2($scope,$http){      $http.get(‘json/yiqi_article.json‘).success(function(response){             $scope.info=response;      });      }</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）下次本人將單獨拿出來講。

本人來源：www.liteng.org如需轉載請註明出處。否則將追究法律責任

著作權歸作者和部落格園所有，請友情轉載。

Angularjs基礎知識各個擊破