[ionic开源项目教程] - 第2讲 新建项目,配置app.js和controllers.js搭建基础视图

新建项目

由项目功能架构图选择合适的页面架构，这里选用Tab，ionic新建项目，默认的模板就是tab。

$ ionic start TongeNews
Creating Ionic app in folder C:\Users\Tonge\Source\Repos\TongeApp based on tabs project
Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
[=============================]  %  .0s
Downloading: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip
[=============================]  %  .0s
Updated the hooks directory to have execute permissions
Update Config.xml
Initializing cordova project

等待Initializing完成就行了。

架构架构

项目新建完成后，删除自带的tab-***.html和app.js默认的路由配置，根据项目功能架构图重新配置路由。

app.js,配置路由，包含一个抽象模板，和五个tab。

$stateProvider
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
  .state('tab.tab1', {
    url: '/tab1',
    views: {
      'tab1': {
        templateUrl: 'templates/tab1.html',
        controller: 'Tab1Ctrl'
      }
    }
  })
  .state('tab.tab2', {
    url: '/tab2',
    views: {
      'tab2': {
        templateUrl: 'templates/tab2.html',
        controller: 'Tab2Ctrl'
      }
    }
  })
  .state('tab.tab3', {
    url: '/tab3',
    views: {
      'tab3': {
        templateUrl: 'templates/tab3.html',
        controller: 'Tab3Ctrl'
      }
    }
  })
  .state('tab.tab4', {
    url: '/tab4',
    views: {
      'tab4': {
        templateUrl: 'templates/tab4.html',
        controller: 'Tab4Ctrl'
      }
    }
  })
  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

tabs.html 视图部分

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <ion-tab title="健康" icon-off="ion-ios-pulse-strong" icon-on="ion-ios-pulse-strong" href="#/tab/tab1">
    <ion-nav-view name="tab1"></ion-nav-view>
  </ion-tab>
  <ion-tab title="医疗" icon-off="ion-ios-medkit" icon-on="ion-ios-medkit" href="#/tab/tab2">
    <ion-nav-view name="tab2"></ion-nav-view>
  </ion-tab>
  <ion-tab title="生活" icon-off="ion-coffee" icon-on="ion-coffee" href="#/tab/tab3">
    <ion-nav-view name="tab3"></ion-nav-view>
  </ion-tab>
  <ion-tab title="农业" icon-off="ion-leaf" icon-on="ion-leaf" href="#/tab/tab4">
    <ion-nav-view name="tab4"></ion-nav-view>
  </ion-tab>
  <ion-tab title="我" icon-off="ion-ios-person" icon-on="ion-ios-person" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>
</ion-tabs>

controllers.js 控制器部分,暂无实现代码。

angular.module('starter.controllers', [])
.controller('Tab1Ctrl', function($scope) {})
.controller('Tab2Ctrl', function($scope) {})
.controller('Tab3Ctrl', function($scope) {})
.controller('Tab4Ctrl', function($scope) {})
.controller('AccountCtrl', function($scope) {});

配置完路由、视图、和控制器部分，项目初始架构图就已经出来了，如下图

下一节讲解services层，从服务器获取数据，通过controller层传给view视图层。