AngularJS语法详解


Posted in Javascript onJanuary 23, 2015

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

用户请求应用起始页面
用户的浏览器向服务器发起一次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>
Javascript 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
Javascript 面向对象 重载
May 13 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
Vue制作Todo List网页
Apr 26 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 #Javascript
angular中使用路由和$location切换视图
Jan 23 #Javascript
JavaScript中的类与实例实现方法
Jan 23 #Javascript
PHP中CURL的几个经典应用实例
Jan 23 #Javascript
Javascript闭包用法实例分析
Jan 23 #Javascript
JavaScript学习笔记之Function对象
Jan 22 #Javascript
JavaScript学习笔记之Cookie对象
Jan 22 #Javascript
You might like
PHP注释实例技巧
2008/10/03 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
vue初始化动画加载的实例
2018/09/01 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
python实现kNN算法
2017/12/20 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
简单实现python聊天程序
2018/04/01 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
求职自荐信怎么写
2014/03/06 职场文书
合作投资意向书
2014/04/01 职场文书
关于美容院的活动方案
2014/08/14 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
教师师德师风整改措施
2014/10/24 职场文书
南湾猴岛导游词
2015/02/09 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
python实现高效的遗传算法
2021/04/07 Python