前台模块化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/