AngularJS入門案例，angularjs入門
最近公司在搞新項目，web端採用的是angularJS ，關於angularJS是什麼以及它的基本用法我這裡不做過多解釋，因為之後如果要寫的話，再一點點的去講，新人接觸ng都會被它的一些概念所弄的迷糊，我也是剛接觸幾天才把ng中的一些概念他們之間的關係搞清楚，這裡我可能說的有些不正確，也請見諒並指正。本文主要通過一個實際案例給大家講清楚關於模組，控制器，服務，指令等他們之間的關係，並完成一個登入的功能。
首先需要說的是angularJS中是一款基於MVC的前端架構，MVC就是控制器，視圖，資料模型的概念，在我們用struts的時候，資料模型其實就是我們定義在action中的javabean或者欄位，視圖就是jsp或者html 而控制器就是我們的action，這樣他們各司其職共同完成MVC，同理在angularJS中也做了MVC的分解，這是和jquery相比一個比較大的區別，但是我不認為jquery沒有MVC，只是我們平時的開發中並沒有類似的開發習慣，jquery沒有天然的提供這種開發模式所以我們才忽視了，angular提供了這些天然的支援。在angularJS中，控制器是完成一些基本的擷取資訊，跳轉，調用等工作，在控制器中我們會操作model，操作model就等於操作scope，所謂scope我理解的就是用來儲存資料的一個對象，就好比struts我們用的request對象session對象，而applcation對象就等於angular中的rootScope對象。視圖就是html，在html中我們會引入一些公用的組件例如表單，列表，下拉框等，這些ui組件我們通常會使用easyui，在angular中，我們會用指令進行封裝，當然angular提供了一些內建的指令。
這麼說還有一些亂，簡單來說就是，使用者看到 使用了指令的視圖，通過操作指令將資料參數傳遞給了控制器，控制器從scope中擷取相關參數後，調用服務完成具體商務邏輯。
另外還有兩個概念我們細說，1是模組，2是服務。 模組我理解的就是一個包，它將一類具體操作（指令，控制器，服務）做了封裝。再我們想使用某個指令或者控制器的時候只要引入這個模組（包）就可以了。當然一個模組的定義不只說非要包含這些東西，它可以單獨就包含指令，或者就包含控制器，或者就包含服務，例如
<pre name="code" class="javascript">// 定義相關模組 window.routeModule = angular.module('msd.routes',['ngRoute']); window.serviceModule = angular.module('msd.services', ['ngResource']);; window.controllerModule = angular.module('msd.controllers', ['msd.services']); window.diretiveModule = angular.module('msd.directives', ['msd.services', 'msd.controllers']); window.filterModule = angular.module('msd.filters', []); window.cookieModule = angular.module('msd.cookies', ['ngCookies']);
以上都是一些基本的常識。具體的細節我們之後再說。下面來看一個登入的demo。
首先我們需要引入一些angular的lib，因為我們的demo很簡單，所以就引入了一個js：
<script type="text/javascript" src="../../../lib/angular/angular.js"></script>
<script type="text/javascript" src="../controller/controller.js" ></script><script type="text/javascript" src="../directive/directive.js" ></script><script type="text/javascript" src="../service/loginService.js" ></script>
首先我們來看login.html檔案：頁面很簡單除了引入的一些js檔案外，我們唯寫了一行指令的代碼，而這個plus-user-form就是一個我們自訂的指令，它是一個ui組件。
<!DOCTYPE html><html ng-app="myApp"> <head> <title>登入</title> <meta charset="UTF-8"> <script type="text/javascript" src="../../../lib/angular/angular.js"></script> <script type="text/javascript" src="../controller/controller.js" ></script> <script type="text/javascript" src="../directive/directive.js" ></script> <script type="text/javascript" src="../service/loginService.js" ></script> </head> <body> <div> <plus-user-form></plus-user-form> </div> </body></html>
var myApp = angular.module('myApp',[]); //這行代碼就是指利用angular提供的module方法建立了一個名為myApp的模組，[]應該是依賴的模組或者服務。
在這個模組裡，首先我們來建立一個控制器，建立控制器的代碼如下，也是在controller.js檔案裡：
myApp.controller("loginController",function($scope,$location,$window,LoginService){$scope.login = function () {if (!$scope.username) {console.log("請輸入使用者名稱");return;}if (!$scope.password) {console.log("請輸入密碼");return;}LoginService.loginDo({'username': $scope.username,'password': $scope.password}).then(function (data) {if (data == null) {console.log("登入異常");} else {if (200 == data) {console.log("登入成功");$window.location.href = "http://www.baidu.com";} else {console.log("失敗");$window.location.href = "http://www.damai.cn";}}});};});
var myApp = angular.module('myApp');myApp.factory("LoginService",function($http,$q){return {loginDo: function(httpParams){var deferred = $q.defer();$http({method:"post",url: "/angular-war/loginServlet",params:httpParams}).success(function(data, status) {deferred.resolve(data);}).error(function(data, status) {deferred.reject(null);});return deferred.promise;}};});
通過調用 $q.defer() 可以構建一個新的 deffered 執行個體。deffered 對象用來將 Promise 執行個體與 標記任務狀態(執行成功還是不成功)的 API 相關聯。deffered 對象的方法resolve(value) ——傳入 value 解決派生的 promise。 如果 value 是一個通過 $q.reject 構造的拒絕對象(rejection) , 該promise 將被拒絕。reject(reason) ——拒絕派生的promise,並提供原因 。 這相當於通過 $q.reject構造的拒絕對象(rejection)作為參數傳遞給 resolve。notify(value) ——在 promise 執行的過程中提供狀態更新。 這在 promise 被解決或拒絕之前可能會被多次調用。
姑且先防著，之後再說。然後我們通過post或者get方法調用了伺服器的介面並將結果返回給控制器。
ok，控制器和服務我們都看過了，模組也知道怎麼回事了，頁面咱們也看了，就剩下指令了，指令directive剛才說了，可以理解為一個 UI組件，本身angularJS提供了一些內建的指令但也提供了自訂指令的API，這樣可以讓全世界的人民都來封裝優秀的指令供大家使用。這裡我們只是為了示範所以就隨便寫了寫，開啟direcitve.js檔案，代碼如下：
var myApp = angular.module("myApp");myApp.directive('plusUserForm', function () {return {restrict: "E",replace: true,templateUrl: '/angular-war/resource/js/login/html/plusUserForm.html'};});
<form name="userForm" method="post" ng-controller="loginController"> <input name="username" type="text" placeholder="請輸入使用者名稱" ng-model="username" required /> <input name="password" type="text" placeholder="請輸入密碼" ng-model="password" required /> <a ng-click="login()">登入</a></form>
OK 這樣整個流程我們就說了一遍。最後我們看下背景代碼怎麼寫的，為了方便我寫了一個servlet，代碼如下：
public class LoginServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {try {String username = req.getParameter("username");String password = req.getParameter("password");System.out.println("username:"+username+",password:"+password);PrintWriter printWriter = resp.getWriter();printWriter.print(200);printWriter.flush();printWriter.close();} catch (Exception e) {e.printStackTrace();}}}
輸入使用者名稱和密碼後點擊登入，頁面重新導向到了baidu頁面，這樣我們的demo就做完了。
之後如果有時間我再整理其他的相關知識然後分享給大家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
