Cordova+angularjs+ionic+vs2015开发（五）

欢迎加群学习：457351423 这里有4000多部学习视频，涵盖各种技术，有需要的欢迎进群学习！

一、创建侧边菜单和导航项目

1.使用VS创建一个Ionic空项目，同时创建一个Ionic SideMenu和Ionic Tabs项目。将SideMenu和Tabs项目里的templates和js文件合并到空项目里，修改js对应的代码即可。完整项目工程如下：

2.App.js代码修改如下：

/*
 * 加载所需要的各个模块
 * 上篇教程中加载了controllers控制器模块
 * 本篇教程加载了services服务模块
 */
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) {
    //用来配置各个平台导航条样式（统一导航条位置）
    $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‘);

    //配置路由
    $stateProvider
    .state(‘app‘, {
        url: ‘/app‘,
        abstract: true,
        templateUrl: ‘templates/menu.html‘,
        controller: ‘AppCtrl‘
    })
    .state(‘app.search‘, {
        url: ‘/search‘,
        views: {
            ‘menuContent‘: {
                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/:playlistId‘,
        views: {
            ‘menuContent‘: {
                templateUrl: ‘templates/playlist.html‘,
                controller: ‘PlaylistCtrl‘
            }
        }
    })
    .state(‘app.tab‘, {
        url: ‘/tab‘,
        abstract: true,
        views: {
            ‘menuContent‘: {
                templateUrl: ‘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/chat-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和services.js文件这里就不贴代码了，因为不涉及到关键代码的讲解。

3.修改menu.html内容，注意注释说明部分

<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-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-stable">
            <h1 class="title">Left</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <!--
                    这里去掉menu-close属性，改成menu-toggle="left"，
                    不然使用返回键退出菜单时会自动关闭视图，
                    从而导致应用程序退出。
                -->
                <ion-item ng-click="login()" menu-toggle="left">
                    Login
                </ion-item>
                <ion-item href="#/app/search" menu-toggle="left">
                    Search
                </ion-item>
                <ion-item href="#/app/browse" menu-toggle="left">
                    Browse
                </ion-item>
                <ion-item href="#/app/playlists" menu-toggle="left">
                    Playlists
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

4.最终预览效果如下

左边侧滑菜单打开后，怎么在Ripple模拟器中使用返回键来退出菜单到主界面：

在Ripple的Events菜单中选择回退按钮，点击FireEvent即可模拟点击返回键。

二、路由和视图详解

1.视图加载顺序

在index.html中有一个主视图的标签：

<ion-nav-view></ion-nav-view>

在menu.html中一个menu内容的视图标签：

<ion-nav-view name="menuContent"></ion-nav-view>

在选项卡tabs.html中有3个视图标签：

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
    <!--重新设置路由-->
    <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>
    <!--重新设置路由-->
    <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>
    <!--重新设置路由-->
    <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>

我们需要在程序启动时，加载第一个标签选项卡内容（tab-dash.html）、标签选项卡（tabs.html）、左侧菜单（menu.html）

视图的渲染方式:

首先将tab-dash.html喧渲染到tabs.html的<ion-nav-view name="tab-dash"></ion-nav-view>

其次将tabs.html渲染到menu.html的<ion-nav-view name="menuContent"></ion-nav-view>

最后将menu.html渲染到index.html

视图切换方式：

在点击menu.html中的菜单项时，会把菜单项所对应的页面重新渲染到<ion-nav-view name="menuContent"></ion-nav-view>上覆盖原来的标签选项卡视图，这样在显示区域就会显示从菜单打开的视图了。如果需要返回到之前的标签选项卡视图，只需使用返回按钮就行了。导航视图的作用就在于可以使用返回按钮在各层视图时间切换实现导航作用。

2.状态继承和激活顺序

在上述视图加载时需要用到如下状态：

dash状态：

.state(‘app.tab.dash‘, {
        url: ‘/dash‘,
        views: {
            ‘tab-dash‘: {
                templateUrl: ‘templates/tab-dash.html‘,
                controller: ‘DashCtrl‘
            }
        }
    })

tab状态：

.state(‘app.tab‘, {
        url: ‘/tab‘,
        abstract: true,
        views: {
            ‘menuContent‘: {
                templateUrl: ‘templates/tabs.html‘
            }
        }
    })

app状态：

.state(‘app‘, {
        url: ‘/app‘,
        abstract: true,
        templateUrl: ‘templates/menu.html‘,
        controller: ‘AppCtrl‘
    })

状态继承：

在AngularJs中状态继承使用：app.tab.dash，访问路径相对也是继承的：#/app/tab/dash

每个状态之间使用 . 隔开。父级状态可以声明为abstract:true。当abstract为true时，父级状态默认不激活，只有当子状态被激活时，父级状态才被激活。

激活状态代码如下：

$urlRouterProvider.otherwise(‘/app/tab/dash‘);

该代码的作用就是默认激活：app.tab.dash状态。由于app.tab.dash状态从app.tab继承的，并且app.tab为abstract，所以app.tab.dash激活时同时会激活app.tab。同理，app是app.tab的父级状态并且为abstract，所以当app.tab被激活时，会同时激活app状态。

也就是说该代码同时激活了3个状态分别为：app.tab.dash、app.tab、app 。这3个状态分别对应tab-dash.html选项卡内容页、tabs.html选项卡页面、menu.html菜单页面。所以最终显示成预览的效果。

Ionic开发中一个难点就在于怎么使用路由控制视图的显示。各个路由（状态）的激活顺序，以及视图的加载顺序都尤为重要。不然就要走很多弯路。比如上述案例，有另外几种做法，要么是把menu.html内容往各个视图里粘贴，要么就是把tabs.html内容往各个内容页粘贴。这种实现方式理论上都可以，但是效率不高，维护起来麻烦。充分利用好状态的继承关系，合理的安排视图布局，是做好Ionic开发的基础。

三、导航条设置

由于Ionic的导航条在IOS和Android呈现的位置不一致，所以使用以下代码来让导航条在各个平台上显示一致：

//用来配置各个平台导航条样式（统一导航条位置）
    $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‘);

结束语：以上是一个简单的整合案例，实现了侧滑菜单和导航。详细的代码请下载源码附件。

示例代码

欢迎加群学习：457351423 这里有4000多部学习视频，涵盖各种技术，有需要的欢迎进群学习！

时间： 2024-11-06 13:50:09

Cordova+angularjs+ionic+vs2015开发（五）的相关文章

Cordova+angularjs+ionic+vs2015开发（三）

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选项卡中,将显示名称和起始页,修改为自己想要的名称即可. 如需直接在xml文件中修改:右击config.xml,使用[查看代码]进行修改即可. 2.插件安装 一般在项目开发中,免不了使用第三方的插件,在VS中安装Cordova插件也是比较简单的. 可视化打开config.xml文件.切换到[插件]选项

Cordova+angularjs+ionic+vs2015开发（二）

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建空白Cordova应用 打开VS,选择[新建项目],选择其它语言JavaScript或者TypeScript,语言的话就按个人喜好,喜欢JS就用JS,喜欢TS就用TS,推荐使用TS书写,代码结构和可读性相对更强.本文演示使用JS来书写,方便不会TS的用户阅读. 创建完项目后,项目结构如下: www目录为我们本地应用程序目录,和一般静态网站类似.默认主页为index.html.脚本对应为sc

Cordova+angularjs+ionic+vs2015开发（四）

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.布局 Ionic模板提供了一个侧边栏菜单示例项目和标签选项卡示例项目.本案例将两个布局进行结合,简单介绍下Ionic的布局.Ionic采用自定义标签和标准Html标签相结合.相对于全部使用div方式来说,自定义标签的可读性更强.Ionic的界面呈现既可以使用静态页面方式呈现,也可以使用Angular提供的路由机制和控制器来控制控制页面的呈现及数据绑定. 使用VS创建一个空白的Ionic项目.项

Cordova+angularjs+ionic+vs2015开发（一）

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选项: 运行依赖关系查看器,用来检测开发环境是否完整. 如果检测显示: 那么就是环境配置完成了.可以直接开发了. 如果显示有错误页面,那么按照错误页面的提示,进行对应的环境配置即可. 一般错误页面提示都是缺少对应的依赖组件,包括如下: Git Node.js Android SDK JDK 这些组件可

基于AngularJS/Ionic框架开发的性能优化

AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化,但是我们开发过程中的不当使用还是会对性能产生巨大影响. 下面提出几点优化的方法: 1. 使用单次绑定符号{{::value}} AngularJS的性能优化方法之一是减少双向绑定.我们知道AngularJS的双向绑定是通过为每个需要双向绑定的数据对象添加$$watchers,一旦某个scope的数据发生了更新,就触发脏检测($digest),深度优先遍历所有scope对象的$$watchers值的old/new value

我用VS2015 开发webapp （1） 需求、目的、配置

分析需求: 1.要求数据分析 [门店销售数据分析] 2.数据要实时同步 3.数据要求安全并保密 4.数据分析图 开发工具的选择: VS2015 + Cordova + Angularjs + Ionic 配置环境 CMD-- node -v CMD-- npm -version 解决方法: 点击"Packages" > "Show Obsolete Packages"然后library就出来了 下面碎碎念: MD,我真不会啊.... 24K纯新手,这是多大坑啊

搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成HybridAPP,并且它提供了非常多的插件,方便我们使用原生APP的功能. Ionic是一个界面样式库,仿照原生的ios和android界面:同时它是基于AngularJs的. 本文我们在win7中搭建 AngularJS+Ionic+Cordova 开发环境,包括所涉及的Node.js.Cordova CL

ionic+cordova+angularJs

ionic+cordova+angularJs 这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://github.com/foreverjiangting/myApp/tree/master/myApp 一:环境搭建 1.配置java的运行环境,包括path变量的路径,这里不再详细讲解,请自行百度. 2.下载Android  Studio,并配置path

AngularJS+Ionic开发-1.搭建开发环境

临时项目需要使用AngularJS+Ionic+Cordova技术,半年前跟别人用过一段时间做过几个页面,目前别人已经无法联系了,只能我自己上了. 上次做完项目后,想抽时间好好巩固一下这方面的知识面来,后来其他项目忙起来就给扔下,主要原因还是懒啊,其实有好多的技术排着队等着好好研究呢,就是懒啊. 开发第一步,需要先把开发环境搭建起来. 1.开发IDE 选择VS Code,官方下载地址:https://code.visualstudio.com/ .下载完成后,根据安装步骤一步步完成即可. 2.安