140、angular模块的依赖与执行顺序，自动化，换肤-优快云博客

注意：本文仅供作者自己观看

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">
  <!-- build:css(src) styles/all.min.css -->
  <!-- inject: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">
  <!-- endinject -->
  <!-- endbuild -->
</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>
<!-- build:js(src) scripts/all.min.js -->
<!-- inject:js -->
<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>
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
</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);
      });
  });
})();