对AngularJs的简单了解

时间 2019-11-26

标签 angularjs 简单了解栏目 AngularJS 繁體版

原文原文链接

1、简单介绍html

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展现设计的声明式语言，但要构建WEB应用的话它就显得乏力了。因此我作了一些工做（你也能够以为是小花招）来让浏览器作我想要的事。数组

一般，咱们是经过如下技术来解决静态网页技术在构建动态应用上的不足：

类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导做用的是你的代码，由你来决定什么时候使用类库。类库有：jQuery等

框架 - 框架是一种特殊的、已经实现了的WEB应用，你只须要对它填充具体的业务逻辑。这里框架是起主导做用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。

AngularJS使用了不一样的方法，它尝试去补足HTML自己在构建应用方面的缺陷。AngularJS经过使用咱们称为指令(directives)的结构，让浏览器可以识别新的语法。例如：

使用双大括号{{}}语法进行数据绑定；

使用DOM控制结构来实现迭代或者隐藏DOM片断；

支持表单和表单的验证；

能将逻辑代码关联到相关的DOM元素上；

能将HTML分组成可重用的组件。

2、AngularJs的核心

AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

3、AngularJs的理解

AngularJS 是一个 JavaScript 框架

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

AngularJS 是以一个 JavaScript 文件形式发布的，可经过 script 标签添加到网页中：app

AngularJS 扩展了 HTML

AngularJS 经过 ng-directives 扩展了 HTML。框架

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

ng-model 指令把元素值（好比输入域的值）绑定到应用程序。函数

ng-bind 指令把应用程序数据绑定到 HTML 视图。学习

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>

</body>
</html>

当网页加载完毕，AngularJS 自动开启。ui

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"全部者"。spa

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

若是您移除了ng-app指令，HTML将直接把表达式显示出来，不会去计算表达式的结果。

4、AngularJs的简单应用

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 能够克隆和重复 HTML 元素。
AngularJS 能够隐藏和显示 HTML 元素。
AngularJS 能够在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。

5、AngularJs指令

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

AngularJS 经过内置的指令来为应用添加功能。

AngularJS 容许你自定义指令。

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

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

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

ng-model 指令把元素值（好比输入域的值）绑定到应用程序。

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 指令也能够：

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

ng-repeat 指令

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

建立自定义的指令

除了 AngularJS 内置的指令外，咱们还能够建立自定义指令。

你可使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上须要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时须要以 - 分割, runoob-directive

5、AngularJs Scope(做用域)

Scope(做用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

Scope 概述

AngularJS 应用组成以下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，能够添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法能够在视图和控制器中使用。

7、AngularJS 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象。

AngularJS 控制器

AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 建立。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。

控制器的 $scope （至关于做用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器在做用域中建立了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。