AngularJs初识

一、什么是 AngularJS?

AngularJS 使得开发现代底单一页面应用程序(SPAs:Single Page
Applications)变得更其容易。

  • AngularJS 将应用程序数据绑定到 HTML 元素。
  • AngularJS 可以仿造和还 HTML 元素。
  • AngularJS 可以隐藏和彰显 HTML 元素。
  • AngularJS 可以以 HTML 元素”背后”添加代码。
  • AngularJS 匡助输入验证。

AngularJS 是一个 JavaScript 框架。它而由此 <script>
标签上加至 HTML 页面。

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

AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个盖 JavaScript 编写的堆栈。

AngularJS 是坐一个 JavaScript 文件格局宣布的,可由此 script
标签添加到网页遭到:

逐条 angular.js
版本下载: https://github.com/angular/angular.js/releases

二、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"&gt;

</script> 

</head> 

<body> 

<div ng-app=””> 

<p>名字
: <input type=”text” ng-model=”name”></p>

 <h1>Hello {{name}}</h1> 

</div> 

</body> 

</html>

 

实例讲解:

当网页加载了,AngularJS
自动开启。

ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的”所有者”。

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

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

三、AngularJS 指令

正巧使您所见到的,AngularJS
指令是为 ng 作为前缀的 HTML 属性。

ng-init 指令开首化 AngularJS 应用程序变量。

AngularJS 实例

<div ng-app=”” ng-init=”firstName=’John'”> 

<p>姓名为

<span ng-bind=”firstName”>

</span>

</p> 

</div>

 

HTML5 允许扩展的(自制的)属性,以 data- 开头。
AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

寓有效之 HTML5:

AngularJS 实例

<div data-ng-app=”” data-ng-init=”firstName=’John'”> 

<p>姓名为

<span data-ng-bind=”firstName”>

</span>

</p> 

</div>

 

四、AngularJS 表达式

AngularJS 表明式写于对大括号内:{{ expression }}

AngularJS 表明式把数量绑定到 HTML,那和 ng-bind 指令发出异曲同工之美。

AngularJS 将以表明式书写的职务”输出”数据。

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

实例 {{ 5 + 5 }} 或 {{
firstName + ” ” + lastName }}

 

<!DOCTYPE html>

 <html> 

<head> 

<meta charset=”utf-8″> 

<script src=”http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"&gt;

</script>

 </head> 

<body> 

<div ng-app=””> <p>我的第一个表达式:
{{ 5 + 5 }}</p> 

</div> 

</body> 

</html>

 

五、AngularJS 应用

AngularJS 模块(Module) 定义了 AngularJS
应用。

AngularJS 控制器(Controller) 用于决定
AngularJS 应用。

ng-app命令定义了以, ng-controller 定义了控制器。

AngularJS 实例

<div ng-app=”myApp” ng-controller=”myCtrl”> 

名:
<input type=”text” ng-model=”firstName”><br> 

姓:
<input type=”text” ng-model=”lastName”><br> <br> 

姓名:
{{firstName + ” ” + lastName}}

</div> 

<script> 

var app = angular.module(‘myApp’, []); app.controller(‘myCtrl’,
function($scope) { $scope.firstName= “John”; $scope.lastName= “Doe”; });

 </script>

 

相关文章