[Ionic Open source Project Tutorial]-2nd Talk about new projects, configuring App.js and Controllers.js to build a basic view

New Project

Select the appropriate page schema from the project's functional architecture diagram, where the Tab,ionic new project is selected, and the default template is 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

Just wait for the initializing to finish.

Schema architecture

After the project is newly created, remove the default routing configuration from the tab-***.html and App.js, and reconfigure the route based on the project feature architecture diagram.

app.js, configure the route, include an abstract template, and five tab.

$stateProvider  .state (' tab ', {   url: '/tab ',    abstract:true,    templateurl: ' Te Mplates/tabs.html '  })  .state (' Tab.tab1 ', {   url: '/tab1 ',    views: {    &NBS P; '  Tab1 ': {       templateurl: ' templates/tab1.html ',        controller: ' Tab1ctrl '       }    }  })  .state (' Tab.tab2 ', {   url: '/tab2 ',    views: {       ' tab2 ': {       templateurl: ' templates/tab2.html ',        C Ontroller: ' Tab2ctrl '      }    }  })  .state (' Tab.tab3 ', {   url: '/tab3 ',    views: {      ' tab3 ': {       templateurl: ' templates/tab3.html ',         controller: ' Tab3ctrl '      }    }  })  .state (' Tab.tab4 ', {   url: '/tab4 ', &NBsp  views: {      ' tab4 ': {       templateurl: ' templates/tab4.html ',        controller: ' Tab4ctrl '      }    }  })  .state (' Tab.account ', {  &NB Sp;url: '/account ',    views: {      ' Tab-account ': {       templateurl: ' Te Mplates/tab-account.html ',        controller: ' Accountctrl '      }    } &nbs p;});

tabs.html   View section

<ion-tabs class= "Tabs-icon-top tabs-color-active-positive" >  <ion-tab title= "Health" 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=" medical "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= "Life" icon-off= "Ion-coffee" icon-on= "Ion-coffee" href= "#/tab/tab3" >    <ion-nav-view name= "Tab3" ></ion-nav-view>  </ion-tab>  <ion-tab title= "Agriculture" icon-off= "Ion-leaf" icon-on= "Ion-leaf" href= "#/tab/tab4" >    <ion-nav-view name= "TAB4" ></ ion-nav-view>  </ion-tab>  <ion-tab title= "i" icon-off= "Ion-ios-person" icon-on= " Ion-ios-person "href=" #/tab/account ">    <ion-nav-view name=" Tab-account "></ion-nav-view&Gt  </ion-tab></ion-tabs>

Controllers.js Controller section, no implementation code.

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

After configuring the routing, view, and controller sections, the project's initial schema diagram is already out, as

The next section explains the services layer, which gets the data from the server and passes it to the view layer through the controller layer.

[Ionic Open source Project Tutorial]-2nd Talk about new projects, configuring App.js and Controllers.js to build a basic view