快捷導(dǎo)航

AngularJS語(yǔ)法詳解

更新時(shí)間：2015年01月23日 10:01:02 投稿：hebedich

本文通過(guò)示例向大家介紹了AngularJS語(yǔ)法的使用，小伙伴們認(rèn)真研讀下吧，非常的實(shí)用哦。

模板和數(shù)據(jù)的基本運(yùn)作流程如下：

用戶請(qǐng)求應(yīng)用起始頁(yè)面
用戶的瀏覽器向服務(wù)器發(fā)起一次http連接，然后加載index.html頁(yè)面，這個(gè)頁(yè)面包含了模板
angular被加載到頁(yè)面中，等待頁(yè)面加載完成，查找ng-app指令，用來(lái)定義模板的邊界
angular遍歷模板，查找指定和綁定關(guān)系，將觸發(fā)一些列動(dòng)作：注冊(cè)監(jiān)聽(tīng)器、執(zhí)行一些DOM操作、從服務(wù)器獲取初始化數(shù)據(jù)。最后，應(yīng)用將會(huì)啟動(dòng)起來(lái)，并將模板轉(zhuǎn)換成DOM視圖
連接到服務(wù)器去加載需要展示給用戶的其他數(shù)據(jù)

顯示文本

一種使用{{}}形式，如{{greeting}} 第二種ng-bind="greeting"

使用第一種，未被渲染的頁(yè)面可能會(huì)被用戶看到，index頁(yè)面建議使用第二種，其余的頁(yè)面可以使用第一種

表單輸入

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

<html ng-app>

<head>

    <title>表單</title>

    <script type="text/javascript" src="angular.min.js"></script>

    <script type="text/javascript">

    function StartUpController($scope) {

        $scope.funding = {startingEstimate:0};

        computeNeeded = function() {

            $scope.funding.needed = $scope.funding.startingEstimate * 10;

        };

        $scope.$watch('funding.startingEstimate',computeNeeded); //watch model的變化

    }

    </script>

</head>

<body>

    <form ng-controller="StartUpController">

        Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate">  //change的時(shí)候調(diào)用函數(shù)

        Recommendation: {{funding.needed}}

    </form>

</body>

</html>

在某些情況下，我們不想一有變化就立刻做出動(dòng)作，而是要進(jìn)行等待。例如：

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

<html ng-app>

<head>

    <title>表單</title>

    <script type="text/javascript" src="angular.min.js"></script>

    <script type="text/javascript">

    function StartUpController($scope) {

        $scope.funding = {startingEstimate:0};

        computeNeeded = function() {

            $scope.funding.needed = $scope.funding.startingEstimate * 10;

        };

        $scope.$watch('funding.startingEstimate',computeNeeded);//watch監(jiān)視一個(gè)表達(dá)式，當(dāng)這個(gè)表達(dá)式發(fā)生變化時(shí)就會(huì)調(diào)用一個(gè)回調(diào)函數(shù)

        $scope.requestFunding = function() {

            window.alert("Sorry,please get more customers first.")

        };

    }

    </script>

</head>

<body>

    <form ng-submit="requestFunding()" ng-controller="StartUpController">  //ng-submit

        Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate">

        Recommendation: {{funding.needed}}

        <button>Fund my startup!</button>

    </form>

</body>

</html>

非表單提交型的交互，以click為例

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

<html ng-app>

<head>

    <title>表單</title>

    <script type="text/javascript" src="angular.min.js"></script>

    <script type="text/javascript">

    function StartUpController($scope) {

        $scope.funding = {startingEstimate:0};

        computeNeeded = function() {

            $scope.funding.needed = $scope.funding.startingEstimate * 10;

        };

        $scope.$watch('funding.startingEstimate',computeNeeded);

        $scope.requestFunding = function() {

            window.alert("Sorry,please get more customers first.")

        };

        $scope.reset = function() {

            $scope.funding.startingEstimate = 0;

        };

    }

    </script>

</head>

