一 什么是AngularJS
官方定义:AngularJS是HTML开发本应该的样子,它是用来开发Web应用的。
HTML一般是用来声明静态页面的,而AngularJS可以只通过前端技术就实现动态的页面。
二 下载并引用AngularJS
AngularJS的中文官方:http://www.angularjs.net.cn/
AngularJS的中文下载地址:http://www.angularjs.net.cn/download/
最简单的https://angularjs.org/页面
<!doctype html>
<html ng-app><!-- ng-app所作用的范围是AngularJS起效的范围,本例是整个页面有效 -->
<head>
<meta charset="utf-8">
<script src="js/angular.min.js"></script><!-- 载入AngularJS的脚本 -->
</head>
<body>
<div>
<label>名字:</label>
<!--ng-model定义整个AngularJS的前端数据类型,模型的名称是yourname,模型的值来自输入的值,若输入值改变,则数据模型的值也会改变 -->
<input type="text" ng-model="yourName" placeholder="输入你的名字">
<hr>
<h1>你好 {{yourName}}!</h1><!-- 使用{{模型名}}来读取模型中的值 -->
</div>
</body>
</html>
效果图如下:
三 AngularJS核心特性——MVC
Model:数据模型层
View:视图层,负责展示
Controller:业务逻辑和控制逻辑
好处:职责清晰,代码模块化。
平时的MVC都是服务端的MVC,这里用AngularJS实现了纯页面端的MVC,即实现了视图、数据,控制代码的分离。
四 实战
1 展示页面
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="HelloAngular"> <!-- 控制器是HelloAngular -->
<p>{{greeting.text}},Angular</p> <!-- P标签内是视图,{{greeting.text}}是模型 -->
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_MVC.js"></script>
</html>
2 控制器的定义HelloAngular
function HelloAngular($scope) {
$scope.greeting = {
text: 'Hello'
};
}
3 演示效果