首页 > 代码库 > 关于angularjs的加载方式

关于angularjs的加载方式

2024-07-20 00:51:45   220人阅读

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

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

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

  3. 编译处理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) {


本文出自 “小李广之博客” 博客，请务必保留此出处http://6817977.blog.51cto.com/6807977/1546189

关于angularjs的加载方式


联系
我们