Ionic Demo 解析
Ionic Demo 解析
index.html 解析
1.引入所需要的类库
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
2.引入自定义js(app.js,servcie,controller等)
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
3.添加app显示的容器 (此处 ng-app 定义了app总模块名称)
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
app.js解析
1.定义总模块,引入需要的模块(此处引入了ionic,starter.controllers)
2.运行时需要的操作设置
3.配置app的导航映射
//定义总模块名为starter，此处名称要与index上的ng-app相对应
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
//app 准备完成后要进行什么操作 放到这个方法里面
});
})
//配置app的导航
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
//设置viewport ,配置其controller
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
//配置一个模块
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
//配置一个模块，并且url能接收一个参数
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
// 其他情况下跳转到该页面
$urlRouterProvider.otherwise('/app/playlists');
});
menu.html解析
<!-- viewport-->
<ion-side-menus enable-menu-with-back-views="false">
<!-- 页面切换的主容器-->
<ion-side-menu-content>
<!--配置导航工具栏 -->
<ion-nav-bar class="bar-stable">
<!--添加后退按钮 -->
<ion-nav-back-button>
</ion-nav-back-button>
<!-- 添加一个菜单按钮在左边-->
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<!--添加切换页面的容器 -->
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<!-- 配置导航菜单 -->
<ion-side-menu side="left">
<!-- 菜单名称-->
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<!--菜单列表，跳转配置 -->
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
各个模块页面定义
1.使用ion-view为根标签(设置页面title)
2.ion-content标签里面放主要页面内容
<!--定义页面title-->
<ion-view view-title="Browse">
<!--定义页面主要内容-->
<ion-content>
<!--页面内容-->
<h1>Browse</h1>
</ion-content>
</ion-view>
controller定义
1.定义一个controllers模块
angular.module('starter.controllers', []);
2.controller都定义在controllers，模块之下
angular.module('starter.controllers')
.controller('AppCtrl', ['$scope',function($scope) {
}]);
3.同时定义
angular.module('starter.controllers', [])
.controller('AppCtrl', ['$scope',function($scope) {
}]);
示例项目
Ionic Demo 解析的更多相关文章
- IOS CoreData 多表查询demo解析
在IOS CoreData中,多表查询上相对来说,没有SQL直观,但CoreData的功能还是可以完成相关操作的. 下面使用CoreData进行关系数据库的表与表之间的关系演示.生成CoreData和 ...
- 转：RealThinClient LinkedObjects Demo解析
这个Demo源码实现比较怪,有点拗脑,原因估是作者想把控件的使用做得简单,而封装太多. 这里说是解析,其实是粗析,俺没有耐心每个实现点都查实清楚,看源码一般也就连读带猜的. 这个Demo表达出的意义, ...
- android报表图形引擎(AChartEngine)demo解析与源码
AchartEngine支持多种图表样式,本文介绍两种:线状表和柱状表. AchartEngine有两种启动的方式:一种是通过ChartFactory.get***View()方式来直接获取到view ...
- Android蓝牙联机Demo解析
写在前面: 手游的双人对战实现方式有很多,比如: 联网对战(需要一个服务器负责转发客户端请求,各种大型手游的做法) 分屏对战(手机上下分屏,典型的例子就是切水果的双人对战) 蓝牙联机对战(通过蓝牙联机 ...
- 人脸识别Demo解析C#
概述 不管你注意到没有,人脸识别已经走进了生活的角角落落,钉钉已经支持人脸打卡,火车站实名认证已经增加了人脸自助验证通道,更别提各个城市建设的『智能城市』和智慧大脑了.在人脸识别业界,通常由人脸识别提 ...
- SpringBoot使用activiti自定义流程demo解析
环境搭建[这里直接讲解自定义流程] 集成 Activiti Modeler 下载源码 我这里选用的是 Activiti 5.23.0 版本的页面,下载 zip,解压 Activiti 5.23.0 源 ...
- Tensorflow 的Word2vec demo解析
简单demo的代码路径在tensorflow\tensorflow\g3doc\tutorials\word2vec\word2vec_basic.py Sikp gram方式的model思路 htt ...
- Flux Demo解析
最近学习了阮一峰老师的博文 "Flux入门教程",博文中详细介绍了Flux框架和Controller view模式,并提供了Demo,受益匪浅. 现特参考阮老师的Demo,绘制了一 ...
- SpringMVC小demo解析
第一次实际接触SpringMVC,之前在教程网站上看得是概念性的. SpringMVC是属于Java框架SSM中的一环 在做了一个小demo后发现原来编程如此简单. 首先建立动态网页项目(Dynami ...
随机推荐
- maven 热部署至tomcat
1.配置tomcat的界面访问账号和权限./tomcat/conf目录下tomcat-users.xml添加 这里是根据自己的需求添加的一个角色权限 <role rolename="a ...
- windows 上优雅的安装 node 和 npm
windows 的一键安装包,应该是最简单的 node 安装方式. 其实很多软件,拷贝过来就可以运行,根本不需要所谓的"安装"过程. 新建一个目录专门了管理 node 和 npm ...
- 【JAVAWEB学习笔记】21_多条件查询、attr和prop的区别和分页的实现
今天主要学习了数据库的多条件查询.attr和prop的区别和分页的实现 一.实现多条件查询 public List<Product> findProductListByCondition( ...
- 0Raspi开启root权限并登录使用
sudo passwd root sudo passwd --unlock root su root 切换回用 su pi 开始登陆选择root preferences>raspberry ...
- RPi WiringPi安装使用
sudo apt-get install git-core git clone git://git.drogon.net/wiringPi cd wiringPi ./build 使用Exam ...
- Spark踩坑记——从RDD看集群调度
[TOC] 前言 在Spark的使用中,性能的调优配置过程中,查阅了很多资料,之前自己总结过两篇小博文Spark踩坑记--初试和Spark踩坑记--数据库(Hbase+Mysql),第一篇概况的归纳了 ...
- Vue2.x中的Render函数
Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...
- VR全景：“互联网+之后的下一个“风口”
2017年VR虚拟现实会成为流行趋势吗? 2017年,另一个时代正在悄然走来--720全景时代!如果你错过了前十年的互联网大爆发,千万不要再错过接下来十年的VR全景时代的机遇! VR全景是" ...
- 在.NET Core中使用Irony实现自己的查询语言语法解析器
在之前<在ASP.NET Core中使用Apworks快速开发数据服务>一文的评论部分,.NET大神张善友为我提了个建议,可以使用Compile As a Service的Roslyn为语 ...
- Vulkan Tutorial 12 Fixed functions
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 早起的图形API在图形渲染管线的许多阶段提供了默认的状态.在Vulkan中,从vie ...