用户首次启动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. IOS DLNA PlatinumKit库的使用

    前段时间进行了IOS DLNA的开发,使用的是PlatinumKit库.网上查了很多资料都未果,经过自己的摸索,遂将如何使用PlatinumKit进行DLNA的开发分享给大家. 1.PlatinumK ...

  2. SGU 160.Magic Multiplying Machine

    时间限制:0.5s 空间限制6M 题意:        给出n个(1<=n<=10000)1~m(2<m<1000)范围内的数,选择其中任意个数,使它们的 乘积 模m 最大,输 ...

  3. SGU 197.Nice Patterns Strike Back

    时间限制:0.5s 空间限制:6M 题意: 给出长n(n<=10^100)和宽m(m<=5)的地面,铺上黑色和白色的地板,使得没有任意一个2*2大小的地面铺同种颜色的方案数是多少. Sol ...

  4. system.getProperties()

    Properties props=System.getProperties(); //系统属性     System.out.println("Java的运行环境版本:"+prop ...

  5. window下配置SSH连接GitHub、GitHub配置ssh key(转）

    转自:http://jingyan.baidu.com/article/a65957f4e91ccf24e77f9b11.html 此经验分两部分: 第一部分介绍:在windows下通过msysGit ...

  6. 如何使rdlc报表的表头在每一页都显示

    想要使表格的表头在每一行都显示,直接在表格的属性设置界面中设置是无效的,应该算是一个BUG,如图: 但还是可以实现的,实现方法如下,这个实现方法从网上得到 开发工具: Visual Studio 20 ...

  7. prototype/constructor/__proto__之prototype简单应用

    一.简单使用构造原型加prototype造简单的轮子. 1.想jQ那样获取HTML元素,先看JS代码 function Cmf() { //创建构造函数 this.arry = [] } Cmf.pr ...

  8. js 中的流程控制-条件语句

    条件语句: if(exp)执行一句代码 <script> var x = 1 ; if(x == 1 ) //当if判断语句结果是true 或者 false 当判断结果等于true的时候, ...

  9. js字符串 数字 的转换

    js 字符串转化成数字 的 三种方法主要有 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数 ...

  10. 技术大牛面试 http://www.itmian4.com/forum.php?mod=viewthread&tid=3824

    不久前,byvoid面阿里星计划的面试结果截图泄漏,引起无数IT屌丝的羡慕敬仰.看看这些牛人,NOI金牌,开源社区名人,三年级开始写Basic...在跪拜之余我们不禁要想,和这些牛人比,作为绝大部分技 ...