前台模块化RequireJS+anjularJS的实战应用（二）---- 实践应用

       上篇博客讲到了requireJS的理论基础，本篇讲述一下在项目中的实践应用，项目采用ionic与anjularjs实现课表功能。先来2张截图：

                               

        采用requireJS之后，各个js之间调用与包含关系如下图：

                                

        首先将js进行模块化处理（上图中a,b,c类），代码结构遵循AMD样式结构，用define([],funciton(……))进行定义，函数结尾返回函数名称，例如子类userCtrl.js：

define([],function(){
  'use strict';//以严格模式运行
  function ctrl($scope,$ionicPopup,$state,lessonService){
    $scope.findCourseInfo=function(lessonCode){
      lessonService.query({lessonCode:lessonCode},function(data){
        if(data.result==true){
          $scope.lessonInfo=data;
          $state.go("lessonInfo");
        }else{
          var alerPopup=$ionicPopup.alert({
            title:'提示',
            template:'该课程不存在详细信息',
            okType:'button-balanced'
          });
        }
      },function(){});
    }
  }
  return ctrl;
});

 
       该类是controllers的一个细小颗粒，我们可以根据需要，把这写个小功能模块组装起来完成自己的功能。组装成一个大功能模块controllers.js如下：

       

define(function (require) {
  'use strict';
//var services = require('services/services');
  var controllers = angular.module('itoo-basic-curriculumschedule.controllers', []);
  //controllers.controller('controller名字',require(对应的文件地址));
  controllers.controller('userCtrl',require('controllers/userCtrl'));
  controllers.controller('CourseInfoCtr',require('controllers/CourseInfoCtr'));
  controllers.controller('lessonInfoController',require('controllers/lessonInfoController'));
  controllers.controller('WeekLessonController',require('controllers/WeekLessonController'));
  controllers.controller('TabsCtrl',require('controllers/TabsCtrl'));
  controllers.controller('SlideController',require('controllers/SlideController'));
  controllers.controller('NowMonth',require('controllers/NowMonth'));
  controllers.controller('timeCtrl',require('controllers/timeCtrl'));
  return controllers;
});

      根据自己的分类方式，将这些功能模块进行分类，可以放到不同的文件夹下，便于查找，下面是我对这些细小颗粒的分类：

                                                                  

          最后通过APP组装自己需要的大功能模块，为前台网页服务，代码如下：

define(['../controllers/controllers','services/services','routes'],function(){  //引入所需要的js库
  'use strict';
   var app=angular.module('itoo-basic-curriculumschedule', ['ionic','itoo-basic-curriculumschedule.controllers',
    'itoo-basic-curriculumschedule.routes',
    'itoo-basic-curriculumschedule.services'])
    .config(['$ionicConfigProvider', function($ionicConfigProvider) {
      $ionicConfigProvider.tabs.position('bottom'); // other values: top
    }])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          cordova.plugins.Keyboard.disableScroll(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

    .constant('localhostUrl', '后台服务地址');
  return app;
});

        遵循requirejs的结构规则，采用bootstrap配置前台启动时加载的js文件：

define(['app'], function (app) {
  'use strict';
  angular.element(document).ready(function () {
    console.log("bootstrap ready");
    var startApp = function () {
      angular.bootstrap(document,[app.name]);
    }
    var onDeviceReady = function () {
      console.log("on deviceready");
      angular.element().ready(function () {
        startApp();
      });
    }
    if (typeof cordova === 'undefined') {
      startApp();
    } else {
      document.addEventListener("deviceready", onDeviceReady, false);
    }
  });
});

         使用main.js设置基目录和启动文件：

require.config({
  baseUrl:'js',//基目录
  deps: [
    'bootstrap'//启动
  ]
});

      最后在前台html引用：

                       

  

        总结：

        与后台框架一样，js的使用也要遵循一定的规则。模块化是一种设计思想，相当于js的设计框架一般，我们要根据系统的大小，性能需求，合理应用。关于模块化划分出细小颗粒后，导致js文件过多，前台请求负担加大的问题将在下篇博客进行解决，敬请期待。

学习链接：

           

           前台模块化RequireJS+anjularJS的实战应用（一）---- 理论基础：

        ionic项目应用requireJs前端模块化：http://blog.csdn.net/u010176014/article/details/51442156

  

        前端工程之模块化：http://fex.baidu.com/blog/2014/03/fis-module/