标签：
最近公司在搞新项目，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 {
@Override
protected 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就做完了。
之后如果有时间我再整理其他的相关知识然后分享给大家。
标签：
原文地址：http://blog.csdn.net/qq522935502/article/details/45059877
