用户首次启动app先进入引导页，localstroge记录状态，下次启动应用不再显示引导页。

HTML:

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic App</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">

    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>

  <body ng-app="ionicApp">

    <ion-nav-bar class="bar-light">

        <ion-nav-back-button>

        </ion-nav-back-button>

    </ion-nav-bar>

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

    <script id="templates/intro.html" type="text/ng-template">

      <ion-view view-title="Intro">

        <ion-nav-buttons side="left">

          <button class="button button-positive button-clear no-animation"

                  ng-click="startApp()" ng-show="!slideIndex">

            Skip Intro

          </button>

          <button class="button button-positive button-clear no-animation"

                  ng-click="previous()" ng-show="slideIndex > 0">

            Previous Slide

          </button>

        </ion-nav-buttons>

        <ion-nav-buttons side="right">

          <button class="button button-positive button-clear no-animation"

                  ng-click="next()" ng-show="slideIndex != 2">

            Next

          </button>

          <button class="button button-positive button-clear no-animation"

                  ng-click="startApp()" ng-show="slideIndex == 2">

            Start using MyApp

          </button>

        </ion-nav-buttons>

        <ion-slide-box on-slide-changed="slideChanged(index)">

          <ion-slide>

            <h3>Thank you for choosing the Awesome App!</h3>

            <div id="logo">

              <img src="http://code.ionicframework.com/assets/img/app_icon.png">

            </div>

            <p>

              We've worked super hard to make you happy.

            </p>

            <p>

              But if you are angry, too bad.

            </p>

          </ion-slide>

          <ion-slide>

            <h3>Using Awesome</h3>

            <div id="list">

              <h5>Just three steps:</h5>

              <ol>

                <li>Be awesome</li>

                <li>Stay awesome</li>

                <li>There is no step 3</li>

              </ol>

            </div>

          </ion-slide>

          <ion-slide>

            <h3>Any questions?</h3>

            <p>

              Too bad!

            </p>

          </ion-slide>

        </ion-slide-box>

      </ion-view>

    </script>

    <script id="templates/main.html" type="text/ng-template">

      <ion-view hide-back-button="true" view-title="Awesome">

        <ion-content class="padding">

          <h1>Main app here</h1>

          <button class="button" ng-click="toIntro()">Do Tutorial Again</button>

        </ion-content>

      </ion-view>

    </script>

  </body>

</html>

CSS

body {

  cursor: url('http://ionicframework.com/img/finger.png'), auto;

}

.slider {

  height: 100%;

}

.slider-slide {

  padding-top: 80px;

  color: #000;

  background-color: #fff;

  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

  font-weight:;

}

#logo {

  margin: 30px 0px;

}

#list {

  width: 170px;

  margin: 30px auto;

  font-size: 20px;

}

#list ol {

  margin-top: 30px;

}

#list ol li {

  text-align: left;

  list-style: decimal;

  margin: 10px 0px;

}

.button.ng-hide{

  display:none;

}

JavaScript

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  .state('intro', {

    url: '/',

    templateUrl: 'templates/intro.html',

    controller: 'IntroCtrl'

  })

  .state('main', {

    url: '/main',

    templateUrl: 'templates/main.html',

    controller: 'MainCtrl'

  });

  $urlRouterProvider.otherwise("/");

})

.controller('IntroCtrl', function($scope, $state, $ionicSlideBoxDelegate) {

     window.localStorage.setItem("didIntro", "seen");

  // Called to navigate to the main app

  $scope.startApp = function() {

    $state.go('main');

  };

  $scope.next = function() {

    $ionicSlideBoxDelegate.next();

  };

  $scope.previous = function() {

    $ionicSlideBoxDelegate.previous();

  };

  // Called each time the slide changes

  $scope.slideChanged = function(index) {

    $scope.slideIndex = index;

  };

})

.controller('MainCtrl', function($scope, $state) {

  console.log('MainCtrl');

  if (window.localStorage.getItem("didIntro") === null) {

    $state.go('intro');

  }

  $scope.toIntro = function(){

  }

});

