腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Angularjs基礎(chǔ)知識及示例匯總

更新時間：2015年01月22日 09:52:35 投稿：hebedich

本文給大家總結(jié)了一些angularjs的基礎(chǔ)知識及相關(guān)示例，分享給大家，希望能對大家有所幫助。

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

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

Angularjs中國社區(qū)：http://www.angularjs.cn/ 適合初學(xué)者

引用文件：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.... 可以在本節(jié)示例的github上下載
需要在你使用的區(qū)域加上ng-app="appName",或者直接ng-app（全局）。
設(shè)置控制器 ng-controller="Ctrl"。
測試一下示例請注意以下幾點

需要在head之前引入angularjs代碼,作者使用的是angular-1.0.1.min.js，請注意版本區(qū)別。
所有小示例都是在以下區(qū)域運行，記得在作用區(qū)域加上 ng-app。
下面通過一些小的案例來說明angularjs默認(rèn)的常見的指令和用法。

hello world程序(雙數(shù)據(jù)綁定)

使用ng-model={{name}}來綁定數(shù)據(jù)

復(fù)制代碼代碼如下:

<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

事件綁定使用小案例

復(fù)制代碼代碼如下:

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

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

ng-init:可默認(rèn)指定屬性值

復(fù)制代碼代碼如下:

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

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

ng-repeat:用于迭代數(shù)據(jù)類似于js中的 i for info

復(fù)制代碼代碼如下:

<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的點擊事件

復(fù)制代碼代碼如下:

<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:設(shè)置元素顯示

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

復(fù)制代碼代碼如下:

<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:設(shè)置元素隱藏

復(fù)制代碼代碼如下:

<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效果

復(fù)制代碼代碼如下:

<h2>toggle</h2>
<a href ng-click="showLog=!showLog">顯示logo</a>
<div ng-show="showLog">
<img ng-src=" </div>

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

ng-style:和默認(rèn)style類似

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

復(fù)制代碼代碼如下:

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

  box

</div>

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

filter:過濾字段

復(fù)制代碼代碼如下:

<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:可以加載模板

復(fù)制代碼代碼如下:

tpl.html

復(fù)制代碼代碼如下:

<h1>hello</h1>

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

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

復(fù)制代碼代碼如下:

<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

實現(xiàn)的demo:http://2.liteng.sinaapp.com/angularjsTest/index.html

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

您可能感興趣的文章: