AngularJS语法详解

2024-09-26 19:26:28

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

用户请求应用起始页面
用户的浏览器向服务器发起一次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正则表达式上之基本语法(推荐)

相关阅读: js正则表达式基本语法(精粹) 正则表达式语法一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找文字主体时待匹配的一个或多个字符串.正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配. 定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数复制代码代码如下: var reg=new RegExp('<%[^%>]+%>','g')
Javascript 6里的4个新语法

JS 的 ES6版本已经被各大浏览器广泛支持,很多前端框架也已经使用 ES6,并且还有 Babel 可以做兼容处理,所以ES6已经进入了应用阶段如果您对 ES6 还不太熟悉,下面4个简单的基础用法可以帮助您快速了解ES6 1.使用 let 和 const 声明变量在传统的 ES5 代码中,变量的声明有两个主要问题 (1)缺少块儿作用域的支持 (2)不能声明常量 ES6中,这两个问题被解决了,增加了两个新的关键字:let 和 const 块儿作用域使用 let var a = 1; if (t
AngularJS语法详解（续）

src和href属性 Angularjs中src应写成ng-src,href应写成ng-href 例如: 复制代码代码如下: <img ng-src="/images/cats/{{favoriteCat}}"> <a ng-href="/shop/category={{number}}">Some text</a> 表达式在模板中可以进行简单的数学运算.比较运算.布尔运算.位运算.引用数组.和对象符号等尽管我们可以使用表达
javaScript语法总结

一:语法 JavaScript:一种基于对象和事件驱动得客户端脚本语言: 由下面三者组成: 1,ECMAScript(一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer Manufacturers Association,通过ECMA-262标准化的脚本程序设计语言); 2,Bom(browser object model的缩写,简称浏览器对象模型); 3,Dom(Document Object Model,文档对象模型,简称DOM),是W3C组织推荐的处理可扩展
js正则表达式基本语法(精粹)

1.正则表达式基本语法两个特殊的符号'^'和'$'.他们的作用是分别指出一个字符串的开始和结束. 例子如下: "^The":表示所有以"The"开始的字符串("There","The cat"等): "of despair$":表示所以以"of despair"结尾的字符串: "^abc$":表示开始和结尾都是"abc"的字符串--呵呵,只有&q
Javascript中级语法快速入手

1. 谈谈Javascript的对象 Javascript作为一种弱语言类型的语言,同时也是一种动态类型的语言.在使用Javascript的过程中,也常常需要用到Javascript的内置对象以及自定义的对象. 1.1 如何创建对象 Javascript是一种弱语言类型的语言,不必像Java.C#等高级语言那样必须通过构造函数的方法来创建对象,在Javascript中,主要有两种创建对象的方法,一种是直接通过new关键字定义,一种是通过函数来定义.如下: //第一种方式,直接通过new创建对象:
JavaScript基础语法之js表达式

本文将详细介绍javascript表达式,表达式分为原始表达式和复杂表达式.一般,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression). 原始表达式(primary exression) 原始表达式是表达式的最小单位--它不再包含其他表达式.javascript中的原始表达式包括this关键字.标识符引用.字面量引用.数组初始化.对象初始化和分组表达式 PrimaryExpres
NodeJs基本语法和类型

写在前面今天想要查下Node的类型什么的知识,想要总结下,在Googol上看到一个文章,但是原始的链接不在了,在快照中把这篇文章拉出来,如果原作者有问题,请联系我! 该文章都是一些JS的基础,高手自动跳过!我之前没怎么写过js,这方面比较弱,所以在写node的时候也遇到了麻烦,这里给自己补充下知识! 正文 Node.js 的基础是 JavaScript 这门脚本语言.而大多数的脚本语言一个共同的特点就是"弱类型". 不同于 PHP 的是,PHP 就是是有了新变量也无需申明,而 Ja
javascript基础语法——全面理解变量和标识符

关于javascript,第一个比较重要的概念是变量,变量的工作机制是javascript的基本特性.实际上,变量是标识符的一种.本文将详细介绍变量和标识符定义标识符(Identifier)就是一个名字,用来对变量.函数.属性.参数进行命名,或者用做某些循环语句中的跳转位置的标记 //变量 var Identifier = 123; //属性 (new Object).Identifier = 'test'; //函数及参数 function IdentifierName(Identifie
javascript基本语法

1.运算符运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运算符(+,-,*,/,++,--,%).比较运算符(>,<,<=,>=,==,===,!=,!==).逻辑运算符(||,&&,!).条件运算(?:).位移运算符(|,&,<<,>>,~,^)和字符串运算符(+). 可能很多人不知道"==="是什么.

AngularJS语法详解

相关推荐

随机推荐