cordova+angularjs+ionic+vs2015 Development (v)

Welcome Dabigatran Study: 457351423 There are more than 4,000 learning videos, covering a variety of technologies, there is a need to welcome to the group to learn!

I. Creating side menus and navigation items

1. Use vs to create a ionic empty project while creating a ionic Sidemenu and Ionic tabs project. Merge the templates and JS files in the Sidemenu and tabs projects into the empty project, and modify the JS corresponding code. The complete project works as follows:

The 2.app.js code is modified as follows:

/* * Load each module required * The Controllers controller module was loaded in the previous tutorial * This tutorial loads the Services Service Module */angular.module (' Starter ', [' Ionic ', '  Starter.controllers ', ' starter.services ']). Run (function ($ionicPlatform) {$ionicPlatform. Ready (function () {if (Cordova.platformid = = = ' iOS ' && Window.cordova && window.cordova.plugins.Keyboard)            {Cordova.plugins.Keyboard.hideKeyboardAccessoryBar (true);        Cordova.plugins.Keyboard.disableScroll (TRUE); } if (window.        StatusBar) {statusbar.styledefault (); }    });}). Config (function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {//used to configure each platform navigation bar style (uniform navigation bar position) $ionicConfigPr    Ovider.platform.ios.tabs.style (' standard ');    $ionicConfigProvider. Platform.ios.tabs.position (' bottom ');    $ionicConfigProvider. Platform.android.tabs.style (' standard ');    $ionicConfigProvider. Platform.android.tabs.position (' standard ');    $ionicConfigProvider. Platform.ios.navBar.alignTitle (' center '); $ionicConfigProvider.Platform.android.navBar.alignTitle (' left ');    $ionicConfigProvider. Platform.ios.backButton.previousTitleText ('). Icon (' Ion-ios-arrow-thin-left ');    $ionicConfigProvider. Platform.android.backButton.previousTitleText ('). Icon (' Ion-android-arrow-back ');    $ionicConfigProvider. Platform.ios.views.transition (' iOS ');    $ionicConfigProvider. Platform.android.views.transition (' Android '); Configure the routing $stateProvider. State (' app ', {url: '/app ', Abstract:true, Templateurl: ' Templates/menu . html ', controller: ' Appctrl '}). State (' App.search ', {url: '/search ', views: {' Me        Nucontent ': {templateurl: ' Templates/search.html '}}}). State (' App.browse ', {            URL: '/browse ', Views: {' menucontent ': {templateurl: ' templates/browse.html '   }}). State (' app.playlists ', {url: '/playlists ', Views: {' menucontent ': {             Templateurl: ' templates/playlists.html ', controller: ' Playlistsctrl '}                }). State (' App.single ', {url: '/playlists/:p laylistid ', Views: {' menucontent ': { Templateurl: ' templates/playlist.html ', controller: ' Playlistctrl '}}). stat E (' App.tab ', {url: '/tab ', abstract:true, Views: {' menucontent ': {Templ             Ateurl: ' templates/tabs.html '}}). State (' App.tab.dash ', {url: '/dash ', views: {            ' Tab-dash ': {templateurl: ' templates/tab-dash.html ', controller: ' Dashctrl '                }}). State (' app.tab.chats ', {url: '/chats ', Views: {' tab-chats ': {    Templateurl: ' templates/tab-chats.html ', controller: ' Chatsctrl '}}) . State (' App.tab.chat-detAil ', {url: '/chats/:chatid ', Views: {' tab-chats ': {templateurl: ' Templates/cha        T-detail.html ', controller: ' Chatdetailctrl '}}). State (' App.tab.account ', {                 URL: '/account ', Views: {' Tab-account ': {templateurl: ' templates/tab-account.html ',    Controller: ' Accountctrl '}}); $urlRouterProvider. Otherwise ('/app/tab/dash ');});

Controllers.js and Services.js files are not labeled here, as they do not involve the interpretation of key codes.

3. Modify the menu.html content and note the Comment Description section

<ion-side-menus enable-menu-with-back-views= "false" > <ion-side-menu-content> <ion-nav-bar class= " Bar-stable "> <ion-nav-back-button> </ion-nav-back-button> <ion-nav-butt ONS side= "left" > <button class= "button Button-icon button-clear ion-navicon" menu-toggle= "left" &GT;&L t;/button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view name= "Menucontent" &G t;</ion-nav-view> </ion-side-menu-content> <ion-side-menu side= "left" > <ion-header-bar C lass= "Bar-stable" > 
4. The final preview effect is as follows
After the left side slide menu opens, how to use the return key in the Ripple Emulator to exit the menu to the main interface:
In the Events menu of Ripple, select the Fallback button and click FireEvent to simulate the click Back key.
Ii. Detailed Routing and views
1. View load Order
There is a label for the main view in index.html:
<ion-nav-view></ion-nav-view>
A view label for a menu content in menu.html:
<ion-nav-view name= "Menucontent" ></ion-nav-view>
There are 3 view labels in the tab tabs.html:
<ion-tabs class= "Tabs-icon-top tabs-color-active-positive" >    <!--reset Routes--    <ion-tab title= " Status "icon-off=" Ion-ios-pulse "icon-on=" Ion-ios-pulse-strong "href=" #/app/tab/dash ">        <ion-nav-view Name= "Tab-dash" ></ion-nav-view>    </ion-tab>    <!--reset route--    <ion-tab title= " Chats "icon-off=" Ion-ios-chatboxes-outline "icon-on=" ion-ios-chatboxes "href=" #/app/tab/chats ">        < Ion-nav-view name= "Tab-chats" ></ion-nav-view>    </ion-tab>    <!--reset Routes---    < Ion-tab title= "Account" icon-off= "Ion-ios-gear-outline" icon-on= "Ion-ios-gear" href= "#/app/tab/account" >        <ion-nav-view name= "Tab-account" ></ion-nav-view>    </ion-tab></ion-tabs>
We need to load the first tab content (tab-dash.html), Tab tab (tabs.html), left menu (menu.html) when the program starts
How views are rendered:
First, tab-dash.html is rendered to Tabs.html's <ion-nav-view name= "Tab-dash" ></ion-nav-view>
Next, render the tabs.html to menu.html <ion-nav-view name= "Menucontent" ></ion-nav-view>
Finally render the menu.html to index.html
View Switch mode:
When you click on a menu item in the menu.html, the page that corresponds to it is re-rendered to <ion-nav-view name= "Menucontent" ></ion-nav-view> overwrites the original tab view. This displays the view opened from the menu in the display area. If you need to return to the previous tab view, just use the back button. The purpose of the Navigation view is that you can use the Back button to navigate through each layer of the view time switch.
2. Status Inheritance and activation order
The following States are required to load the above view:
Dash Status:
. State (' App.tab.dash ', {        URL: '/dash ', views        : {            ' Tab-dash ': {                templateurl: ' templates/tab-dash.html ',                controller: ' Dashctrl '}}    })
TAB Status:
. State (' App.tab ', {        URL: '/tab ',        abstract:true, views        : {            ' menucontent ': {                templateurl: ' Templates/tabs.html '}}    )
App Status:
. State (' app ', {        URL: '/app ',        abstract:true,        templateurl: ' templates/menu.html ',        controller: ' Appctrl '    })
State inheritance:
In Angularjs state inheritance is used: App.tab.dash, the access path is also inherited: #/app/tab/dash
Used between each state. Separated. The parent state can be declared as abstract:true. When abstract is true, the parent state is not activated by default, and the parent state is activated only when the child state is activated.
The activation status code is as follows:
$urlRouterProvider. Otherwise ('/app/tab/dash ');
The function of this code is to activate by default: App.tab.dash state. Because the App.tab.dash state is inherited from App.tab and App.tab is abstract, App.tab is also activated when App.tab.dash is active. In the same vein, the app is the parent state of app.tab and abstract, so when App.tab is activated, the app state is activated.
In other words, the code activates 3 states: App.tab.dash, App.tab, app. These 3 states correspond to the Tab-dash.html tab content page, the Tabs.html tab page, and the Menu.html menu page. So the effect is finally displayed as a preview.
One difficulty in ionic development is how to use the display of the route control view. The order in which each route (state) is activated, and the order in which the views are loaded, are particularly important. Otherwise you will have to go a lot of detours. For example, there are several other ways to paste menu.html content into various views, or to paste tabs.html content into individual content pages. This realization is theoretically possible, but inefficient and cumbersome to maintain. To make full use of the inheritance relationship of good state and to arrange the view layout rationally is the base of doing well ionic development.
Third, navigation bar settings
Because the Ionic navigation bar does not match where iOS and Android are rendered, use the following code to make the navigation bar appear consistent across platforms:
Used to configure each platform navigation bar style (uniform navigation bar position)    $ionicConfigProvider. Platform.ios.tabs.style (' standard ');    $ionicConfigProvider. Platform.ios.tabs.position (' bottom ');    $ionicConfigProvider. Platform.android.tabs.style (' standard ');    $ionicConfigProvider. Platform.android.tabs.position (' standard ');    $ionicConfigProvider. Platform.ios.navBar.alignTitle (' center ');    $ionicConfigProvider. Platform.android.navBar.alignTitle (' left ');    $ionicConfigProvider. Platform.ios.backButton.previousTitleText ('). Icon (' Ion-ios-arrow-thin-left ');    $ionicConfigProvider. Platform.android.backButton.previousTitleText ('). Icon (' Ion-android-arrow-back ');    $ionicConfigProvider. Platform.ios.views.transition (' iOS ');    $ionicConfigProvider. Platform.android.views.transition (' Android ');
Conclusion: The above is a simple integration case, the implementation of the slide menu and navigation. For detailed code, please download the source attachment.
Sample code
Welcome Dabigatran Study: 457351423 There are more than 4,000 learning videos, covering a variety of technologies, there is a need to welcome to the group to learn!
cordova+angularjs+ionic+vs2015 Development (v)