一、關於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="">

<body>

Hello {{'World'}}!

<scriptclass="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""></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>

<title>Insert title here</title>

</head>

<body>

<p>`greeting`.`text`,World</p>

<td ng-click="apply()">{{$index+1}}</td>

</tr>

</table>

</div>

<!—有了define等模組定義規範的實現,我們可以開發出很多模組.但光有一堆模組不管用,我們還得讓它們能跑起來,使用seajs.use-->

<!—seajs.use用來在頁面中載入模組,透過use方法可以在頁面中載入任意模組-->

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包在下面下載：

請下載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) {

關於angularjs的載入方式

1：Angular自動化初始如下

2：手動初始化

相關文章