ionic之应用首次启动引导页的更多相关文章

  1. 自定义App首次启动引导页

    代码如下 #import"ZBGuidePageView.h" @interfaceZBGuidePageView()<UIScrollViewDelegate> @p ...

  2. IOS 一句代码搞定启动引导页

    前言引导页,一个酷炫的页面,自从微博用了之后一下就火起来了,对于现在来说一个app如果没有引导页似乎总显那么不接地气,那么为了让我们的app也“高大上”一次,我写了一个demo来实现启动引导页的实现, ...

  3. HybridApp启动引导页的实现

    有一种帅叫做长话短说,@孙红雷,--这可以叫做“短帅”吗,^_^ 首先说下思路,既然是Hybrid APP, 那就是可以用html的方式实现,启动引导页比较常见的展示方式是滑动,那么我们就可以使用图片 ...

  4. 安卓第一次启动引导页使用ViewPager实现

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等.一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单 ...

  5. Android:启动引导页实现

    前言 基本上现在所有的应用都会有一个欢迎界面,在欢迎界面对应用做一个整体的介绍,然后在跳入到主界面,这次要说的这个引导页就是带翻页的引导页.效果如下所示

  6. 使用Webview实现app启动引导页

    效果如下: 首先需要一个html页面及相应的js和css支持放在assets目录下(如果没有这个目录请项目上右键-new-folder-assets) 配置权限: <uses-permissio ...

  7. SharedPreference 存储小量数据，一般首次启动显示引导界面就用这个。

    写://添加一个SharedPreference并传入数据SharedPreference sharedPreferences = getSharedPreferences("share_d ...

  8. 用Flutter开发的跨平台项目，完美运行在Android和IOS上，Material简洁风格，包括启动页、引导页、注册、登录、首页、体系、公众号、导航、项目，还有漂亮的妹子图库，运行极度流畅，结构清晰，代码规范，值得拥有

    Flutter学习资源汇总持续更新中...... Flutter官方网站 Flutter中文网 wendux的Flutter实战 Flutter官方exampleflutter_gallery 阿里巴 ...

  9. iOS:判断引导页首次出现、版本更新

    判断引导页首次出现方式: //选择根控制器 +(void)chooseRootViewController{ //初始化Window窗口 [AppDelegate Delegate].window = ...

随机推荐

  1. 一条sql语句循环插入N条不同记录(转)

    SET NOCOUNT ON IF (OBJECT_ID('TB' ) IS NOT NULL ) DROP TABLE TB GO CREATE TABLE TB(ID INT IDENTITY ( ...

  2. C# XML文件操作类XmlHelper

    类的完整代码: using System;using System.Collections;using System.Xml; namespace Keleyi.Com.XmlDAL{public c ...

  3. Fedora 18 安装前指南

    Secure Boot 与 Win 8   随着 Win8 的发布,先前关于 Secure Boot 和 UEFI 的诸多猜测也得到了证实,Fedora 18 也将如同当初计划的那样使用 shim + ...

  4. PHP http(file_get_content) GET与POST请求方式

    1.GET方式请求 <?php $data = array('sParam1'=>'test1','sParam2'=>101,'isAuto'=>1); //定义参数 $da ...

  5. php报警：Strict Standards: Only variables should be passed by reference in

    错误原因 因为end函数的原因. end函数: mixed end    ( array &$array   ) 你可以看到end的参数是一个引用(reference),而你只能把一个变量的引 ...

  6. 阻止文件不被上传到iCloud-b

    有空用下 http://www.cocoachina.com/bbs/read.php?tid=86244 http://www.ooso.net/archives/617 http://blog.c ...

  7. 批处理文件的@echo off是什么意思?

    @echo off 关闭回显 @echo on 打开回显 @echo off并不是DOS程序中的, 而是DOS批处理中的. 当年的DOS,所有操作都用键盘命令来完成, 当你每次都要输入相同的命令时, ...

  8. 关于C#的委托

    作者  陈嘉栋(慕容小匹夫) 阅读目录 0x00 前言 0x01 从观察者模式说起 0x02 向Unity3D中的SendMessage和BroadcastMessage说拜拜 0x03 认识回调函数 ...

  9. 均值,方差: 概率质量函数PMF

    __author__ = 'dell' import Pmf import matplotlib.pyplot as pyplot pmf = Pmf.MakePmfFromList([1, 2, 2 ...

  10. ORACLE 日志 logminer 使用

    1. logminer安装 SQL> @$ORACLE_HOME/rdbms/admin/dbmslm.sql Package created. Grant succeeded. Synonym ...