關於angularjs的載入方式
一、 關於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>
<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包在下面下載:
請下載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) {
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/3705/viewspace-2815547/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 關於js延遲載入(非同步操作)的方式JS非同步
- 關於angularJS的一些用法AngularJS
- 關於懶載入原理
- 關於java中的類載入器Java
- 2.2 - Laravel - 5.6 - Facade - 關於 facade 載入Laravel
- 多重載入Bean方式Bean
- 在 PowerShell 中,"本地載入"和"遠端載入"通常指的是執行指令碼或命令的位置或方式。以下是關於本地載入和遠端載入的一些基本概念和示例:指令碼
- OpenSSL Engine的三種載入方式
- Vue中圖片的載入方式Vue
- Python頁面載入的等待方式Python
- 關於頁面載入耗時測試
- 還是Tomcat,關於類載入器的趣味實驗Tomcat
- AngularJS進階(三十八)上拉載入問題解決方法AngularJS
- JavaScript 檔案載入方式JavaScript
- 小說APP原始碼的圖片載入方式,懶載入和預載入的實現APP原始碼
- tensorflow載入資料的三種方式
- js延遲載入的方式有哪些?JS
- 非同步載入CSS的方式有哪些?非同步CSS
- 不一樣的圖片載入方式
- 【譯】更多關於漸進式圖片載入的實現
- Angularjs——初識AngularJSAngularJS
- 淺析SpringBoot載入配置的6種方式Spring Boot
- 谷歌:如何以最高效的方式載入 WebAssembly谷歌Web
- 關於iOS Webview 載入React 靜態資源的安全問題iOSWebViewReact
- React: 關於React通訊方式React
- 關於在Flutter Web中載入html(持續更新中......)FlutterWebHTML
- unity3D AssetBundle載入方式Unity3D
- spring bean定義與載入方式SpringBean
- java疫苗之殤?關於java類載入器的一些思考Java
- 實現圖片懶載入的三種方式
- HBase協處理器載入的三種方式
- 關於WiFi協議的調製方式詳解WiFi協議
- 關於 LF will be replaced by CRLF 問題的解決方式
- T-SQL——關於事務回滾的方式SQL
- 關於SSH登入
- 關於輸入框的細節
- 用 Python 載入資料的 5 種不同方式Python
- 模型關聯--預載入模型