ionic 项目中创建侧边栏的具体流程分4步简单学会
这是在学习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步简单学会的更多相关文章
- ionic 项目中添加modal的步骤流程
1.首先在templates文件夹下面定义一个新页面,xxx.html,template文件夹在空项目里面是没有的,需要手动添加一个,放在WWW文件夹下面. <ion-modal-view> ...
- Ionic项目中使用极光推送
Ionic项目中使用极光推送-android 对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...
- Ionic项目中使用极光推送-android
对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin ...
- Ionic项目中如何使用Native Camera
本文介绍如何在ionic项目中使用设备的camera. Ionic版本:v3.2.0 / 2017-05-10 / MIT Licensed / Release Notes ============= ...
- Asp.net MVC 4新项目中创建area的后续操作
Asp.net MVC 4新项目中创建area后,往往HomeController与area的HomeController路由发生混淆,需要手工设置一些地方避免mvc无法识别默认路由的状况. 无废话具 ...
- Web项目中创建简单的错误处理页面
当应用程序出现错误的时候,如果没有做错误页面处理的话,会直接输出一些敏感的信息出来,有时候甚至会直接将项目所在的物理路径给显示出来,严重缺乏安全性,并且错误种类繁多,页面风格不一,导致用户体验不好,本 ...
- Ionic 2 中创建一个照片倾斜浏览组件
内容简介 今天介绍一个新的UI元素,就是当我们改变设备的方向时,我们可以看到照片的不同部分,有一种身临其境的感觉,类似于360全景视图在移动设备上的应用. 倾斜照片浏览 Ionic 2 实例开发 新增 ...
- 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 ...
- php 从2维数组组合为四维数组分析(项目中前台侧边栏导航三级分类显示)
foreach函数(循环函数)内嵌套循环函数时,当内层完全循环完后,才会向上一级循环 数组要注意问题 array_merge----合并一个或多个数组 将一个或多个数组的单元合并起来,一个数组中的值附 ...
随机推荐
- C语言精要总结-指针系列(一)
考虑到指针内容繁多,这里将指针作为一个系列,从简入繁,一点一点深挖并掌握这C语言的精华.初步计划如下 此文为指针系列第一篇: C语言精要总结-指针系列(一) 内存与地址 我们可以把内存看做一排连续的房 ...
- webService 下得 拦截
当我们 对webservice 接口的 拦截 更具权限 来 判断 是否可以调用 一下是我的 一个demo 首先 我们写一个 拦截类 import javax.xml.soap.SOAPExcept ...
- 优化UI控件 【译】
翻译自:https://unity3d.com/cn/learn/tutorials/topics/best-practices/optimizing-ui-controls?playlist=300 ...
- SSM框架搭建——我的第一个SSM项目
转载自:http://blog.csdn.net/tmaskboy/article/details/51464791 作者使用MyEclipse 2014版本 本博客所编写程序源码为: http:// ...
- apache代理转发
打开apache安装目录的conf文件夹下的httpd.conf1.将以下两行前的注释字符 # 去掉:#LoadModule proxy_module modules/mod_proxy.so#Loa ...
- 每天一道Java题[4]
问题 怎么将字符串转换为int? 解答 此题看似简单,但经常出现在笔试等地方,由于大家习惯了用IDE,有什么还真未必能写出来.通常都是parseInt()方法进行转换,如下: Int n = Inte ...
- GUI Design Studio——如何创建项目展示文件
打开一个做好的项目,我这次以系统自带的 welcome项目做示例 选择左上角的File->Create Distribution File... 我需要的是整个项目,所以选择了The whol ...
- ArrayList源码解析(二)自动扩容机制与add操作
本篇主要分析ArrayList的自动扩容机制,add和remove的相关方法. 作为一个list,add和remove操作自然是必须的. 前面说过,ArrayList底层是使用Object数组实现的. ...
- WPF自动更新程序
WPF AutoUpdater 描述: WPF+MVVM实现的自动更新程序 支持更新包文件验证(比较文件MD5码) 支持区分x86与x64程序的更新 支持更新程序的版本号 支持执行更新策略 截图: 使 ...
- ionic 使用mobisscrolls,实现日期选择的插件
废话不多说,直接说用法: 1,先下载mobisscrolls的破解版,下载地址,链接:http://pan.baidu.com/s/1boSKf51 密码:5dft 当然你也可以去官网下载,不过官网的 ...