用户首次启动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. 关于ios8斯坦福公开课第二课

    在这个课程中,我们遇到了这样的代码 @IBAction func oprate(sender: UIButton) { let opration = sender.currentTitle! if u ...

  2. javascript基础学习（二）

    javascript的数据类型 学习要点: typeof操作符 五种简单数据类型:Undefined.String.Number.Null.Boolean 引用数据类型:数组和对象 一.typeof操 ...

  3. Linux 添加epel源

    1.epel-release yum install epel-release 这样有些没办法通过yum 安装  可以这样安装(例如redis)

  4. Servlet（一）

    BS架构的优势 1.数据库之负责数据库的管理 2.Web服务器负责业务逻辑的处理 3.浏览器提供操作界面 4.不需要单独安装客户端 5.开发相对于CS简单,客户端和服务器的通信模块都是使用标准的HTT ...

  5. mysql 连接问题----转载

    最近碰到一个mysql5数据库的问题.就是一个标准的servlet/tomcat网络应用,后台使用mysql数据库.问题是待机一晚上后,第二天早上第一次登录总是失败.察看日志发现如下错误: “com. ...

  6. R语言数据分析

    CSDN博客:包括R语言基础.R语言数据挖掘.hadoop大数据及spark等 http://blog.csdn.net/qq_16365849 R语言及数据分析 http://blog.csdn.n ...

  7. DOS命令行使用pscp实现远程文件和文件夹传输(转)

    转自 http://snailwarrior.blog.51cto.com/680306/141201   pscp是putty安装包所带的远程文件传输工具,使用和Linux下scp命令相似,具体的使 ...

  8. 转:六百字读懂Git

    原文来自于:http://www.techug.com/git-in-600-words 译注:来自 Hacker School 的 Mary Rose Cook 最近实现了一个纯 JavaScrip ...

  9. Mongodb2.6升级到Mongodb3.0.2笔记

    PS:升级到3版本的Mongodb以后,drop集合是可以直接释放磁盘空间的 停止老版本Mongodb >use admin >db.shutdownServer(); 下载解压新版本Mo ...

  10. cf D. On Sum of Fractions

    http://codeforces.com/problemset/problem/397/D 题意:v(n) 表示小于等于n的最大素数,u(n)表示比n的大的第一个素数,然后求出: 思路:把分数拆分成 ...