用requirejs把ionic项目模块化

最新推荐文章于 2019-08-16 11:47:00 发布

zuo-yiran

最新推荐文章于 2019-08-16 11:47:00 发布

阅读量1.7k

点赞数

分类专栏： ionic requirejs 文章标签： require-js ionic模块化 javascript

本文链接：https://blog.csdn.net/zuoyiran520081/article/details/71171013

版权

ionic 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

requirejs

3 篇文章 0 订阅

订阅专栏

新建项目什么的就不计了，直接开始。
一.项目的结构如图：
这里写图片描述

二.主要部分
1.首页的修改：
去掉那些引用的js，添加一个
<script data-main="js/main" src="lib/require.js"></script>
代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>TEST</title>
    <link type="text/css" href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">


</head>

<body ng-controller="mainCtrl as mc" class="platform-android platform-cordova platform-webview">
    <ion-nav-view></ion-nav-view>
    <script src='cordova.js'></script>
    <script data-main="js/main" src="lib/require.js"></script>

</body>
</html>

2.main.js的编写

require.config({
    paths:{
        fastclick:'../lib/fastclick',
        async:'../lib/async',
        domReady:'../lib/domReady',

        angular:'../lib/ionic/js/angular/angular',
        angularAnimate:'../lib/ionic/js/angular/angular-animate',
        angularSanitize:'../lib/ionic/js/angular/angular-sanitize',
        uiRouter:'../lib/ionic/js/angular-ui/angular-ui-router',
        ngResource:'../lib/ionic/js/angular/angular-resource',

        ionic:'../lib/ionic/js/ionic',
        ionicAngular:'../lib/ionic/js/ionic-angular',

        app:'app',
        config:'config',

        services:'services/services',
        mainServices:'services/mainServices',
        indexServices:'services/indexServices',
        moreServices:'services/moreServices',
        backButtonServices:'services/backButtonServices',
        chatsServices:'services/chatsServices',

        chatsCtrl:'controllers/chatsCtrl',
        chatsdetailCtrl:'controllers/chatsdetailCtrl',
        mainCtrl:'controllers/mainCtrl',
        indexCtrl:'controllers/indexCtrl',
        sortCtrl:'controllers/sortCtrl',
        moreCtrl:'controllers/moreCtrl',
        controllers:'controllers/controllers',

        directives:'directives/directives',
        mainDirective:'directives/mainDirective',
    },
    waitSeconds: 40,
    shim:{
        cordova:{exports: 'cordova'},  
        cordovaDevice:{deps: ['cordova'], exports: 'cordovaDevice'},
        cordovaSplashScreen:{deps: ['cordova'], exports: 'cordovaSplashScreen'},
        cordovaStatusbar:{deps: ['cordova'], exports: 'cordovaStatusbar'},
        cordovaKeyboard:{deps: ['cordova'], exports: 'cordovaKeyboard'},
        angular : {exports : 'angular'},
        app : {exports : 'app'},
        angularAnimate : {deps: ['angular']},
        angularSanitize : {deps: ['angular']},
        uiRouter : {deps: ['angular']},
        ngResource: {deps: ['angular']},
        ionic :  {deps: ['angular'], exports : 'ionic'},
         ionicAngular: {deps: ['angular', 'ionic','uiRouter', 
                              'angularAnimate', 'angularSanitize',
                              'ngResource'],exports: 'ionicAngular'}                      
    },
    priority:['angular','ionic'],
    deps:['bootstrap']
});

注：bootstrap是启动项，angular 初始化，具体内容为：

define(['ionic', 'angular', 'routes', 'app'], function (ionic, angular,routes, app) {
    'use strict';
    var $html,
        onDeviceReady = function () {
            angular.bootstrap(document, [app['name']]);
        };

    if (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1) {
        // URL: Running in Cordova/PhoneGap
        document.addEventListener("deviceready", onDeviceReady, false);
    }
    if (typeof cordova === 'undefined') {
        $html = angular.element(document.getElementsByTagName('html')[0]);
        angular.element().ready(function () {
            try {
                angular.bootstrap(document, [app['name']]);
            } catch (e) {
                console.error(e.stack || e.message || e);
            }
        });
    }
});

3.app.js的编写（创建app module，这里直接把service和controller进行了分离）：

define(['angular',
        'ionic',
        'uiRouter',
        'ionicAngular',
        'services',
        'controllers'
        ],

    function (angular,ionic ,uiRouter) {
        'use strict';
        var app = angular.module('app', [
            'ngResource',
            'ionic',
            'app.controllers',
            'app.services',
            'ui.router'
        ]);
    return app;
});

