140、angular模块的依赖与执行顺序，自动化，换肤

墨蓝 2023-06-05 08:22 4阅读 0赞

注意：本文仅供作者自己观看
    
    gulp的作用：（1）自动化测试，一旦增加、删除、改动被监视文件夹下的文件，就会将所有文件自动注入到index.html文件，然后重载。（2）打包，index.html里有css和js文件，将其中“可查找”的文件打包并以指定名称放到指定的文件夹里，“不可查找”的文件，在打包时将被忽略。
    
    分权实现方案：（1）将本身份要展示的所有页面及对应状态，放入一个文件menu.js里；将本身份要展示的所有数据，放入一个服务account_data里。（2）$state.go(state)首次执行时，会向后台请求数据，根据后台返回的内容，从menu.js中抽出部分页面，在前端展示，同时将后台返回的其它数据存放到account_data里供前端渲染页面时用。
    
    main.js文件的执行步骤：（1）main.js文件刚开始只“声明依赖”，不执行config、run，往下执行下面文件；（2）遇到“依赖定义”就给main.js的“声明依赖”注入，注满后执行config、run；（3）从模块中找到<my-app></my-app>的定义（directive）并渲染。 
    
    <!DOCTYPE html>
    <html lang="en" ng-controller="mainCtrl" ng-cloak>
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <title ng-bind="r_g_company.info.title"></title>
      <link rel="shortcut icon" ng-href="{
        {r_g_company.info.favicon}}">
      <link rel="stylesheet" href="../../static/common/bootstrap.css">
      <link rel="stylesheet" href="../../static/common/sliderCaptcha/slidercaptcha.css">
      <link rel="stylesheet" href="../../static/common/editor.md/css/editormd.min.css">
      <link rel="stylesheet" href="../../static/common/animate.min.css">
      <link rel="stylesheet" href="../../static/common/angular.treeview.css">
      <link rel="stylesheet" href="../../static/common/nprogress/nprogress.css">
      
      
      <link rel="stylesheet" href="module/common-css/animate.css">
      <link rel="stylesheet" href="module/common-css/boot-reset.css">
      <link rel="stylesheet" href="module/common-css/bower.css">
      
      
    </head>
    <body οndragstart="return false;">
      <my-app></my-app>
    </body>
    <script src="../../static/common/jquery.js"></script>
    <script src="../../static/common/jquery-media.js"></script>
    <script src="../../static/common/sliderCaptcha/longbow.slidercaptcha.js"></script>
    <script src="../../static/common/angular.js"></script>
    <script src="../../static/common/angular-ui.js"></script>
    
    
    <script src="config/main.js"></script>
    <script src="config/ctrl.js"></script>
    <script src="config/project/cy/logo.js"></script>
    <script src="config/project/cy/menu.js"></script>
    <script src="module/common-serve/data-g.js"></script>
    <script src="module/common-serve/date.js"></script>
    ......
    <script src="module/role/cy/role-source.js"></script>
    
    
    
    
    
    </html>
    //main.js
    (function () {
      angular
        .module('app', [
          'ui.router',
          'angularTreeview',
          'ng-layer',
          'countUpModule',
          'common-dir',
          'common-serve',
          'module-login',
          'module-role',
        ])
        .config(function ($stateProvider, $urlRouterProvider, menu) {
          angular.forEach(menu, function (item) {
            angular.forEach(item.subs, function (it) {
              $stateProvider
                .state(it.state, it.cfg);
            });
          });
          $urlRouterProvider.otherwise('/login');
        })
        .run(function ($rootScope, account_m, app_init, account_data) {
          app_init
            .size_init()
            .key_init()
            .account_init();
          $rootScope.$on('$stateChangeStart',
            function (event, toState) {
              NProgress.start();
              account_m.start(event, toState);
            }
          );
          $rootScope.$on('$stateChangeSuccess',
            function (event, toState) {
              account_data.state = toState.name;
              NProgress.done();
            }
          );
        });
    })();
    //index.js
    (function () {
      angular
        .module('common-dir', [])
        .directive('myApp', function () {
          console.log('myApp');
          var dirAlert = '<dir-alert></dir-alert>';
          var dirCommon = '<dir-common style="height:100%"></dir-common>';
          var dirTip = '<dir-tip></dir-tip>';
          var dirLoading = '<dir-load></dir-load>';
          var template = ''.concat(dirCommon, dirAlert, dirTip, dirLoading);
          return {
            restrict: 'E',
            template: template,
            scope: false,
            link: function () { }
          };
        });
    })();
    
    //自动化
    gulp.task('default', function () {
      var proxy_ = [
          '/system',
          '/event',
          '/study',
          '/seclity',
          '/settings',
          '/icaudit',
          '/login',
          '/logs',
          '/usermgr',
          '/proptyaudit',
          '/datclct',
          '/intfmgr',
          '/logout',
          '/protocol',
          '/ailearn',
          '/report',
          '/logio',
          '/ump',
          '/permission'
        ].map(function (value) {
          var a = url.parse(config.address + value);
          a.route = value;
          return proxy(a);
        });
        browserSync.init({
          port: 8900,
          notify: false,
          open: false,
          server: {
            baseDir: ['src'],
            directory: false,
            index: 'index.html',
            middleware: proxy_,//这里面的地址，是服务器真实地址，开发环境下，请求服务器内容。
            routes: {//这里的地址，前面是服务器真实地址，后面是本地真实地址，开发环境下，请求本地内容。
              '/module/static/img': 'src/img',
              '/config/project/static/img': 'src/img',
              '/static/img': 'src/img',
              '/static/configuration': 'src/config/project/' + configDirname + '/config',
              '/static/common': 'src/module/common-vendor',
              '/static/brows': 'src/brows',
              '/dev_config': ''
            }
            //没在这里处理的地址，是服务器的真实地址，也是本地真实地址，开发环境下，请求本地内容。
          }
        }, function () {
          reload();
        });
    });
    
     //换肤
    (function () {
      function startAppBuild(config) {
        angular
          .module('app')
          .value('company', config);
        angular.bootstrap(document, ['app']);
      }
      $.get('../../static/configuration/defaultSettings.js?' + new Date().getTime()).then(function (res) {//前端从后台获取静态文件，将其存为一个服务，注入到模块中。
        var config = eval(res.replace('node_replace_key', ''));
        $.get('../../static/configuration/settings/setting.json?' + new Date().getTime(), {})
          .then(function (settings) {
         //
            config = eval(res.replace('node_replace_key', settings.existImg ? '../../static/configuration/settings/img/' : ''));
            settings.title ? config.info.title = settings.title : '';
            settings.copyright ? config.info.copyright = settings.copyright : '';
            settings.loginTopTxt ? config.logoPage.info.topText = settings.loginTopTxt : '';
            settings.loginBottomTxt ? config.logoPage.info.bottomText = 
            // 报表功能
            if (settings.report) {
              for (var i in settings.report) {
                var reportDefault = config.reportPage[i];
                if (reportDefault) {
                  angular.merge(reportDefault, settings.report[i]);
                }
              }
            }
            startAppBuild(config);
          })
          .catch(function () {
            startAppBuild(config);
          });
      });
    })();

转载于:https://www.cnblogs.com/gushixianqiancheng/p/11414908.html