这是在学习ionic时,当时遇到的一些问题,觉得很难,就记笔记下来了,现在觉得如果可以拿来分享,有可能会帮助到遇到同样问题的人

ionic slidemenu

项目流程:

cd pretices(自己创建的文件夹名称)

ionic start oneApp blank(创建一个空项目)

在WWW文件夹下创建templates,controllers 文件夹

1、创建slidemenu方法

index 页面

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

在app.js里面添加

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

    $stateProvider

        .state('app', {

            url: "/app",

            templateUrl: "templates/menu.html",

            controller: 'appCtrl'

        });

    $urlRouterProvider.otherwise('/app');

});

  

这里是ionic路由配置问题,如果看不太懂,可以到ionic官网里面找到并学习,不得不说官网上面有很多值得学习的知识

2、在app.js里添加控制器名,在index里引用已添加的控制器名,在controllers文件夹里添加相应的控制器

3、controllers文件夹里添加相应的控制器:

var module = angular.module('app.appCtrl', []);

module.controller('appCtrl', function () {

});

4、

在HTML页面里面写:

ion-side-menus等,最后在button 加menu-toggle=“left”,侧边栏就出来了

注:博客会持续更新,欢迎大家提问、评价、更改。更多技术分享www.ncloud.hk

ionic 项目中创建侧边栏的具体流程分4步简单学会的更多相关文章

  1. ionic 项目中添加modal的步骤流程

    1.首先在templates文件夹下面定义一个新页面,xxx.html,template文件夹在空项目里面是没有的,需要手动添加一个,放在WWW文件夹下面. <ion-modal-view> ...

  2. Ionic项目中使用极光推送

    Ionic项目中使用极光推送-android   对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...

  3. Ionic项目中使用极光推送-android

    对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin ...

  4. Ionic项目中如何使用Native Camera

    本文介绍如何在ionic项目中使用设备的camera. Ionic版本:v3.2.0 / 2017-05-10 / MIT Licensed / Release Notes ============= ...

  5. Asp.net MVC 4新项目中创建area的后续操作

    Asp.net MVC 4新项目中创建area后,往往HomeController与area的HomeController路由发生混淆,需要手工设置一些地方避免mvc无法识别默认路由的状况. 无废话具 ...

  6. Web项目中创建简单的错误处理页面

    当应用程序出现错误的时候,如果没有做错误页面处理的话,会直接输出一些敏感的信息出来,有时候甚至会直接将项目所在的物理路径给显示出来,严重缺乏安全性,并且错误种类繁多,页面风格不一,导致用户体验不好,本 ...

  7. Ionic 2 中创建一个照片倾斜浏览组件

    内容简介 今天介绍一个新的UI元素,就是当我们改变设备的方向时,我们可以看到照片的不同部分,有一种身临其境的感觉,类似于360全景视图在移动设备上的应用. 倾斜照片浏览 Ionic 2 实例开发 新增 ...

  8. ionic 项目中使用ngCordova插件$cordovaCamera筛选手机图库图片显示出来并上传

    原文档请看http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9B%BE%E7%89%87%E4%B8%8A%E4%B ...

  9. php 从2维数组组合为四维数组分析(项目中前台侧边栏导航三级分类显示)

    foreach函数(循环函数)内嵌套循环函数时,当内层完全循环完后,才会向上一级循环 数组要注意问题 array_merge----合并一个或多个数组 将一个或多个数组的单元合并起来,一个数组中的值附 ...

随机推荐

  1. 简易版DES加密和解密详解

    在DES密码里,是如何进行加密和解密的呢?这里采用DES的简易版来进行说明. 二进制数据的变换 由于不仅仅是DES密码,在其它的现代密码中也应用了二进制数据,所以无论是文章还是数字,都需要将明文变换为 ...

  2. WPF 简易手风琴 (ListBox+Expander)

    概述 之前听说很多大神的成长之路,几乎都有个习惯--写博文,可以有效的对项目进行总结.从而提高开发的经验.所以初学WPF的我想试试,顺便提高一下小学作文的能力.O(∩_∩)O哈哈~ 读万卷书不如行万里 ...

  3. Centos6.5安装memcached

    1.检查libevent 首先检查系统中是否安装了libevent(Memcache用到了libevent这个库用于Socket的处理). # rpm -q libevent libevent-1.4 ...

  4. CountDownLacth详解

    一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CounDownLatch.由于调用了countDown() 方法,所以在当前计数到达零之 ...

  5. TDE: Transparent Data Encryption brief introduction

    1. What is TDE? Briefly speaking, TDE is used to encrypted data. 2. The benifits: Belows are come fr ...

  6. Python下划线的使用

    References: [1]. http://python.jobbole.com/81129/ 本文将讨论Python中下划线(_)字符的使用方法.我们将会看到,正如Python中的很多事情,下划 ...

  7. Enum in Java

    1. Enum Class public enum ContainerPropertyConstants { RETAILER("retailer"), LINED("i ...

  8. Spring MVC 请求处理流程概览

    SpringMVC工作流程 图一:请求流程概述 图二:请求在每个组件的处理 解释Spring工作流程 1.用户向服务器发送请求,请求被spring前端控制Servelt DispatcherServe ...

  9. linux通配符与正则表达式

    通配符   *  任意字符,可重复多次     ? 任意字符,重复一次     [] 代表一个字符 举例: [a,b,c] 表示abc中任意一个 通配符的作用是用来匹配文件名的 正则表达式 正则表达式 ...

  10. Commons-lang API介绍

    4.1 Commons-lang API介绍 4.1.1 StringUtils 4.1.2 StringEscapeUtils 4.1.3 ArrayUtils 4.1.4 DateUtils 4. ...