注册登录

【AngularJS】AngularJS语法详解-语法

时间:2016-02-17 22:09 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【AngularJS语法详解】，下面是详细的讲解！

AngularJS语法详解

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

用户请求应用起始页面
用户的浏览器向服务器发起一次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="http://www.jb51.net/article/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="http://www.jb51.net/article/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="http://www.jb51.net/article/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="http://www.jb51.net/article/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="http://www.jb51.net/article/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="http://www.jb51.net/article/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="http://www.jb51.net/article/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>

关于AngularJS语法详解的用户互动如下：

　　相关问题：angularjs 可以从ng-repeat中循环出五条数据吗

　　答：循环输出列表很多项目在web服务端做，前端做好模版后后端写jsp代码，双方需要紧密合作，分清责任。有些项目由后端提供restful方法，前端用ajax调用自己循环，这种一般是大把的jquery拼字符串，太不直观，有人搞出了js模板，也没好到哪里去。用A... >>详细

　　相关问题：angularjs directive scope 怎么理解

　　答：今天我们要说的重点是 scope 字段。常规用法设置 scope: { name: '=', age: '=', sex: '@', say: '&' } 假设我们的hml代码如下对应的controller部分代码 function Controller($scope) { $scope.name = 'Pajjket'; $scope.age = 99; $scope.sex... >>详细

　　相关问题：AngularJS 为什么成功了

　　答：因为时间的问题，成功是不可缺少的~~~也许你给的时间就可以了~~~ >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

【AngularJS】AngularJS语法详解-语法

AngularJS语法详解

关于AngularJS语法详解的用户互动如下：

第一章 JavaScript （基础）

第二章 JavaScript（高级）