用户首次启动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. 【BZOJ3673】【可持久化并查集】可持久化并查集 by zky

    Description n个集合 m个操作操作:1 a b 合并a,b所在集合2 k 回到第k次操作之后的状态(查询算作操作)3 a b 询问a,b是否属于同一集合,是则输出1否则输出0 0<n ...

  2. Android的进程和线程（转）

    进程和线程 当一个应用程序第一次启动的时候,Android会启动一个Linux进程和一个主线程(即UI线程:主要负责处理用户的按键事件.触屏事件及屏幕绘图事件等).默认情况下,所有该程序的组件都将在该 ...

  3. 利用C#的反射机制动态调用DLL类库

    最近由于业务要求,需要动态调用DLL类库,所以研究了一下,感觉还好也不太难,今天就把自己理解的写了一个小例子(已经通过VS2005跑通),供大家一起研究和探讨,有理解不当的地方还请高手们多多指正,谢谢 ...

  4. POJ2524-宗教问题-并查集-ACM

    太难的搞不过,只能来写简单的了 POJ2524 无所不在的宗教 世界上宗教何其多.假设你对自己学校的学生总共有多少种宗教信仰很感兴趣.学校有n个学生,但是你不能直接问学生的信仰,不然他会感到很不舒服的 ...

  5. html embed用法

    (一).基本语法: embed src=url  说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,      Netscape及新版的IE 都支持.u ...

  6. php判断手机移动设备访问

    <?php function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROF ...

  7. apache rewrite .htaccess 站点内容重定向实例

    <IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On RewriteCond %{REQUEST_FILENA ...

  8. 缓存淘汰算法---LRU

    1. LRU1.1. 原理 LRU(Least recently used,最近最少使用)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高”. ...

  9. MBR

    Mbr位于磁盘的0柱面,0磁头,1扇区. MBR       有三部分构成,主引导程序,硬盘分区表DPT和,硬盘的有效标志55AA.在512个字节的主引导扇区里. 主引导程序占446个字节,dpt占6 ...

  10. java高精度数组

    POJ1205 递推公式为a[i] = 3*a[i-1] - a[i-2], a[1] = 1,a[2] = 3 , i 最高为100; 搞懂了使用BigInteger开数组. import java ...