[ionic開源項目教程] - 第2講 建立項目,配置app.js和controllers.js搭建基礎視圖

標籤：

建立項目

由項目功能架構圖選擇合適的頁面架構，這裡選用Tab，ionic建立項目，預設的模板就是tab。

$ ionic start TongeNewsCreating Ionic app in folder C:\Users\Tonge\Source\Repos\TongeApp based on tabs projectDownloading: https://github.com/driftyco/ionic-app-base/archive/master.zip[=============================]  100%  0.0sDownloading: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip[=============================]  100%  0.0sUpdated the hooks directory to have execute permissionsUpdate Config.xmlInitializing 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視圖層。

[ionic開源項目教程] - 第2講 建立項目,配置app.js和controllers.js搭建基礎視圖