ionic搭建应用模板框架

您可自由转发此文， 但请保留出处：Ionic在线学习网站  http://www.ioniconline.com

环境搭建完，对ionic基本了解后，我们来搭个实用的应用框架。ionic提供了三个最常用的示例框架。方便你快速的进入项目开发。 如：sudo ionic start appname blank（sidemenu／tabs） 我们这边从一个空模版来建立应用，这样我们能够从零开始深刻的了解ionic开发。

创建新app

一.执行命令行创建项目

sudo ionic start myFirstIonicApp blank

这时没有error的话我们的应用文件myFirstIonicApp在当前目录就生成了，现在来看下生成的文件及其作用。

文件	作用
Bower.json	应用配置文件，设置应用运行条件基本信息
config.xml	配置文件， 设置一些如项目名，项目图标，在不同系统中（ios、android……）不同的配置等等
gulpfile.js
hooks
ionic.project
package.json	是一些包的json格式信息，名称版本、依赖工具的版本、默认添加的plugin等等
platforms	目录下是不同平台的不同编译，在mac系统中会自动生成ios平台目录
plugins	目录下是添加的插件
scss
www	具体看开发文件， 后面的开发主要都在这个目录下

我们可以先看下效果，执行下面命令：添加了ios平台编译文件、创建IPA、在模拟器上运行

    sudo ionic platform add ios  
    sudo ionic build ios  
    sudo ionic emulate ios  

就能在模拟器上看到运行的效果，

二.接下来我们给应用添加3个TAB

1.在www目录下添加template，创建tabs.html文件：

2.再创建对应3个文件tab-infos.html、tab-videos.html、tab-profile.html。

例：

     
     ......
     

这样我们主要展示的界面已经创建完成，接下来我们要怎么合并到应用中呢。接下来需要用到我们之前讲的routes.js路由。

3.在js目录下创建routes.js文件：

angular.module(‘starter.routes’, [])
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
    $ionicConfigProvider.platform.android.tabs.style('standard');
    $ionicConfigProvider.platform.android.tabs.position('bottom');//android默认tab会在上面，这样可以统一使tab在最下面。
$ionicConfigProvider.navBar.alignTitle('center');//设置nav title剧中

    $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.infos', {
            url: '/infos',
            views: {
                'tab-infos': {
                    templateUrl: 'templates/tab-infos.html',
                    controller: 'InfosCtrl'
                }
            }
        })
    .state('tab.videos', {
            url: '/videos',
            views: {
                'tab-videos': {
                    templateUrl: 'templates/tab-videos.html',
                    controller: 'VideosCtrl'
                }
            }
        })
    .state('tab.profile', {
        url: '/profile',
        views: {
            'tab-profile': {
                templateUrl: 'templates/tab-profile.html',
                controller: 'ProfileCtrl'
            }
        }
    })
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/tab/infos');
});

其中$stateProvider后面就是具体设置路由的,$urlRouterProvider.otherwise是来设置应用的其实路由，以上设置我们的其实页面是展示tabs中的infos界面。 这样我们的路由也设置好了。

4．根据route中我们还需要创建对应的controller。

在js目录中创建controller.js文件。添加对应controller：

angular.module('starter.controllers', ['ionic'])
.controller('InfosCtrl', function ($scope) {      
})
.controller('VideosCtrl', function ($scope) {
})
.controller('ProfileCtrl', function ($scope) {
});

5．最后需要我们新创的route、controllers引用到项目中。

配置下index.html在head中加入上面的routes.js、controllers.js

把body中ion－pane内容替换掉成：

配置下app.js

angular.module('starter', ['ionic','starter.controllers','starter.routes'])

这边我们的tabs 已经添加完成了，可以看下效果。 以上就是一个最简单的tabs框架就完成了。