当前位置:   article > 正文

angularjs——模块化与mvc_angular2.x mvc与模块化

angular2.x mvc与模块化

        车辆管理系统arcgis移植已经基本完成。开始下一件事情,搭建一个视频培训系统。这个系统准备用angularjs+微服务架构的方式搭建,如果有可能再引入CDN。

        先用一天时间大致看完了《angularjs权威教程》,由于js的高级编程还算比较扎实,对angularjs基本上已经有了个认识,主要的一个理解要点就是原型继承。

        今天就用该技术把框架搭建了一下,然后把登录功能给做了。现在就初步谈谈angularjs的使用感受。

        1、angularjs很容易实现模块化的架构,因为它已经具备了这个功能

        2、angularjs是一个mvc框架,说一下我对angularjs的mvc的理解

               view为前端的视图,可以是任何的标签。

               model可以通过ng-model将对象与标签进行绑定。

               controller为view与model的粘合剂。

               service和指令:个人认为controller应该尽量简洁,业务逻辑可以交给service和指令完成。这里有个很有意思的事情是,service是一个全局的单例。

         3、依赖注入,没错,angularjs提供了依赖注入!多么让人激动啊!

         4、不同的module,controller之间已经实现了命名空间进行隔离

         5、静态化,angular据说支持模板技术,因此方便静态化

         6、路由功能,该功能也是非常有意思的,但是这里先不涉及

        因此我们搭建的前端架构可以是这样的:

       

 
 

         因此有如下的目录组织:

        

          下面上核心代码,为了静态化,不再使用jsp:

           1、login.html (登录模块的视图)

          

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>登录</title>
  5. <link rel="shortcut icon" href="pulse.ico" />
  6. <link rel="stylesheet" href="/ZVideo-MVC/styles/login/login.css"></link>
  7. <style type="text/css">
  8. :root #content > #right > .dose > .dosesingle,
  9. :root #content > #center > .dose > .dosesingle
  10. { display: none !important; }
  11. input.ng-invalid {
  12. border: 1px solid red;
  13. }
  14. input.ng-valid {
  15. border: 1px solid green;
  16. }
  17. </style>
  18. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  19. <meta http-equiv="description" content="this is my page">
  20. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  21. </head>
  22. <body>
  23. <div ng-app=app.login ng-controller="LoginController">
  24. <form id="login" name="loginForm">
  25. <h1>中森视频培训系统登陆</h1>
  26. <fieldset id="inputs">
  27. <input id="loginname" name="loginname" placeholder="请输入用户名(工号)" autofocus="" type="text" ng-model="user.loginname.value" ng-required="true">
  28. <div ng-show="loginForm.loginname.$dirty && loginForm.loginname.$invalid">
  29. <span style="color:red"
  30. ng-show="loginForm.loginname.$error.required">
  31. {{user.loginname.requiredTip}}
  32. </span>
  33. </div>
  34. <input id="password" name="password" placeholder="请输入密码(oa)" type="password" ng-model="user.password.value" ng-required="true">
  35. <div ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
  36. <span style="color:red"
  37. ng-show="loginForm.password.$error.required">
  38. {{user.password.requiredTip}}
  39. </span>
  40. </fieldset>
  41. <fieldset id="actions">
  42. <div ng-model="user" ng-show="user.error.tip">
  43. <span style="color:red"
  44. ng-show="user.error.tip">
  45. {{user.error.tip}}
  46. </span>
  47. </div>
  48. <input id="submit" value="登录" type="submit" ng-disabled="loginForm.$invalid" ng-click="submit()">
  49. <a href="">忘记密码?</a>
  50. </fieldset>
  51. </form>
  52. </div>
  53. <script src="../../jslib/base/loader.js"></script>
  54. <script>
  55. Loader.loadScript("../../jslib/base/angular-1.2.13.min.js",function(){
  56. Loader.loadScript("../../scripts/loginModule/app.js",function(){
  57. Loader.loadScript("../../scripts/loginModule/controllers/loginController.js",function(){
  58. Loader.loadScript("../../scripts/loginModule/services/userService.js",function(){
  59. })})})});
  60. </script>
  61. </body>
  62. </html>

这个文件主要是angular的指令应用,另外Loader是我写的一个js动态加载工具类。因为静态加载对于不同浏览器来说异步加载的数量是有限的。而通过动态加载则不会有限制。


2、app.js (登录模块的主要结构)

  1. (function(angular){
  2. angular.module('app.login',
  3. ['LoginController']
  4. );
  5. })(window.angular);

3、loginController.js(登录模块的控制器)

  1. (function(angular){
  2. angular.module('app.login',[])
  3. .controller('LoginController',function($scope,userService){
  4. $scope.user={
  5. loginname:{requiredTip:'必须填写用户名!'},
  6. password:{requiredTip:'必须填写密码!'},
  7. error:{}
  8. };
  9. $scope.submit=function(){
  10. userService.login($scope.user.loginname.value,$scope.user.password.value,function(data){
  11. if(data.success){
  12.   //登录令牌和权限通过service回调回来,分别在data.token和data.auth中
  13. //转到主页代码省略
  14. }else{
  15. $scope.user.error.tip=data.msg;
  16. }
  17. });
  18. };
  19. });
  20. })(window.angular);

注意这里的服务userService为依赖注入


4、userService.js(用户相关业务逻辑的服务)

  1. (function(angular){
  2.     angular.module('app.login')
  3.     .factory('userService',function($http){
  4.         return {
  5.             http:$http,
  6.             token:'',
  7.             auth:'',
  8.             login:function(loginname,password,fn){
  9.                 this.http({
  10. //这里将改为请求协同平台的webserver,返回登录令牌和权限
  11.                     url:'../../scripts/loginModule/services/loginOKTest.js',
  12.                     method:'GET'
  13.                     })
  14. //data,header,config,status
  15. .success(Base.bindArguments(this,function(){
  16.                         var data=arguments[0][0];
  17. fn(data[0]);
  18.                         if(data[0].success){
  19.                             this.token=token;
  20.                             this.auth=auth;
  21.                         }
  22.                     }))
  23. .error(function(data,header,config,status){
  24.                         alert("服务申请失败!");
  25.                  });
  26.             },
  27. //全局单例,因此令牌可以在任何注入的地方获得
  28.             getToken:function(){
  29.                 return this.token;
  30.             },
  31. //全局单例,因此权限可以在任何注入的地方获得
  32.    getAuth:function(){
  33.                 return this.auth;
  34.             }
  35.         };
  36.     });
  37. })(window.angular);
        
 注意server为全局单例 

base.bindArguments是一个上下文转换工具,返回一个调用call的闭包


声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/874420
推荐阅读
相关标签
  

闽ICP备14008679号