Angularjs基礎知識及範例匯總_AngularJS

WBOY

發布： 2016-05-16 16:18:27

原創

1094 人瀏覽過

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

ng-init:設定初始值

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

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

複製程式碼程式碼如下:

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

複製程式碼程式碼如下:

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>