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 ...
随机推荐
- 受够了if (ModelState.IsValid)？ActionFitlter也是一路的坑啊！
这篇博客真是干货,干得估计还有点“磕牙”,所以还提供视频和代码.但基础稍弱的同学,怕还是得自行补充一些基础知识——就一篇文章,确实没办法面面俱到. 视频和代码下载:Demo - 百度云盘 · 一起帮 ...
- Another kind of Fibonacce(矩阵快速幂，HDU3306）
Another kind of Fibonacci Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Jav ...
- ASP实现计算机爱好者网站，可以直接浏览
利用ASP制作的计算机爱好者协会网站,内容比较全面,具有母版和子页的功能,利用ACCESS数据库进行资源存储.适合新手学习和网页制作比赛参考 下载地址:http://download.csdn.net ...
- 【JS中循环嵌套常见的六大经典例题+六大图形题，你知道哪几个？】
首先,了解一下循环嵌套的特点:外层循环转一次,内层循环转一圈. 在上一篇随笔中详细介绍了JS中的分支结构和循环结构,我们来简单的回顾一下For循环结构: 1.for循环有三个表达式,分别为: ①定义循 ...
- XSS研究2-来自内部的XSS攻击的防范
引入: 前面我们分2篇文章分别探讨了来自外部的XSS攻击和来自内部的XSS攻击,现在我们来专门探讨如何防范来自内部的XSS攻击. 实践: http://www.cnblogs.com/crazy ...
- APP为什么需要着陆页
小编APP运营团队一直认为,虽然大多数的用户会在App Store或安卓应用商店中搜寻我们的应用,但也有许多用户会通过传统的PC端搜索来寻找答案.而且在APP营销中,为了更好的将用户转换为下载或购买, ...
- DDD理论学习系列（4）-- 领域模型
DDD理论学习系列目录 1.引言 我们还是先来拆词理解,领域模型可以拆为"领域"和"模型"二词. 领域:按照我们之前的文章的理解,DDD中的领域是指软件系统要解 ...
- linux平台下Hadoop下载、安装、配置
在这里我使用的linux版本是CentOS 6.4 CentOS-6.4-i386-bin-DVD1.iso 下载地址: http://mirrors.aliyun.com/cen ...
- Wampserver红色橙色解决思路----端口冲突是关键
Wampserver不是绿色:wampserver下载安装不需要配置环境,在这之前需要下载tomcat,并确保启动,不然会是红色.安装好wampserver(就是在安装过程不会弹出缺少什么文件,我的就 ...
- Python成长之路 — 字典
一.字典的定义与创建 字典是Python中唯一内建的映射类型.你可以将其想象成书本的目录,章节名称代表"key",页码则代表"value".书本的目录本质上是也 ...