[聚合文章] angularjs 学习之 angularjs简介

JavaScript 1900-01-01 25 阅读

Angular <script> 标签

在HTML页面底部放置 script 标签。这样可以优化应用的加载时间,因为避免了HTML加载时被 angular.js 脚步的加载阻滞。

  • 选择angular-[version].js这样一个可读的版本,用来作为开发和调试用
  • 选择angular-[version].min.js这样一个压缩版本,用来作为产品发布时用

一般会像这样<html ng-app="test">把 ng-app 放在应用的根节点中,是因为这样应用就可以自动启动 angular 了。

AngularJS 表达式(Expressions)

AngularJS 表达式写在双大括号内:{{ expression }}。
可能会有人认为Angular视图表达式就是JavaScript表达式,但这不完全正确,因为Angular并没有使用JavaScript中的'eval()'来解析表达式。你可以认为Angular表达式与JavaScript表达式有如下的区别:

  • 属性解析: 所有的属性的解析都是相对于作用域(scope)的,而不像JavaScript中的表达式解析那样是相对于全局'window'对象的。
  • 容错性: 表达式的解析对'undefined'和'null'具有容错性,这不像在JavaScript中,试图解析未定义的属性时会抛出ReferenceErrorTypeError错误.
  • 禁止控制流语句: 表达式中不允许包括下列语句:条件判断(if),循环(for/while),抛出异常(throw)。

另一方面,如果你想执行特定的JavaScript代码,你应该在一个控制器里导出一个方法,然后在模板中调用这个方法。如果你想在JavaScript中解析一个Angular表达式,使用$eval()方法。Angular表达式必须使用$window来指向全局的'window'对象。

举几个例子吧

<div ng-app><p>我的第一个表达式: {{ 5 + 5 }}</p></div>

输出结果:我的第一个表达式: 10

<div ng-app="" ng-init="a=1;b=5"><p>c={{ a * b }}</p></div>

输出结果:c=5

<div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名: {{ firstName + " " + lastName }}</p></div>

输出结果:姓名: John Doe

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓名 {{ person.lastName }}</p></div>

输出结果:姓名 Doe

<div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三个值为 {{ points[2] }}</p></div>

输出结果:第三个值为 19

以上的代码,稍作改动,都可以变为ng-bind的写法,举其中一个例子

<div ng-app=""  ng-init="a=1;b=5"><p>c= <span ng-bind="a * b"></span></p></div>
                

注:本文内容来自互联网,旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜,请你联系站长进行处理。