AngularJS简介

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS简介相关的知识,希望对你有一定的参考价值。

AngularJS 扩展了 html 

AngularJS 通过 ng-directives 扩展了 HTML

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

ng-bind 指令

把应用程序数据绑定到 HTML 视图。

横跨所有平台

学会用Angular构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。

速度与性能

通过Web Worker和服务端渲染,达到在如今(以及未来)的Web平台上所能达到的最高速度。

Angular让你有效掌控可伸缩性。基于RxJSImmutable.js和其它推送模型,能适应海量数据需求。

美妙的工具

使用简单的声明式模板,快速实现各种特性。使用自定义组件和大量现有组件,扩展模板语言。在几乎所有的IDE中获得针对Angular的即时帮助和反馈。所有这一切,都是为了帮助你编写漂亮的应用,而不是绞尽脑汁的让代码“能用”。

 

AngularJS 是一个 javascript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

Note :我们建议把脚本放在 <body> 元素的底部。

这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

什么是 AngularJS

  1. "AngularJS 是专门为应用程序设计的 HTML"
  2. AngularJS 使得开发现代的单一页面应用程序(SPAsSingle Page Applications)变得更加容易。
  3. AngularJS 把应用程序数据绑定到 HTML 元素。
  4. AngularJS 可以克隆和重复 HTML 元素。
  5. AngularJS 可以隐藏和显示 HTML 元素。
  6. AngularJS 可以在 HTML 元素"背后"添加代码。
  7. AngularJS 支持输入验证。

 

AngularJS 指令

 

正如您所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。

HTML5 允许扩展的(自制的)属性,以 data- 开头。

AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

AngularJS 表达式

 

AngularJS 表达式写在双大括号内:{{ expression }}

AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} {{ firstName + " " + lastName }}

使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

AngularJS 对象

AngularJS 对象就像 JavaScript 对象:

AngularJS 实例

《表达式方式访问:》

<div ng-app="" ng-init="person={firstName:‘John‘,lastName:‘Doe‘}">

<p>姓为 {{ person.lastName }}</p>

 

</div>

ng-bind方式访问

<div ng-app="" ng-init="person={firstName:‘John‘,lastName:‘Doe‘}">

<p>姓为 <span ng-bind="person.lastName"></span></p>

</div>

AngularJS 指令

 

AngularJS 通过被称为 指令 的新属性来扩展 HTML

 

AngularJS 指令

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

 AngularJS 完美支持数据库的 CRUD(增加Create、读取Read、更新Update、删除Delete)应用程序。
把实例中的对象想象成数据库中的记录。

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的 根元素

ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。

稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块。

 

ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了 初始值

通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。

稍后您将学习更多有关控制器和模块的知识。

 

ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以:

  • 为应用程序数据提供类型验证(numberemailrequired)。
  • 为应用程序数据提供状态(invaliddirtytouchederror)。
  • HTML 元素提供 CSS 类。
  • 绑定 HTML 元素到 HTML 表单。

ng-repeat 指令

ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素

 






以上是关于AngularJS简介的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 简介

AngularJS 1.x系列:AngularJS简介及第一个应用

AngularJs——简介,表达式,指令

AngularJS简介

AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

angularjs基本简介