用户首次启动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. 【HDU3802】【降幂大法+矩阵加速+特征方程】Ipad,IPhone

    Problem Description In ACM_DIY, there is one master called “Lost”. As we know he is a “-2Dai”, which ...

  2. 【POJ1417】【带标记并查集+DP】True Liars

    Description After having drifted about in a small boat for a couple of days, Akira Crusoe Maeda was ...

  3. Python直接迭代序列比通过索引迭代序列快。

    小脚本跑一下看看时间. 原理:直接迭代序列是通过Python内置的迭代器去实现的,而如果迭代序列需要先造一个可迭代的序列出来.内置的迭代器并不是一下将所有的数据放入内存中,而是需要多少取多少. #!/ ...

  4. 如何参与github上的开源项目

    今晚比较闲,于是乎装修了一下博客,顺便将一块心病(怎么参加github上的开源项目)解决了,最后发个文章总结下 这些是参考的链接 http://blog.csdn.net/five3/article/ ...

  5. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  6. Android 常用网站

    Android Design : http://www.sunjw.us/adchs/index.html Android Developers : http://developer.android. ...

  7. php实现base64编码

    工作需要,想弄一个加密的串,就想仿照base64的编码方式,写一个加密的方法,所以就有了下面这个用php实现的base64的代码 <?php /** * Base64 编码/解码 * @auth ...

  8. EntityFramework Core使用PostgreSQL

    EntityFramework Core使用PostgreSQL 0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用 ...

  9. 酷炫地给py代码标上行数

    Python IDLE是没有显示行号的功能的,今天学了一个方式可以酷炫地给自己的代码加上行号,该方法直接修改代码,慎用哦!代码如下: import fileinput for line in file ...

  10. BZOJ 1019 汉诺塔

    Description 汉诺塔由三根柱子(分别用A B C表示)和n个大小互不相同的空心盘子组成.一开始n个盘子都摞在柱子A上,大的在下面,小的在上面,形成了一个塔状的锥形体. 对汉诺塔的一次合法的操 ...