溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

關(guān)于angularjs的加載方式

發(fā)布時(shí)間：2020-07-09 21:50:07 來源：網(wǎng)絡(luò) 閱讀：1050 作者：lxg290 欄目：web開發(fā)

                   一、      關(guān)于angularjs的加載方式：

啟動(dòng)方式：

一個(gè)angular應(yīng)用運(yùn)行起來的“入口”，有兩方式：

1)在元素上添加ng-app指令（暫時(shí)無需關(guān)心什么意思）；ng-app可以有屬性值（ng-app="app"），這樣   的話就需要咱們?nèi)懸粋€(gè)名為app的module了，后續(xù)詳解。

---- 暫時(shí)不推薦使用這種方式啟動(dòng)angular

2) 不去指定ng-app，通過JS代碼執(zhí)行：angular.bootstrap(element, ['模塊名'...])，一樣也是可以   啟動(dòng)的

----推薦使用這種方式來啟動(dòng)angular.

二：Bootstrap：Angular的初始化

    1：Angular自動(dòng)化初始如下

利用ngapp標(biāo)示你需要自動(dòng)引導(dǎo)應(yīng)用程序的根節(jié)點(diǎn)，一般典型為html tag。在DOMContentLoaded事件觸發(fā)Angular會(huì)自動(dòng)尋找ngapp作為應(yīng)用的根節(jié)點(diǎn)，如果找到則會(huì)進(jìn)行如下操作：

  1. 加載module(模塊)相關(guān)directive(指令)。

  2. 創(chuàng)建應(yīng)用程序injector(Angular的注入機(jī)制).

  3. 編譯處理ng-app作為根節(jié)點(diǎn)的指令。這里允許你自定義選擇DOM節(jié)點(diǎn)作為應(yīng)用根節(jié)點(diǎn)。

    2：手動(dòng)初始化

如果想對(duì)對(duì)初始化有更多的控制權(quán)，可以采用自定義手動(dòng)引導(dǎo)方法初始化代替angular的自動(dòng)初始化。比如你需要在angular編譯模板之前做一些事情，比如改變模板某些內(nèi)容。手動(dòng)引導(dǎo)方式將會(huì)如下：

<!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來開發(fā)程序

  • 首先在對(duì)應(yīng)的頁面引入：angular-1.2.0.min.js

  • 接著引入sea.js(SeaJS是一個(gè)遵循CommonJS規(guī)范的JavaScript模塊加載框架，可以實(shí)現(xiàn)JavaScript的模塊化開發(fā)及加載機(jī)制,如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等模塊定義規(guī)范的實(shí)現(xiàn),我們可以開發(fā)出很多模塊.但光有一堆模塊不管用,我們還得讓它們能跑起來,使用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',[]);

   //將對(duì)應(yīng)的服務(wù)引入進(jìn)來，并使用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對(duì)外公布一個(gè)入口

         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){  

//下面指令的定義中，對(duì)應(yīng)的紅色參數(shù)要一一對(duì)應(yīng)，否則無法注入對(duì)象；

//或者前面可以不要，直接寫function中的參數(shù)即可

   md.directive('backwardEoaPage',

['$http','backwardEoaPageService',function($http,backwardEoaPageService){

         return {

            restrict: 'A',

            templateUrl:'./backwardEoaPage.html',

            scope: {

                isShow: '='//這是指令對(duì)外暴露的接口，=表示是值傳遞

            },

            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請(qǐng)求,springmvc解析不了

.)在angularJS中與遠(yuǎn)程HTTP服務(wù)器交互時(shí)會(huì)用一個(gè)非常關(guān)鍵的服務(wù)-$http。

.)$http的使用方式和jquery提供的$.ajax操作比較相同，均支持多種method的請(qǐng)求，get、post、put、delete等。

$http(config).success(function(data,status,headers,config){}).error(function(data,status,headers,config){});

 

config為一個(gè)JSON對(duì)象，其中主要包含該請(qǐng)求的url、data、method等，如{url:"login.do",method:"post",data:{name:"12346",pwd:"123"}}

. method  {String} 請(qǐng)求方式e.g."GET"."POST"

  . params {key,value} 請(qǐng)求參數(shù)，將在URL上被拼接成？key=value

. data {key,value} 數(shù)據(jù)，將被放入請(qǐng)求內(nèi)發(fā)送至服務(wù)器

 參考文檔：http://www.cnblogs.com/sytsyt/p/3297872.html

 

  • angularjs的post訪問方法：

$http({method: 'POST', url: url, data:backwardCancelPlyDTO})  

.success(function(data, status, headers){

handle(data);}

);

對(duì)于這樣的請(qǐng)求，springmvc的controller如何處理；

a)在對(duì)應(yīng)的入?yún)?/span>Bean前面添加@RequestBody注解---因?yàn)?/span>angularjs post參數(shù)值放到請(qǐng)求Body中了，而且入?yún)⑹菍?duì)應(yīng)的json數(shù)據(jù)，需要進(jìn)行處理，才能封裝到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、前臺(tái)需要設(shè)置'contentType' 
3、前臺(tái)JSON對(duì)象要轉(zhuǎn)成字符串,如JSON.stringify(JsonObject), 
4、后臺(tái)參數(shù)得用@RequestBody 注解 
5、如果你是異步處理返回的JSON值（比如Map等）則@ResponseBody是需要的 
6、這個(gè)時(shí)候，你的JsonObject 就會(huì)自動(dòng)轉(zhuǎn)為queryVO這個(gè)Bean 

備注：如果使用jquery的ajax進(jìn)行請(qǐng)求，后臺(tái)就不需要使用@RequestBody注解進(jìn)行處理了；---這就是angular與jquery的不同；

 

b)還有就是

angularjs中的post請(qǐng)求參數(shù)必須使用data進(jìn)行傳遞；不能使用params(供get專用的)

$http({method: 'POST', url: url, data:backwardCancelPlyDTO})

$http({method: 'GET', url: url, params:backwardCancelPlyDTO})

 

 

 

 

  • springmvc接收json格式的數(shù)據(jù)在xml配置文件中還需要進(jìn)行如下的配置

下面的配置是對(duì)方法的json數(shù)據(jù)進(jìn)行處理；

<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

請(qǐng)下載jackson-all-1.8.3.jar，因?yàn)?/span>1.9.0有問題；

 

  • springmvc輸出json格式的數(shù)據(jù)，供ajax使用,步驟如下：

  • 在AnnotationMethodHandlerAdapter處理類中需要注入如下的轉(zhuǎn)換器

org.springframework.http.converter.json.MappingJacksonHttpMessageConverter

2)方法的返回值使用如下的注解這樣就可以了；

@ResponseBody

@RequestMapping("/test/login.do")

 public User testLogin(@RequestBody User user,HttpServletResponse res, HttpServletRequest req) {


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手