注：这里把service和controller进行了分离，新建两个文件夹，分别命名为service和controller，之后把在各自文件夹内新建同名的js，便于文件的分离和关联。
controller.js的编写：

define(['app', 'mainCtrl', 'indexCtrl', 'moreCtrl','chatsCtrl','chatsdetailCtrl', 'services'], function(app){
    'use strict';
    var controllers = angular.module('app.controllers', ['app.services', 'app.config']);

    controllers.controller('mainCtrl', require('mainCtrl'));
    controllers.controller('indexCtrl', require('indexCtrl'));
    controllers.controller('moreCtrl', require('moreCtrl'));

    controllers.controller('chatsCtrl', require('chatsCtrl'));
    controllers.controller('chatsdetailCtrl', require('chatsdetailCtrl'));

    return controllers;

});

services.js的编写：

define(['app','config', 'mainServices', 'indexServices','moreServices','backButtonServices','chatsServices'], 
    function (app) {
        'use strict';
        var config = require('config'),
            services = angular.module('app.services', ['app.config', 'ngResource']);

        services.factory('$mainServices', require('mainServices'));
        services.service('$indexServices', require('indexServices'));
        services.service('$moreServices', require('moreServices'));
        services.factory('$backButtonServices', require('backButtonServices'));

        //通讯录(chats页面)
        services.service('$chatsServices',require('chatsServices'));

    return services;
});

这样基本的框架就好了，下面就是具体页面的编写及服务调用。
其实上面的代码中已经有需要的js文件了，这里具体说明一下：
根据文件的结构可以看出来大致分为3块，首页、chats和更多的页面。
这里调数据都是统一写的本地的假数据。
首页json：

    {
    "banner": {
        "item":[
            {
                "img":"images/tmp/1.jpg", 
                "url":"www.baidu.com"
            },
            {
                "img":"images/tmp/2.jpg",
                "url":"http://www.sina.com.cn/"
            },
            {
                "img":"images/tmp/3.jpg",
                "url":"http://www.qq.com/"
            }
        ]
    }, 
    "coupon": {
        "item": [
            {
                "time": "2016.01.01-2017.05.14", 
                "money": 787, 
                "use": 7878, 
                "isGet": 0, 
                "url": "http://mall.e-wj.dev:40080/store/41"
            }, 
            {
                "time": "2016.01.01-2017.05.14 ", 
                "money": 787, 
                "use": 7878, 
                "isGet": 1, 
                "url": "http://mall.e-wj.dev:40080/store/44"
            }
        ]
    }, 
    "tejia": {
        "item": [
            {
                "url": "http://mall.e-wj.dev:40080/ware/43", 
                "img": "http://image.tianjimedia.com/uploadImages/2011/306/EQ2E3ZUPNMNV.jpg", 
                "name": "test_1_特卖", 
                "nowMoney": 40, 
                "oldMoeny": 45
            }, 
            {
                "url": "http://mall.e-wj.dev:40080/ware/43", 
                "img": "../../json/60.jpg", 
                "name": "test_2_特卖", 
                "nowMoney": 40, 
                "oldMoeny": 45
            },
            {
                "url": "http://mall.e-wj.dev:40080/ware/43", 
                "img": "http://tupian.qqjay.com/u/2013/1127/19_222949_14.jpg", 
                "name": "test_3_特卖", 
                "nowMoney": 40, 
                "oldMoeny": 45
            }, 
            {
                "url": "http://mall.e-wj.dev:40080/ware/43", 
                "img": "http://tupian.qqjay.com/u/2013/1127/19_222949_14.jpg", 
                "name": "test_4_特卖", 
                "nowMoney": 40, 
                "oldMoeny": 45
            }
        ]
    }
}

chats页json：

{
    "data": {
        "item":[{
            "id": 0,
            "name": "Ben Sparrow",
            "lastText": "You on your way",
            "face": "img/ben.png"
          }, {
            "id": 1,
            "name": "Max Lynx",
            "lastText": "Hey, its me",
            "face": "img/max.png"
          }, {
            "id": 2,
            "name": "Adam Bradleyson",
            "lastText": "I should buy a boat",
            "face": "img/adam.jpg"
          }, {
            "id": 3,
            "name": "Perry Governor",
            "lastText": "Look at my mukluks",
            "face": "img/perry.png"
          }, {
            "id": 4,
            "name": "Mike Harrington",
            "lastText": "This is wicked good ice cream.",
            "face": "img/mike.png"
          }]
    }
}

页面的完整代码如下：
首页html：

