关于angularjs的加载方式

                   一、      关于angularjs的加载方式：

创新互联一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！ 以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！为您提供成都网站设计、成都网站制作、成都网页设计、小程序制作、成都网站开发、成都网站制作、成都软件开发、app开发定制是成都本地专业的网站建设和网站设计公司，等你一起来见证！

启动方式：

一个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作为应用的根节点，如果找到则会进行如下操作：

1. 加载module(模块)相关directive(指令)。

2. 创建应用程序injector(Angular的注入机制).

3. 编译处理ng-app作为根节点的指令。这里允许你自定义选择DOM节点作为应用根节点。

    2：手动初始化

如果想对对初始化有更多的控制权，可以采用自定义手动引导方法初始化代替angular的自动初始化。比如你需要在angular编译模板之前做一些事情，比如改变模板某些内容。手动引导方式将会如下：

 Hello {{'World'}}!

• 如何使用angular来开发程序

• 首先在对应的页面引入：angular-1.2.0.min.js

• 接着引入sea.js(SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制,如requre和define指令都是seajs中的);

• 例子如下：

首页：index.html文件

"text/html;charset=utf-8">

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数据进行处理；

class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"/>

上面配置需要的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) {