关于angularjs的加载方式

2025-01-04 技术教程

一、关于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>

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>