AngularJs 基础教程 —— 简介(10)

本文为H5EDU机构官方HTML5培训教程,主要介绍:AngularJs基础教程——简介(10)

AngularJS简介

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

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

AngularJS是一个JavaScript框架

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

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

<scriptsrc="http://cdn.static.runoob.com/l...gt%3B

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

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

各个angular.js版本下载:https://github.com/angular/angular.js/releases

AngularJS扩展了HTML

AngularJS通过ng-directives扩展了HTML。

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

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

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

AngularJS实例

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<scriptsrc="http://cdn.static.runoob.com/l...gt%3B

</head>

<body>

<divng-app="">

<p>名字:<inputtype="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。

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

什么是AngularJS?

AngularJS使得开发现代的单一页面应用程序(SPAs:SinglePageApplications)变得更加容易。

AngularJS把应用程序数据绑定到HTML元素。

AngularJS可以克隆和重复HTML元素。

AngularJS可以隐藏和显示HTML元素。

AngularJS可以在HTML元素"背后"添加代码。

AngularJS支持输入验证。

AngularJS指令

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

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

AngularJS实例

<divng-app=""ng-init="firstName='John'">

<p>姓名为<spanng-bind="firstName"></span></p>

</div>

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

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

带有有效的HTML5:

AngularJS实例

<divdata-ng-app=""data-ng-init="firstName='John'">

<p>姓名为<spandata-ng-bind="firstName"></span></p>

</div>

AngularJS表达式

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

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

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

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

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

AngularJS实例

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<scriptsrc="http://cdn.static.runoob.com/l...gt%3B

</head>

<body>

<divng-app="">

<p>我的第一个表达式:{{5+5}}</p>

</div>

</body>

</html>

AngularJS应用

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

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

ng-app指令定义了应用,ng-controller定义了控制器。

AngularJS实例

<divng-app="myApp"ng-controller="myCtrl">

名:<inputtype="text"ng-model="firstName"><br>

姓:<inputtype="text"ng-model="lastName"><br>

<br>

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

</div>

<script>

varapp=angular.module('myApp',[]);

app.controller('myCtrl',function($scope){

$scope.firstname="John";

$scope.lastname="Doe";

});

</script>

AngularJS模块定义应用:

AngularJS模块

varapp=angular.module('myApp',[]);

AngularJS控制器控制应用:

AngularJS控制器

app.controller('myCtrl',function($scope){

$scope.firstname="John";

$scope.lastname="Doe";

});

相关推荐