<body>

    <form ng-controller="StartUpController">

        Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate">

        Recommendation: {{funding.needed}}

        <button ng-click="requestFunding()">Fund my startup!</button>

        <button ng-click="reset()">Reset</button>

    </form>

</body>

</html>

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

ng-repeat會(huì)通過(guò)$index返回當(dāng)前引用的元素序號(hào)。示例代碼如下：

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

<html ng-app>
<head>
    <title>表單</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript">
    var students = [{name:'Mary',score:10},{name:'Jerry',score:20},{name:'Jack',score:30}]
    function StudentListController($scope) {
        $scope.students = students;

    }
    </script>
</head>
<body>
    <table ng-controller="StudentListController">
        <tr ng-repeat='student in students'>
            <td>{{$index+1}}</td>
            <td>{{student.name}}</td>
            <td>{{student.score}}</td>
        </tr>
    </table>
</body>
</html>

隱藏與顯示
ng-show和ng-hide功能是等價(jià)的，但是運(yùn)行效果正好相反。

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

<html ng-app>

<head>

<script type="text/javascript" src="angular.min.js"></script>

<script>

  function DeathrayMenuController($scope) {

    $scope.menuState = {show:false };//這里換成menuState.show = false 效果就顯示不出來(lái)了。以后聲明變量還是放在{}里面吧

    $scope.toggleMenu = function() {

      $scope.menuState.show = !$scope.menuState.show;

    };

  }

</script>

</head>

<body>

<div ng-controller='DeathrayMenuController'>

  <button ng-click='toggleMenu()'>Toggle Menu</button>

  <ul ng-show='menuState.show'>

    <li ng-click='stun()'>Stun</li>

    <li ng-click='disintegrate()'>Disintegrate</li>

    <li ng-click='erase()'>Erase from history</li>

  </ul>

</div>   

</body>

</html>

css類(lèi)和樣式

ng-class和ng-style都可以接受一個(gè)表達(dá)式，表達(dá)式執(zhí)行的結(jié)果可能是如下取值之一：

表示css類(lèi)名的字符串，以空格分隔
css類(lèi)名數(shù)組
css類(lèi)名到布爾值的映射
代碼示例如下：

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

<html ng-app>
<head>
<style type="text/css">
    .error {
        background-color: red;
    }
    .warning {
        background-color: yellow;
    }
</style>
<script type="text/javascript" src="angular.min.js"></script>
<script>
function HeaderController($scope) {
    $scope.isError = false;
    $scope.isWarning = false;

    $scope.showError = function() {
        $scope.messageText = "Error!!!!"
        $scope.isError = true;
        $scope.isWarning = false;
    }

    $scope.showWarning = function() {
        $scope.messageText = "Warning!!!"
        $scope.isWarning = true;
        $scope.isError = true;
    }
}
</script>
</head>
<body>
<div ng-controller="HeaderController">
<div ng-class="{error:isError,warning:isWarning}">{{messageText}}</div>
    <button ng-click="showError()">Error</button>
    <button ng-click="showWarning()">Warning</button>
</div>
</body>
</html>

css類(lèi)名到布爾值的映射
示例代碼如下：

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

<html ng-app>
<head>
<style type="text/css">
    .selected {
        background-color: lightgreen;
    }
</style>
<script type="text/javascript" src="angular.min.js"></script>
<script>
    function Restaurant($scope) {
        $scope.list = [{name:"The Handsome",cuisine:"BBQ"},{name:"Green",cuisine:"Salads"},{name:"House",cuisine:'Seafood'}];

        $scope.selectRestaurant = function(row) {
            $scope.selectedRow = row;
        }
    }
</script>
</head>
<body>
<table ng-controller="Restaurant">
    <tr ng-repeat='restaurant in list' ng-click='selectRestaurant($index)' ng-class='{selected: $index==selectedRow}'> //css類(lèi)名到布爾值的映射,當(dāng)模型屬性selectedRow的值等于ng-repeat中得$index時(shí)，selectd樣式就會(huì)被設(shè)置到那一行
        <td>{{restaurant.name}}</td>
        <td>{{restaurant.cuisine}}</td>
    </tr>
</table>
</body>
</html>