首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

AngularJS语法详解

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
统一接口：为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
Three.JS实现三维场景
Dec 30 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
在js中修改html body的样式
Nov 11 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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
URL重定向(3) lnmp(1) 二级域名(1) Centos(8) lamp(1) 伪静态(1) 压力测试(1) 跨域(4) SSL(3) 443(1)
You might like
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
PHP反向代理类代码
2014/08/15 PHP
php header函数的常用http头设置
2015/06/25 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
php常用的工具开发整理
2019/09/26 PHP
js下将字符串当函数执行的方法
2011/07/13 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python实现随机漫步方法和原理
2019/06/10 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
巴西最大的家具及装饰用品店：Mobly
2017/10/11 全球购物
狗狗玩具、零食和咀嚼物的月度送货服务：Super Chewer
2018/08/22 全球购物
结构和类有什么异同
2012/07/16 面试题
编写一个 C 函数，该函数在一个字符串中找到可能的最长的子字符串，且该字符串是由同一字符组成的
2015/07/23 面试题
《九寨沟》教学反思
2014/04/08 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
道德模范事迹材料
2014/12/20 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
论文致谢词范文
2015/05/14 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python