一、 关于angularjs的加载方式：
启动方式：
一个angular应用运行起来的“入口”，有两方式：
1)在元素上添加ng-app指令（暂时无需关心什么意思）；ng-app可以有属性值（ng-app="app"），这样 的话就需要咱们去写一个名为app的module了，后续详解。
---- 暂时不推荐使用这种方式启动angular
2) 不去指定ng-app，通过JS代码执行：angular.bootstrap(element, [‘模块名‘...])，一样也是可以 启动的
----推荐使用这种方式来启动angular.
二：Bootstrap：Angular的初始化
1：Angular自动化初始如下
利用ngapp标示你需要自动引导应用程序的根节点，一般典型为html tag。在DOMContentLoaded事件触发Angular会自动寻找ngapp作为应用的根节点，如果找到则会进行如下操作：
- 加载module(模块)相关directive(指令)。
- 创建应用程序injector(Angular的注入机制).
- 编译处理ng-app作为根节点的指令。这里允许你自定义选择DOM节点作为应用根节点。
2：手动初始化
如果想对对初始化有更多的控制权，可以采用自定义手动引导方法初始化代替angular的自动初始化。比如你需要在angular编译模板之前做一些事情，比如改变模板某些内容。手动引导方式将会如下：
<!doctypehtml>
<htmlxmlns:ng="http://angularjs.org">
<body>
Hello {{‘World‘}}!
<scriptsrc="http://code.angularjs.org/angular.js"></script>
<script>
angular.element(document).ready(function() {
angular.bootstrap(document);
});
</script>
</body>
</html>
- 如何使用angular来开发程序
- 首先在对应的页面引入：angular-1.2.0.min.js
- 接着引入sea.js(SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制,如requre和define指令都是seajs中的);
- 例子如下：
首页：index.html文件
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"src="angular-pa-1.2.0.min.js"></script>
<script type="text/javascript"src="sea.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<input ng-model="greeting.text">
<p>{{greeting.text}},World</p>
<table ng-show="greeting.aaa">
<tr ng-repeat="item in items">
<td ng-click="apply()">{{$index+1}}</td>
<td ng-click="goEoa()">{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
<!—有了define等模块定义规范的实现,我们可以开发出很多模块.但光有一堆模块不管用,我们还得让它们能跑起来,使用seajs.use-->
<!—seajs.use用来在页面中加载模块,通过use方法可以在页面中加载任意模块-->
<script data-language="javascript">
seajs.use(‘./controllers‘);
</script>
</body>
</html>
Controllers.js文件
//使用define来定义模块
define(function(require,exports){
var myAppModel =angular.module(‘myAppModel‘,[]);
//将对应的服务引入进来，并使用define将其定义到‘myAppModel‘model上。
require(‘backwardEoaPageService‘).define(myAppModel);
require(‘./backwardEoaPageDirective.js‘).extend(myAppModel);
myAppModel.controller(‘HelloController‘,function($scope,
backwardEoaPageService){
$scope.greeting={
text:‘Hello‘,
youCheckedit:true,
aaa:true
};
$scope.items=[{name:‘张三1‘,age:‘1‘},
{name:‘张三2‘,age:‘2‘},
{name:‘张三3‘,age:‘3‘},
{name:‘张三4‘,age:‘4‘},
{name:‘张三5‘,age:‘5‘},
{name:‘张三6‘,age:‘6‘}];
$scope.apply=function(){
backwardEoaPageService.apply();
};
$scope.goEoa=function(){
backwardEoaPageService.goEoa();
};
});
//备注：使用angular.bootstrap将model:myAppModel加载到document,就不用在html页面上使用ng-app了
angular.bootstrap(document,[‘myAppModel‘]);
});
backwardEoaPageService.js文件；
define(function(require, exports){
//exports对外公布一个入口
exports.define= function(md) {
md.factory(‘backwardEoaPageService‘,[‘$http‘,function($http){
varservice = {
apply: function(backwardCancelPlyDTO,handle){
var url = ‘servlets/servlet/HelloWorldExample‘;
$http({method:‘POST‘,url:
url,data:backwardCancelPlyDTO})
.success(function(data, status,
headers){
handle(data);
});
},
goEoa: function(backwardCancelPlyDTO,handle){
alert("goEoa");
}
};
returnservice;
}]);
};
});
backwardEoaPageDirective.js指令文件
define(function(require, exports){
exports.extend= function(md){
//下面指令的定义中，对应的红色参数要一一对应，否则无法注入对象；
//或者前面可以不要，直接写function中的参数即可
md.directive(‘backwardEoaPage‘,
[‘$http‘,‘backwardEoaPageService‘,function($http,backwardEoaPageService){
return {
restrict: ‘A‘,
templateUrl:‘./backwardEoaPage.html‘,
scope: {
isShow: ‘=‘//这是指令对外暴露的接口，=表示是值传递
},
link:function(scope, element,attrs){
scope.model = {
applyReason : null
};
scope.upload = function(){
varbackwardCancelPlyDTO={message:"aaaa"};
backwardEoaPageService.apply(backwardCancelPlyDTO,function(data){
alert(data.message);
});
}
}
};
}]);
};
});
- angularjs的post请求,springmvc解析不了
.)在angularJS中与远程HTTP服务器交互时会用一个非常关键的服务-$http。
.)$http的使用方式和jquery提供的$.ajax操作比较相同，均支持多种method的请求，get、post、put、delete等。
$http(config).success(function(data,status,headers,config){}).error(function(data,status,headers,config){});
config为一个JSON对象，其中主要包含该请求的url、data、method等，如{url:"login.do",method:"post",data:{name:"12346",pwd:"123"}}
. method {String} 请求方式e.g."GET"."POST"
. params {key,value} 请求参数，将在URL上被拼接成？key=value
. data {key,value} 数据，将被放入请求内发送至服务器
参考文档：http://www.cnblogs.com/sytsyt/p/3297872.html
- angularjs的post访问方法：
$http({method: ‘POST‘, url: url, data:backwardCancelPlyDTO})
.success(function(data, status, headers){
handle(data);}
);
对于这样的请求，springmvc的controller如何处理；
a)在对应的入参Bean前面添加@RequestBody注解---因为angularjs post参数值放到请求Body中了，而且入参是对应的json数据，需要进行处理，才能封装到Bean中；
@Controller
publicclassTestController {
@RequestMapping("/test/login.do")
publicvoidtestLogin(@RequestBody User user, HttpServletResponse response) {
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
if("admin".equals(user.getUserName())&& "admin".equals(user.getPassWord())){
out.write("{\"message\":\"登陆成功\"}");
} else {
out.write("{\"message\":\"登陆失败\"}");
}
}
}
1、必须是POST方式
2、前台需要设置‘contentType‘
3、前台JSON对象要转成字符串,如JSON.stringify(JsonObject),
4、后台参数得用@RequestBody 注解
5、如果你是异步处理返回的JSON值（比如Map等）则@ResponseBody是需要的
6、这个时候，你的JsonObject 就会自动转为queryVO这个Bean
备注：如果使用jquery的ajax进行请求，后台就不需要使用@RequestBody注解进行处理了；---这就是angular与jquery的不同；
b)还有就是
angularjs中的post请求参数必须使用data进行传递；不能使用params(供get专用的)
$http({method: ‘POST‘, url: url, data:backwardCancelPlyDTO})
$http({method: ‘GET‘, url: url, params:backwardCancelPlyDTO})
- springmvc接收json格式的数据在xml配置文件中还需要进行如下的配置
下面的配置是对方法的json数据进行处理；
<beanid="mappingJacksonHttpMessageConverter"
class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"/>
<beanclass="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<propertyname="messageConverters">
<list>
<reflocal="mappingJacksonHttpMessageConverter"/>
</list>
</property>
</bean>
上面配置需要的jar包在下面下载：
http://jarfiles.pandaidea.com/jackson.all.html
请下载jackson-all-1.8.3.jar，因为1.9.0有问题；
- springmvc输出json格式的数据，供ajax使用,步骤如下：
- 在AnnotationMethodHandlerAdapter处理类中需要注入如下的转换器
org.springframework.http.converter.json.MappingJacksonHttpMessageConverter
2)方法的返回值使用如下的注解这样就可以了；
@ResponseBody
@RequestMapping("/test/login.do")
public User testLogin(@RequestBody User user,HttpServletResponse res, HttpServletRequest req) {