<ion-view  view-title="我的首页">

    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear"   ng-click="sideLeftMenu()" ng-class="{true: 'ion-navicon', false:'ion-arrow-left-c'}[isActive.leftActive]"></button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <button class="button button-icon button-clear " ng-click="sideRightMenu()" ng-class="{true: 'ion-search', false:'ion-arrow-right-c'}[isActive.rightActive]"></button>
    </ion-nav-buttons>

    <ion-content class="has-header" overflow-scroll='false'>    
        <ion-slide-box ng-if="bannerList" on-slide-changed="slideHasChanged($index)"  delegate-handle="slideimgs" does-continue="true"  auto-play="true"  does-continue="true" slide-interval="2000">
            <ion-slide ng-repeat="b_item in bannerList">
                <a ng-href="{{b_item.url}}" >
                    <img src="{{b_item.img}}" class="full-image" >
                </a>
            </ion-slide>
        </ion-slide-box>
        <div class="padding">
            <h2>Welcome to Ionic</h2>
            <p>
            This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the <a href="http://market.ionic.io/starters" target="_blank">Ionic Market</a>.
            </p>
            <p>
              To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code>
            </p>
            <p>
            If you need help with your app, join the Ionic Community on the <a href="http://forum.ionicframework.com" target="_blank">Ionic Forum</a>. Make sure to <a href="http://twitter.com/ionicframework" target="_blank">follow us</a> on Twitter to get important updates and announcements for Ionic developers.
            </p>
            <p>
              <b>Psst!</b> - Try <a href="http://view.ionic.io/">Ionic View</a> to easily share and test your app with clients and co-workers.
            </p>
        </div>

        <div class="pane-list pane-list-te">
            <div class="pane-list-top row">
                <em>特</em>
                <h3>本周特价</h3>
                <a href="" class="pane-list-top-btn">查看更多</a>
            </div>
            <ul class="row">
                <li class="col col-50" ng-repeat="t_item in dazheList">
                    <a href="{{t_item.url}}">
                        <img ng-src="{{t_item.img}}">
                    </a>
                    <p class="pane-list-te-name" ng-bind="t_item.name"></p>
                    <div>
                        <span class="pane-list-te-nm" ng-bind="'¥'+t_item.nowMoney"></span>
                        <span class="pane-list-te-om" ng-bind="'¥'+t_item.oldMoeny"></span>
                    </div>
                </li>
            </ul>
        </div>

    </ion-content>
</ion-view>

首页controller.js：

define(['mainCtrl'], function () {
    'use strict';
    function ctrl($scope, $mainServices, $indexServices, $ionicTabsDelegate, $ionicSlideBoxDelegate) {
        $mainServices.showLoading();
        $indexServices.get(function(data){
            console.log(data)
            if(data !== null && data !== undefined){
                $mainServices.hideLoding();
            }
            $scope.bannerList = data.banner.item;
            $scope.couponList = data.coupon.item;
            $scope.dazheList = data.tejia.item;
        });
    }

    ctrl.$inject = ['$scope', '$mainServices', '$indexServices', '$ionicTabsDelegate', '$ionicSlideBoxDelegate'];
    return ctrl;

});

首页services.js:

define(function(){
    'use strict'
    var service = function($http){
        return {
            get:function(callback){
                $http.get('../../json/index.json').success(function(data){//本地地址
                   return callback(data);
                });
            }
        }
    };
    service.$inject = ['$http'];
    return service;
});

切换页面html：

<ion-side-menus>
    <ion-side-menu-content>
        <ion-nav-bar class="bar-energized nav-title-slide-ios7 title-main">
            <ion-nav-back-button class="button-icon">
                <span class="icon ion-ios7-arrow-left"></span>
            </ion-nav-back-button>
        </ion-nav-bar>

        <!--tabs start-->
        <ion-tabs class="tabs-icon-top tabs-color-active-positive">
            <ion-tab title="首页" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/index">
                <ion-nav-view name="tab-index"></ion-nav-view>
            </ion-tab>
            <ion-tab title="chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
                <ion-nav-view name="tab-chats"></ion-nav-view>
            </ion-tab>
            <ion-tab title="更多" icon-on="ion-ios-more-outline"  icon-off="ion-ios-more"   href="#/tab/more">
                <ion-nav-view name="tab-more"></ion-nav-view>
            </ion-tab>
        </ion-tabs>
        <!--tabs end-->
    </ion-side-menu-content>
    <!-- 左侧滑动 -->
    <ion-side-menu side="left"  >
     <!--  <div ng-include="'/templates/etc/sideMenuLeft.html'"></div>  -->
      <ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
        <ion-content has-header="true" drag-content="true">
            <ion-list>
                <ion-item href="#">我是侧边栏(无用1号)</ion-item>
                <ion-item href="#">我是侧边栏(无用2号)</ion-item>
                <ion-item href="#">我是侧边栏(无用3号)</ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>

    <!-- 右侧滑动 -->
    <ion-side-menu side="right">
        <ion-header-bar class="bar bar-header bar-dark">
            <label class="item item-input stable-dark" >
                <input type="search" class="dark" placeholder="我是搜索框(但是没用)"/>
            </label>
            <button class="button right-button button-icon button-clear ion-search"></button>
        </ion-header-bar>

        <ion-content has-header="true"></ion-content>
    </ion-side-menu>
