AngularJS语法

来源：互联网发布：机票怎么订最便宜知乎编辑：程序博客网时间：2024/06/18 01:51

模板和数据的基本运作流程如下：

用户请求应用起始页面
用户的浏览器向服务器发起一次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>

0 0