DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> AngularJS語法詳解
AngularJS語法詳解
編輯:關於JavaScript     

模板和數據的基本運作流程如下:

用戶請求應用起始頁面
用戶的浏覽器向服務器發起一次http連接,然後加載index.html頁面,這個頁面包含了模板
angular被加載到頁面中,等待頁面加載完成,查找ng-app指令,用來定義模板的邊界
angular遍歷模板,查找指定和綁定關系,將觸發一些列動作:注冊監聽器、執行一些DOM操作、從服務器獲取初始化數據。最後,應用將會啟動起來,並將模板轉換成DOM視圖
連接到服務器去加載需要展示給用戶的其他數據

顯示文本

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

使用第一種,未被渲染的頁面可能會被用戶看到,index頁面建議使用第二種,其余的頁面可以使用第一種

表單輸入

代碼如下:
<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的時候調用函數
        Recommendation: {{funding.needed}}
    </form>
</body>
</html>

在某些情況下,我們不想一有變化就立刻做出動作,而是要進行等待。例如:

代碼如下:
<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監視一個表達式,當這個表達式發生變化時就會調用一個回調函數
        $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為例

代碼如下:
<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會通過$index返回當前引用的元素序號。 示例代碼如下:

代碼如下:
<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功能是等價的,但是運行效果正好相反。

代碼如下:
<html ng-app>
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script>
  function DeathrayMenuController($scope) {
    $scope.menuState = {show:false };//這裡換成menuState.show = false 效果就顯示不出來了。以後聲明變量還是放在{}裡面吧
    $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類和樣式

ng-class和ng-style都可以接受一個表達式,表達式執行的結果可能是如下取值之一:

表示css類名的字符串,以空格分隔
css類名數組
css類名到布爾值的映射
代碼示例如下:

代碼如下:
<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類名到布爾值的映射
示例代碼如下:

代碼如下:
<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類名到布爾值的映射,當模型屬性selectedRow的值等於ng-repeat中得$index時,selectd樣式就會被設置到那一行
        <td>{{restaurant.name}}</td>
        <td>{{restaurant.cuisine}}</td>
    </tr>
</table>
</body>
</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved