什么是angular

来源：互联网发布：黑客盗号软件2016 编辑：程序博客网时间：2024/06/07 07:12

什么是 Angularjs

AngularJS 最初由 Misko Hevery 和 Adam Abrons 于 2009 年开发，后来成为了Google 公司的项目。AngularJS弥补了 HTML 在构建应用方面的不足，其通过使用标识符（directives）结构，来扩展 Web 应用中的 HTML 词汇，使开发者可以使用 HTML 来声明动态内容，从而使得 Web 开发和测试工作变得更加容易。

AngularJS 功能：

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

Angularjs 号称下一代 web 应用主要特性

1.MVC
2.模块化与依赖注入
3.双向数据绑定
4.指令与 UI 控件

为了使用 Angular，所有应用都必须首先做两件事情

1. 下载加载 angular.js 库
2. 使用 ng-app 指令告诉 angular 应该管理 DOM 中的哪一些部分

Angularjs 中常用名词也就是所说的常用指令
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效

俗话说下面的指令可以在开头加上 data- 例如 ng_app 等同于 data _ng_app

1. ng_app ng_bind ng_model {{}}案例演示
ng_app：
ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。
ng-model 指令：
ng-model 指令绑定 HTML 元素到应用程序数据。
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
ng_bind 指令等同于{{}}
绑定 HTML 元素到应用程序数据。

<!DOCTYPE html><html><body><div ng-app=""><p>在输入框中尝试输入：</p><p>姓名：<input type="text" ng-model="name"></p><p ng-bind="name"></p></div><script src="angular.min.js"></script></body></html>

ng-bind == {{}}

<!DOCTYPE html><html><body><div ng-app=""><p>在输入框中尝试输入：</p><p>姓名：<input type="text" ng-model="name"></p><p>{{name}}</p></div><script src="angular.min.js"></script><pre name="code" class="html"><div data-ng-app="" data-ng-init="firstName='John'"><p>姓名为 <span data-ng-bind="firstName"></span></p></div>

</body></html>

实例讲解：当网页加载完毕，AngularJS 自动开启。ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。ng-model 指令把输入域的值绑定到应用程序变量 name。ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

2. ng_initng-init 指令ng-init 指令为 AngularJS 应用程序定义了初始值。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

<div ng-app="" ng-init="firstName='John'"><p>姓名为 <span ng-bind="firstName"></span></p></div>

3.data-指令 data-ng-init 与 ng-init 等价

<span style="font-size:10px;"><div data-ng-app="" data-ng-init="firstName='John'"><p>姓名为 <span data-ng-bind="firstName"></span></p></div></span>

0 0