Code Copied

AngualarJS教程02 - Hello World

1. 初识AngularJS指令

AngularJS指令简介

指令(directives)是AngularJS应用最重要的组成成分。指令是在DOM元素上做的标记,并同时附加了一些特定的行为。
我们可以将指令理解为HTML的扩展属性,当一个应用使用AngularJS时,HTML元素将可以使用很多扩展属性,例如:ngApp, ngModel, ngRepeat。

在AngularJS中指令的名称和其在HTML的表现是不一样的。指令的名称使用驼峰命名(Camel-Case);指令对应的HTML标记,采用单词小写字母和”-“分隔
例如:名称为ngApp的指令,在HTML中标记时使用ng-app。

markup(标记)和directive(指令)之间是link(链接)关系,即当ng-标记作用在HTML元素上时,AngularJS最终会将其链接到一个与之对应的directive(指令),directive(指令)则包含了特定的行为。

ngApp指令和ngModel指令

ngApp指令

ngApp指令用于定义AngularJS应用的根元素,并自动启动该AngularJS应用。通常ngApp指令定义在页面的根元素中,例如<html>或<body>元素。

用法:<html ng-app>

ngModel指令

ngModel指令可以将应用程序数据绑定到HTML元素,例如input, select元素。

用法:<input type="text" ng-model="yourName" />

2. Hello World示例

以上简单介绍了AngularJS的两个指令,现在我们创建一个基于AngularJS的Hello World应用,并使用这两个指令。

创建项目

虽然Visual Studio号称宇宙最强开发工具,但前端开发不必要使用这么庞大的工具,作者使用了国人自建的HBuilder开发工具。
根据个人的喜好,读者们也可以选择诸如WebStorm, Sublime Text2等开发工具。

image

引用AngularJS

在项目文件夹下,右键��行Git Bash Here打开命令工具。

image

输入命令bower install angularjs将AngularJS下载到项目中

image

下载完成后,项目文件夹下会多出一个bower_components文件夹。

image

将angularjs.js引入index.html页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="bower_components/angular/angular.js"></script>
	</head>
	<body>
		
	</body>
</html>

编写HelloWorld示例

<!DOCTYPE html>
<html ng-app>
	<head>
		<meta charset="utf-8" />
		<title>Hello, AngularJS</title>
		<style type="text/css">
			body{
				color: #333;
				font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', 'Micrsoft YaHei', 微软雅黑, Tahoma, Arial, sans-serif;
			}
		</style>
		<script src="bower_components/angular/angular.js"></script>
	</head>
	<body>
		<div>
			<label>姓名:</label>
			<input type="text" ng-model="yourName" placeholder="请输入姓名"/>

			<h1>Hello, {{yourName}}</h1>
		</div>
	</body>
</html>

在浏览器中运行:

Hello AngularJS

How it works?

试一试在线的Demo,然后让我们通过这个示例来解释AngularJS是如何工作的。

首先,上面的代码看起来就像普通的HTML,没有任何的JavaScript代码,但有一些“新的HTML标记”
在Angular中,这种样的HTML文件在AngularJS中是template。当Angular启动应用时,它将template文件中的新标记通过complier进行转换和处理,转换和渲染后的DOM最终展现到浏览器,这种展现在AngularJS中叫做view

简明地讲,compliertemplate文件进行解析,然后转换为浏览器能够识别的view。用过ASP.NET进行web开发的读者,可能会联想到,混杂在Web Forms应用中的服务器标记,最终不也通过编译器最终转换成HTML呈现在浏览器中吗?

我们看到的第一种“新的HTML标记”是以字符ng开头的,例如:ng-app、ng-model,这些标记分别和指令ngApp、ngModel对应。当这些标记作用在HTML元素上时,AngularJS在complie的过程中将其链接到相应的指令,这些指令具有一些特殊的行为。ng-app属性应用在<html>元素上,链接到一个自动初始化应用的指令,即ngApp指令。AngularJS的一些指令可以给input元素添加额外的行为,ngModel指令可以存储/更新input的输入值写入/读取到一个变量中,这是一个double-binding的行为。

我们还看到了第二种“新的HTML标记”,双大括号{{}}。在本例中,{{}}标记包含的内容是expression(表达式)。当complier遇到{{}}标记时,它会将expression替换为“评估值”。
在template中,expression是一个类似于JavaScript的代码片段,在这个代码片段中可以读写变量。需要注意的是,这个“代码片段”中的变量不是全局变量,而是局部变量,就像JS函数内部使用的变量,AngularJS为这些变量提供了scope(作用域)。在scope(作用域)中存储的变量,称之为model(模型),model用于数据绑定。在本例中,{{}}中的expression仅仅是一个变量yourName,它就是model。

总结

在这个基于AngularJS的Hello World应用中,我们接触到了AngularJS的几个基本概念。

  • directive(指令)
  • template(模板)
  • complier(编译器)
  • view(视图)
  • model(模型)
  • scope(作用域)

理解这些基本的概念,有助于我们更深入的学习和使用AngularJS。

参考和源码

AngularJS Concept Overview: https://docs.angularjs.org/guide/concepts