ionic,angularjs,requirejs 结合开发 web

基本套路：

 

1、先安装node，配置好npm config set cache 和 npm config set prefix

2、安装android sdk  和 java 配置环境变量

3、执行npm 命令安装 npm install -g cordova  和 npm install  -g ionic

4、运行 ionic start app(名字随意) 生成如下

运行  ionic  build android 时  app目录下config.xml 文件里   android-minSdkVersion 的value  最小要对应  要和 安装的androidsdk 的 api 最小版本

 

5、ionic platform add android

6、套路最后一步 ionic run android

对于做web开发，重点的套路还是在www 文件里

 

接下来 套路里用到了几种撩的技术，我不是一个好的僚机，实现如下的tab切换，粗略撩吧，撩不好就撸。。。

当然小白撩的也有不对的地方，还是很明显的，希望互相帮助啦 

僚机目录结构 主要用到了 angular，ionic是把angular封装了的，还有requirejs（模块载入框架）

main.js  需要的js文件

require.config({
   // baseUrl:'../',
    paths:{
        cordova:'cordova',
        fastclick:'../lib/fastclick',

        async:'../lib/async',   //帮助异步引入类似下面百度地图的js
        domReady:'../lib/domReady',
        BMap:'http://api.map.baidu.com/api?v=2.0&ak=A796271dae48229367c041db82735a4c&services=false',

        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',
        mapServices:'services/mapServices',

        mainCtrl:'controllers/mainCtrl',
        indexCtrl:'controllers/indexCtrl',
        sortCtrl:'controllers/sortCtrl',
        memberCtrl:'controllers/memberCtrl',
        cartCtrl:'controllers/cartCtrl',
        mapCtrl:'controllers/mapCtrl',
        controllers:'controllers/controllers',

        directives:'directives/directives',
        mainDirective:'directives/mainDirective'
    },
    waitSeconds: 40,
    shim:{
        angular : {exports : 'angular'},
        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']}
    },
    priority:['angular','ionic'],
    deps:['bootstrap']
});

config.js  ionic配置文件 android 和ios ui界面的配置和动态效果

define(['app', 'ionic'], function (app) {
    'use strict';
    return angular.module('app.config', ['ionic']).config(function($ionicConfigProvider) {
        $ionicConfigProvider.platform.android.tabs.style('standard');
        $ionicConfigProvider.platform.android.tabs.position('standard');
        $ionicConfigProvider.platform.ios.navBar.alignTitle('center'); 
        $ionicConfigProvider.platform.android.navBar.alignTitle('center');
        
        $ionicConfigProvider.platform.android.views.transition('android');
        $ionicConfigProvider.platform.ios.views.transition('ios'); 
    });
});

bootstrap.js   angular 初始化

define(['ionic', 'angular', 'app', 'routes', 'fastclick'], function (ionic, angular, app) {
    'use strict';
    var $html,
        onDeviceReady = function () {
            angular.bootstrap(document, app.name);
        };
    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);
            }
        });
    }
    window.addEventListener('load', function() {   //fastclick 初始化
        new FastClick(document.body);
    }, false);
});

app.js  angular  创建app module

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

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

routes.js  路由配置 主要是底部tab 切换 

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

    app.config(['$stateProvider', '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $stateProvider
            
                .state('tab', {
                url: '/tab',
                abstract: true,
                templateUrl: 'templates/tabs.html'
            })
            
            .state('tab.index', {
                url: '/index',
                views: {
                    'tab-index': {
                        templateUrl: 'templates/site/index.html',
                        controller: 'indexCtrl'
                    }
                }
            })
            .state('tab.sort', {
                url: '/sort',
                views: {
                    'tab-sort': {
                        templateUrl: 'templates/sort/index.html',