</ion-side-menus>

chats页面html：

<ion-view view-title="chats">
    <style type="text/css">
    </style>
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear"   ng-click="sideLeftMenu()" ng-class="{true: 'ion-navicon', false:'ion-arrow-left-c'}[isActive.leftActive]"></button>
    </ion-nav-buttons>
    <ion-content scroll="true" class="">

        <ion-list>
          <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.chatdata}}">
            <img ng-src="{{chat.face}}">
            <h2>{{chat.name}}</h2>
            <p>{{chat.lastText}}</p>
            <i class="icon ion-chevron-right icon-accessory"></i>
          </ion-item>
        </ion-list>

    </ion-content>
</ion-view>

对应的chatsCtrl.js(controller)：

define(function () {
    'use strict';
    function ctrl($scope, $mainServices,$chatsServices) {
        $mainServices.showLoading();
        $chatsServices.get(function(data){
            angular.forEach(data.data.item,function(i){console.log(i)
                i.chatdata=encodeURIComponent(encodeURIComponent(JSON.stringify(i)))
            })
            $scope.chats = data.data.item;console.log($scope.chats)
        });

        $mainServices.hideLoding();
    }

    ctrl.$inject = ['$scope', '$mainServices','$chatsServices'];
    return ctrl;

});

对应调的服务chatsServices（services）：

define(function(){
    'use strict'
    var service = function($http){

        return {
            get:function(callback){
                $http.get('../../json/chats.json').success(function(data){//本地地址
                    return callback(data);
               });
           }
        }
    };
    service.$inject = ['$http'];
    return service;
});

chats详情页面html：

<ion-view view-title="{{chat.name}}">
  <ion-content class="padding">
    <img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
    <p>
      {{chat.lastText}}
    </p>
  </ion-content>
</ion-view>

详情页面的chatsdetailCtrl.js:

define(function () {
    'use strict';
    function ctrl($scope, $mainServices,$stateParams) {
        $scope.chat = JSON.parse(decodeURIComponent(decodeURIComponent($stateParams.chatdata)));
        //$scope.chat = JSON.parse($stateParams.chat);console.log(typeof $scope.chat)
        console.log($stateParams.chatdata)
    }

    ctrl.$inject = ['$scope', '$mainServices','$stateParams'];
    return ctrl;

});

注：这里详情的信息是从chats页面整体带过来的对象，必须进行编码，里面有符号的问题，不进行两次编码则会使页面跳转出问题或者传参不全报错等。

除此之外，有个routes.js用来写页面间的跳转之类的：

define(['app'], function(app) {
    'use strict';

    app.config(['$stateProvider', '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $stateProvider
            // setup an abstract state for the tabs directive
                .state('tab', {
                url: '/tab',
                abstract: true,
                templateUrl: 'templates/tabs.html'
            })
            // Each tab has its own nav history stack:
            .state('tab.index', {
                url: '/index',
                views: {
                    'tab-index': {
                        templateUrl: 'templates/site/index.html',
                        controller: 'indexCtrl'
                    }
                }
            })
            .state('tab.chats', {
                url: '/chats',
                views: {
                    'tab-chats': {
                        templateUrl: 'templates/chats/index.html',
                        controller: 'chatsCtrl'
                    }
                }
            })
            .state('tab.detail', {
                url: '/chats/:chatdata',
                views: {
                    'tab-chats': {
                        templateUrl: 'templates/chats/detail.html',
                        controller: 'chatsdetailCtrl'
                    }
                }
            })
            .state('tab.more', {
                url: '/more',
                views: {
                    'tab-more': {
                        templateUrl: 'templates/etc/more.html',
                        controller: 'moreCtrl'
                    }
                }
            })
            // if none of the above states are matched, use this as the fallback
            $urlRouterProvider.otherwise('/tab/index');
    }]);
});