版本：2.0.0-beta.17/angular.js/2.0.0-beta.17/angular2-all-testing.umd.dev.js/angular.js/2.0.0-beta.17/angular2-all.umd.dev.js/angular.js/2.0.0-beta.17/angular2-all.umd.js/angular.js/2.0.0-beta.17/angular2-all.umd.min.js/angular.js/2.0.0-beta.17/angular2-polyfills.js/angular.js/2.0.0-beta.17/angular2-polyfills.min.js/angular.js/2.0.0-beta.17/angular2.dev.js/angular.js/2.0.0-beta.17/angular2.js/angular.js/2.0.0-beta.17/angular2.min.js/angular.js/2.0.0-beta.17/http.dev.js/angular.js/2.0.0-beta.17/http.js/angular.js/2.0.0-beta.17/http.min.js/angular.js/2.0.0-beta.17/router.dev.js/angular.js/2.0.0-beta.17/router.js/angular.js/2.0.0-beta.17/router.min.js/angular.js/2.0.0-beta.17/Rx.js/angular.js/2.0.0-beta.17/Rx.min.js/angular.js/2.0.0-beta.17/Rx.umd.js/angular.js/2.0.0-beta.17/Rx.umd.min.js/angular.js/2.0.0-beta.17/testing.dev.js/angular.js/2.0.0-beta.17/upgrade.dev.js/angular.js/2.0.0-beta.17/upgrade.js/angular.js/2.0.0-beta.17/upgrade.min.js/angular.js/2.0.0-beta.17/web_worker/ui.dev.js/angular.js/2.0.0-beta.17/web_worker/worker.dev.js版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：版本：AngularJs教程-快速入门
AngularJs开发应用
主要介绍AngularJs的特性、应用骨架、应用剖析、与服务器的交互、及简单的Demo
关于AngularJs
AngularJS是一款来自Google的前端JS框架。简称其为 ng 。这款框架最核心特性有：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。
AngularJS框架通过TDD（测试驱动）的方式开发的，从这个角度看，AngularJS是敏捷开发的一次成功实践。
使用了指令的概念，AngularJS对DOM操作进行了彻底的封装。
AngularJS框架是完全免费开源的。
关于 ng 的几点：
对 IE 方面，它兼容 IE8 及以上的版本。
与 jQuery 集成工作，它的一些对象与 jQuery 相关对象表现是一致的。
使用 ng 时不要冒然去改变相关 DOM 的结构
HelloWorld
第一个Demo，HelloDynamic.html
&html ng-app&
&script src="/ajax/libs/angularjs/1.0.8/angular.min.js"&&/script&
&script src="controllers.js"&&/script&
&p ng-controller='HelloController'&
&input ng-model='greeting.text'&
&p&{{greeting.text}}, World&/p&
controllers.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
我们没有在输入框中注册任何change事件监听器就可以让UI自动刷新，AngularJs会自动把输入框和花括号中的文本更新为所获得值。
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
scope对象会自动传递给我们，我们并不需要任何函数去创建这个对象。只要把scope对象 放在HelloController的构造函数里面，然后就可以获取它了。
当然scope对象并不是我们唯一可以获取的对象，我们还可以使用location，只要把$location对象放在我们的构造函数中即可。
这种神奇的效果是通过Angular的依赖注入机制实现的。
我们在模板中看到一些新的属性，这些属性不属于HTML规范。我们引进了花括号用来实现数据的绑定；引入了ng-controller用来指定每个控制器负责监视视图的哪个部分；引入了ng-model，用来把输入数据绑定到模型中的以部门属性上。我们把这些叫做HTML扩展命令。
&html ng-app&
&title&Your Shopping Cart&/title&
&body ng-controller='CartController'&
&h1&Your Shopping Cart&/h1&
&p ng-repeat='item in items'&
&span&{{item.title}}&/span&
&input ng-model='item.quantity'&
&span&{{item.price | currency}}&/span&
&span&{{item.price * item.quantity | currency}}&/span&
&button ng-click="remove($index)"&Remove&/button&
&script src="/ajax/libs/angularjs/1.0.8/angular.min.js"&&/script&
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
$scope.remove = function(index) {
$scope.items.splice(index, 1);
&html ng-app&
ng-app 属性用来告诉Angular页面中的哪一个部分需要接受它的管理。放在html标签中，说明它管理整个页面。
&body ng-controller='CartController'&
使用一个叫做控制器的Script类来管理页面中的区域。在body标签中引入一个控制器，就是在声明CartController将会管理介于和之间的所有内容。
&p ng-repeat='item in items'&
ng-repeat的意思是，对于items数据中的每一个元素，都把中的DOM结构复制一份（包含p本身）。对于p的每一分拷贝，都会把一个叫做item的属性设置给它，这样我们就可以在模板中使用这份拷贝的元素了。如你所见，这样一来就会产生3份。
&span&{{item.title}}&/span&
{{item.title}}将会获取循环中当前item，然后把这个item的title属性值插入到DOM中。
&input ng-model='item.quantity'&
定义ng-model将会在输入框和item.quantity的值之间创建数据的绑定关系。
&span&{{item.price | currency}}&/span&
单价或者总价都有美元的格式显示。Angular带有一种2叫做过滤器（filter）的特性，我们可以用它来转换文本的格式，有一个内置过滤器叫做currency（货币），来显示美元格式化。
&button ng-click="remove($index)"&Remove&/button&
这个按钮可以让用户删除购物车中的项目，$index代表过程中的循环计数，这样就可以知道要删除哪条记录了。
&html ng-app='myApp'&
&body ng-controller='TextController'&
&p&{{someText.message}}&/p&
src="/ajax/libs/angularjs/1.0.8/angular.min.js"&
var myAppModule = angular.module('myApp', []);
myAppModule.controller('TextController',
function($scope) {
var someText = {};
someText.message = 'You have started your journey.';
$scope.someText = someT
我们把ng-app设置成模块名称myApp，然后调用Angular对象创建一个名为myApp的模块，并且把控制器函数传递给myApp模块的controller函数。
用户请求应用起始页
用户的向服务器发起一次ＨＴＴＰ连接，然后加载index.html页面，这个页面里面包含模板。
Angular被加载到页面中，等待页面加载完成，然后查找ng-app指令，用来定义模板边界。
Angular遍历模板，查找指令和绑定关系，这将启动一些列的动作：注册监听器、执行一些DOM操作、从服务器获取初始化数据。这项工作的结果是，应用将会启动起来，并且模板被转换成DOM视图。
连接到服务器去加载需要展示给用户的其他数据。
数据变化触发事件
&!doctype html&
&html ng-app&
&script src="/ajax/libs/angularjs/1.0.8/angular.min.js"&&/script&
&form ng-controller="StartUpController"&
Starting: &input ng-change="computeNeeded()"
ng-model="funding.startingEstimate"&
Recommendation: {{funding.needed}}
function StartUpController($scope) {
$scope.funding = { startingEstimate: 0 };
$puteNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
不管他是通过何种途径进行刷新的，我们需要使用scope中watch函数。
&!doctype html&
&html ng-app&
&script src="/ajax/libs/angularjs/1.0.8/angular.min.js"&&/script&
&form ng-controller="StartUpController"&
Starting: &input ng-model="funding.startingEstimate"&
Recommendation: {{funding.needed}}
function StartUpController($scope) {
$scope.funding = { startingEstimate: 0 };
computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
$scope.$watch('funding.startingEstimate', computeNeeded);
监控多个东西
$scope.$watch('things.a+things.b',callMe(...));
当然a和b也可以属于不同的对象，只要需要，这个列表可以无限长。
需要监控things对象上的所有属性，可以这样做：
$scope.$watch('things',callMe(...),true);
true属性是请求Angular遍历things的属性，当其中任何一个属性发生变化时就会触发callMe事件。
使用Moudle模块组织依赖关系
&!doctype html&
&html lang='en' ng-app='ShoppingModule'&
&title&Shopping Cart&/title&
&script src="/ajax/libs/angularjs/1.0.8/angular.min.js"&&/script&
&link href="bootstrap.css" rel="stylesheet"&
&body ng-controller="ShoppingController"&
&h1&Shop!&/h1&
&tr ng-repeat="item in items"&
&td&{{item.title}}&/td&
&td&{{item.description}}&/td&
&td&{{item.price | currency}}&/td&
function ShoppingController($scope, Items) {
$scope.items = Items.query();
var shoppingModule = angular.module('ShoppingModule', []);
// Set up the service factory to create our Items interface to the
// server-side database
shoppingModule.factory('Items', function() {
var items = {};
items.query = function() {
// In real apps, we'd pull this data from the server...
{title: 'Paint pots', description: 'Pots full of paint', price: 3.95},
{title: 'Polka dots', description: 'Dots with polka', price: 2.95},
{title: 'Pebbles', description: 'Just little rocks', price: 6.95}
利用模块和模块内置的依赖注入功能，我们可以把控制器写的更加的简单：
function ShoppingController($scope, Items) {//俩个参数是无序的
$scope.items = Items.query();
Items已定义为一个服务，定义的方式有三种：
1. provider(name,Object OR constructor()),一个可配置的服务，创建的逻辑比较复杂。如果你传递了一个Object做为参数，那么这个Object必须带有一个名为get的函数，这个函数需要返回服务的名称。否则，Angular会认为你传递的是一个构造函数，调用构造函数会返回服务实例对象。2.factory(name,getFunction()),一个不可配置的服务，创建逻辑比较复杂。你需要指定一个函数，当调用这个函数的时候，会返回服务的实例。你可以把它看成provider(name,{$getFunction()})的形式。
3. service(name,constructor()),一个不可配置的服务，创建逻辑比较简单。与上面的provider函数的constructor参数类似，Angular调用它可以创建服务实例。
使用过滤器格式化数据
语法：{{expression | filterName:parameter1: …parameterN}}
表达式可以是任意的Angular表达式，filterName是你需要使用的过滤器的名称，过滤器的多个参数之间用冒号分隔。
{{10.1 | currency}}对应$10.10
Angular内置的过滤器还有date , number ,uppercase
{{10.1 | currency | number : 0}}对应显示$10
不必受限于内置的过来器，可以自定义过滤器，标题文字首字母大写
&!doctype html&
&html lang='en' &
&title&TitleCaps&/title&
&script src="/ajax/libs/angularjs/1.0.8/angular.min.js"&&/script&
&body ng-app='HomeModule' ng-controller="HomeController"&
&h1&{{pageHeading | titleCase}}&/h1&
function HomeController($scope) {
$scope.pageHeading = 'behold the majesty of your page title';
var homeModule = angular.module('HomeModule', []);
homeModule.filter('titleCase', function() {
var titleCaseFilter = function(input) {
var words = input.split(' ');
for (var i = 0; i & words. i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
return words.join(' ');
return titleCaseF
使用路由和$location切换视图
$routeProvider
index.html
&!doctype html&
&html ng-app="AMail"&
&script src="/ajax/libs/angularjs/1.0.8/angular.min.js"&&/script&
&script src='controllers.js'&&/script&
&h1&A-Mail&/h1&
&p ng-view&&/p&
我们仅仅把标题放在里面，然后在用ng-view指令来告诉Angular把视图显示在这儿。
&td&&strong&Sender&/strong&&/td&
&td&&strong&Subject&/strong&&/td&
&td&&strong&Date&/strong&&/td&
&tr ng-repeat='message in messages'&
&td&{{message.sender}}&/td&
&td&&a ng-href='#/view/{{message.id}}'&{{message.subject}}&/a&&/td&
&td&{{message.date}}&/td&
由于所有视图模板都会被插入到刚才所创建的外壳中，所以可以把它们都编成HTML文档片段。用ng-repeat指令来遍历邮件列表，然后把它们渲染到table中。
我们想实现用户点击一个主题就能被导航到相应的邮件中。我们在URL和message.id之间进行了数据绑定，所以用户点击id=1的邮件就会被导航到/#/view/1。这种根据URL导航的方式叫做深度链接。
detail.html
&p&&strong&Subject:&/strong& {{message.subject}}&/p&
&p&&strong&Sender:&/strong& {{message.sender}}&/p&
&p&&strong&Date:&/strong& {{message.date}}&/p&
&strong&To:&/strong&
&span ng-repeat='recipient in message.recipients'&{{recipient}} &/span&
&p&{{message.message}}&/p&
&a href='#/'&Back to message list&/a&
为了把这些模板关联到对应的控制器上，我们将会给routeProvider配置一个URL，routeProvider将会负责调用控制器和模板。
controllers.js
// Create a module for our core AMail services
var aMailServices = angular.module('AMail', []);
// Set up our mappings between URLs, templates, and controllers
function emailRouteConfig($routeProvider) {
$routeProvider.
when('/', {
controller: ListController,
templateUrl: 'list.html'
// Notice that for the detail view, we specify a parameterized URL component
// by placing a colon in front of the id
when('/view/:id', {
controller: DetailController,
templateUrl: 'detail.html'
otherwise({
redirectTo: '/'
// Set up our route so the AMail service can find it
aMailServices.config(emailRouteConfig);
// Some fake emails
messages = [{
id: 0, sender: '', subject: 'Hi there, old friend',
date: 'Dec 7, :00', recipients: [''],
message: 'Hey, we should get together for lunch sometime and catch up.'
+'There are many things we should collaborate on this year.'
sender: '',
subject: 'Where did you leave my laptop?',
date: 'Dec 7, :12', recipients: [''],
message: 'I thought you were going to put it in my desk drawer.'
+'But it does not seem to be there.'
id: 2, sender: '', subject: 'Lost python',
date: 'Dec 6, :02', recipients: [''],
message: 'Nobody panic, but my pet python is missing from her cage.'
+'She doesn\'t move too fast, so just call me if you see her.'
// Publish our messages for the list template
function ListController($scope) {
$scope.messages =
// Get the message id from the route (parsed from the URL) and use it to
// find the right message object.
function DetailController($scope, $routeParams) {
$scope.message = messages[$routeParams.id];
与服务器交互
Angular提供$http服务，使得与服务器的交互更加容易。待详解。
&!doctype html&
&html lang='en' ng-app&
&title&Shopping Cart&/title&
&script src="/ajax/libs/angularjs/1.0.8/angular.min.js"&&/script&
&body ng-controller="ShoppingController"&
&h1&Shop!&/h1&
&tr ng-repeat="item in items"&
&td&{{item.title}}&/td&
&td&{{item.description}}&/td&
&td&{{item.price | currency}}&/td&
function ShoppingController($scope, $http) {
$http.get('/products').success(function(data, status, headers, config) {
$scope.items =
使用指令修改DOM
&!doctype html&
&html lang='en' ng-app='app'&
&title&Get focused&/title&
&script src="/ajax/libs/angularjs/1.0.8/angular.min.js"&&/script&
&body ng-controller="SomeController"&
&button ng-click="clickUnfocused()"&
Not focused
&button ngbk-focus ng-click="clickFocused()"&
I'm very focused!
&p&{{message.text}}&/p&
function SomeController($scope) {
$scope.message = { text: 'nothing clicked yet' };
$scope.clickUnfocused = function() {
$scope.message.text = 'unfocused button clicked';
$scope.clickFocused = function() {
$scope.message.text = 'focus button clicked';
var appModule = angular.module('app', []);
appModule.directive('ngbkFocus', function() {
link: function(scope, element, attrs, controller) {
element[0].focus();
你会看到焦点在第二个按钮上面。
校验用户输入
Angular为表单添加了一些很好用的特性
&!doctype html&
&html lang='en' ng-app&
&title&Validate me!&/title&
&script src="/ajax/libs/angularjs/1.0.8/angular.min.js"&&/script&
&style type="text/css"&
.ng-invalid {
border-color:
&h1&Sign Up&/h1&
&form name='addUserForm' ng-controller="AddUserController"&
&p ng-show='message'&{{message}}&/p&
&p&First name: &input name='firstName' ng-model='user.first' required&&/p&
&p&Last name: &input ng-model='user.last' required&&/p&
&p&Email: &input type='email' ng-model='user.email' required&&/p&
&p&Age: &input type='number'
ng-model='user.age'
ng-maxlength='3'
ng-min='1'&&/p&
&p&&button ng-click='addUser()'
ng-disabled='!addUserForm.$valid'&Submit&/button&&/p&
function AddUserController($scope) {
$scope.message = '';
$scope.addUser = function () {
// TODO for the reader: actually save user to database...
$scope.message = 'Thanks, ' + $scope.user.first + ', we added you!';
我们可以通过$valid属性获取表单的校验状态。配合ng-disabled，表单没有输入完成时禁用submit按钮。
SpringMVC AngularJs 交互
angularjs.
Created by IntelliJ IDEA.
User: fanchengwei
Time: 下午2:10
To change this template use File | Settings | File Templates.
&%@ page contentType="text/charset=UTF-8" language="java" %&
&html ng-app="myApp"&
ng-app用来告诉Angular页面中的哪部门需要接受它的管理
&head lang="en"&
&meta charset="utf-8"&
&title&Teams List App&/title&
&script src="/ajax/libs/jquery/1.8.3/jquery.min.js"&&/script&
&script src="/ajax/libs/angularjs/1.0.8/angular.min.js"&&/script&
&link rel="stylesheet" href="/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css"&
&script src="/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js"&&/script&
&script src="webpage/com/kd/business/angularjs/services.js"&&/script&
&script src="webpage/com/kd/business/angularjs/app.js"&&/script&
&p class="row-fluid"&
&p class="span3" ng-controller="FilterCtrl"&
&form class="form-horizontal"&
&p class="controls-row"&
&label for="searchTextBox" class="control-label"&Search:&/label&
&p class="controls"&
&input type="text" id="searchTextBox" ng-model="filterService.searchText"&
&p class="controls-row"&
&label for="sportComboBox" class="control-label"&Sport:&/label&
&p class="controls"&
&select id="sportComboBox" ng-model="filterService.activeFilters.sport"&
&option ng-repeat="sport in ['Basketball', 'Hockey', 'Football']"&{{sport}}&/option&
&p class="controls-row"&
&label for="cityComboBox" class="control-label"&City:&/label&
&p class="controls"&
&select id="cityComboBox" ng-model="filterService.activeFilters.city"&
&option ng-repeat="city in ['Dallas', 'Los Angeles', 'Boston', 'New York']"&{{city}}&/option&
&p class="controls-row"&
&label class="control-label"&Featured:&/label&
&p class="controls"&
&input type="checkbox" ng-model="filterService.activeFilters.featured" ng-false-value="" /&
&p class="offset1 span8" ng-controller="ListCtrl"&
border="1"&
&th&key_p&/th&
&th&position&/th&
&th&responsible_person&/th&
&tbody id="teamListTable"&
&tr ng-repeat="team in teamsList | filter:filterService.activeFilters | filter:filterService.searchText"&
&td&{{team.key_p}}&/td&
&td&{{team.position}}&/td&
&td&{{team.responsible_person}}&/td&
var app = angular.module('myApp', ['myApp.services']);
app.controller('ListCtrl', function ($scope, $http, filterService) {
$scope.filterService = filterS
var url = "angularJsController.do?query";
$http({method: 'GET', url: url}).success(function (list, status, headers, config) {
$scope.teamsList =
}).error(function (list, status, headers, config) {
console.log("error");
app.controller('FilterCtrl', function ($scope, filterService) {
$scope.filterService = filterS
services.js
angular.module('myApp.services', []).
factory('filterService', function() {
activeFilters: {},
searchText: ''
AngularJsController.java
package com.kd.business.
import com.kd.business.smart_socket.service.ZzSmartsocketServiceI;
import com.kd.platform.web.system.service.SystemS
import org.apache.poi.ss.formula.functions.T;
import org.springframework.beans.factory.annotation.A
import org.springframework.context.annotation.S
import org.springframework.http.HttpS
import org.springframework.http.ResponseE
import org.springframework.stereotype.C
import org.springframework.web.bind.annotation.RequestM
import org.springframework.web.servlet.ModelAndV
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import java.util.L
import java.util.M
* AngularJsController
* @author Frey Fan
* 测试类AngularJs
@Scope("prototype")
@Controller
@RequestMapping("/angularJsController")
public class AngularJsController {
@Autowired
private ZzSmartsocketServiceI zzSmartsocketS
@Autowired
private SystemService systemS
@RequestMapping(params={"init"})
public ModelAndView init(HttpServletRequest request)
return new ModelAndView("com/kd/business/angularjs/angularjs");
@RequestMapping(params = {"query"})
public ResponseEntity&List&Map&String, Object&&& query(HttpServletRequest request, HttpServletResponse response){
List list = systemService.findForJdbc("select key_p ,position,responsible_person from zz_smartsocket",null);
return new ResponseEntity&List&Map&String, Object&&&(list, HttpStatus.OK);}