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----合并一个或多个数组 将一个或多个数组的单元合并起来,一个数组中的值附 ...
随机推荐
- 分布式锁与实现(二)——基于ZooKeeper实现
引言 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提 ...
- 如何使用angular-ui的弹出框
在开发项目时,我们经常性的会遇到弹出框的需求,例如登陆,注册,添加信息等等....面对这一需求,我们当然也可以使用自己的双手进行编写,如果你时间充足可以试试. 今天我们讲解一下如何在angular框架 ...
- RNN的介绍
一.状态和模型 在CNN网络中的训练样本的数据为IID数据(独立同分布数据),所解决的问题也是分类问题或者回归问题或者是特征表达问题.但更多的数据是不满足IID的,如语言翻译,自动文本生成.它们是一个 ...
- “永恒之蓝"漏洞的紧急应对--毕业生必看
早上6点多起床了,第一次起这么早,昨天晚上12点多,看到了一则紧急通知,勒索软件通过微软"永恒之蓝"漏洞针对教育网进行了大规模的攻击,而且有很多同学中招.中招后的结果如下图所示. ...
- JAVA进程占用CPU分析
在一次生产环境中,服务器负载报警,SSH登录上看到CPU占用很高. 1.执行top命令,看到进程号为9737的进程持续占用CPU 2.怀疑是否是进程配置的内存不够了,引发了fullGC导致CPU占用高 ...
- Exchanger类详解
Exchanger并发辅助类,允许在并发任务之间交换数据.具体来说Exchanger类在两个线程之间定义同步点.当两个线程到达同步点时,它们交换数据结构.需要注意的是Exchanger类只能同步两个线 ...
- JAVA栈帧
简介 Java栈是一块线程私有的内存空间.java堆和程序数据相关,java栈就是和线程执行密切相关的,线程的执行的基本行为是函数调用,每次函数调用的数据都是通过java栈来传递的. Java栈与数据 ...
- 200 OK (from cache)原因
Meta标签中的http-equiv用来标记不可缓存或过期时间,但效果一般.而且代理缓存基本不访问HTML文档内容,所以尽量少用meta标签控制缓存. Pragma: no-cache Forces ...
- iOS自动打包并发布脚本
假如你的项目目录如下所示: |____AOP | |____AppDelegate.h | |____AppDelegate.m | |____Base.lproj | | |____LaunchSc ...
- 【面向对象设计原则】之里氏替换原则(LSP)
里氏代换原则由2008年图灵奖得主.美国第一位计算机科学女博士Barbara Liskov教授和卡内基·梅隆大学Jeannette Wing 教授于1994年提出,所以使用的是这位女博士的性命名的一个 ...