angularjs 学习之 angularjs简介

2018-01-14 本文已影响32人邪人君子

简介

在学习 ionic 的路上遇到 angularjs 的一些指令什么的用法，不熟悉所以还要回来查很麻烦，所以先来系统的学一遍 angularjs 好了。

什么是angularjs

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

整体介绍

概念	说明
模板`(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)`的、可复用的业务逻辑

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中，试图解析未定义的属性时会抛出ReferenceError或TypeError错误.
禁止控制流语句： 表达式中不允许包括下列语句：条件判断(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>