angularjs 学习之 angularjs简介

全体介绍

概念 说明
模板(Template) 带有Angular扩展标记的HTML
指令(Directive) 用于通过自定义属性和元素扩展HTML的行为
模型(Model) 用于显示给用户并且与用户互动的数据
作用域(Scope) 用来存储模型(Model)语境(context)。模型放在这个语境中才能被控制器、指令和表达式等访问到
表达式(Expression) 模板中可以通过它来访问作用域(Scope)中的变量和函数
编译器(Compiler) 用来编译模板(Template),并且对其中包含的指令(Directive)表达式(Expression)进行实例化
过滤器(Filter) 负责格式化表达式(Expression)的值,以便呈现给用户
视图(View) 用户看到的内容(即DOM)
数据绑定(Data Binding) 自动同步模型(Model)中的数据视图(View)表现
控制器(Controller) 视图(View)背后的业务逻辑
依赖注入(Dependency Injection) 负责创建和自动装载对象或函数
注入器(Injector) 用来实现依赖注入(Injection)的容器
模块(Module) 用来配置注入器
服务(Service) 独立于视图(View)的、可复用的业务逻辑

简介

在读书 ionic 的中途碰到 angularjs
的有些命令什么的用法,不熟识所以还要回到查很麻烦,所以先来系统的学一次angularjs 好了。

什么是angularjs

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript
编写的库。Angular通过指令扩大HTML的语法。

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’对象。

Angular <script> 标签

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

  • 选择angular-[version].js诸如此类一个可读的本子,用来作为开发和调剂用
  • 选择angular-[version].min.js这么一个回落版本,用来作为产品宣布时用

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

举多少个例证吗

<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= </p>
</div>

相关文章