赞
踩
一 什么是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 演示效果
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。