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文件：

<ion-tabs class="tabs-icon-bottom tabs-color-active-positive">    <!-- Infomation Tab -->    <ion-tab title="资讯" icon-off="ion-ios-information" icon-on="ion-ios-information" ui-sref="tab.infos.list1">        <ion-nav-view name="tab-infos"></ion-nav-view>    </ion-tab>    <!-- Videos Tab -->    <ion-tab title="视频" icon-off="ion-ios-videocam-outline" icon-on="ion-ios-videocam" ui-sref="tab.videos">        <ion-nav-view name="tab-videos"></ion-nav-view>    </ion-tab>    <!-- Account Tab -->    <ion-tab title="我" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="tab.profile">        <ion-nav-view name="tab-profile"></ion-nav-view>    </ion-tab></ion-tabs>

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

例：

<ion-view view-title="资讯">     <ion-content>     ......     </ion-content></ion-view>

这样我们主要展示的界面已经创建完成，接下来我们要怎么合并到应用中呢。接下来需要用到我们之前讲的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

<script src="js/routes.js"></script><script src="js/controllers.js"></script>

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

<ion-nav-bar class="bar-stable">        <ion-nav-back-button>        </ion-nav-back-button>    </ion-nav-bar>    <!--      The views will be rendered in the <ion-nav-view> directive below      Templates are in the /templates folder (but you could also      have templates inline in this html file if you'd like).    --><ion-nav-view></ion-nav-view>

配置下app.js

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

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