angularjs学习的angularjs介绍

简介

当读书 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中,试图解析不定义之性时见面抛出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= </p>
</div>

相关文章