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 ...
随机推荐
- JEESZ分布式框架简介
声明:该框架面向企业,是大型互联网分布式企业架构,后期会介绍Linux上部署高可用集群项目. 项目基础功能截图(自提供了最小部分) 介绍 1. 项目核心代码结构截图 <modules& ...
- 响应式web-媒体查询
响应式web-媒体查询 媒体查询是一个将很多响应式概念和工具连接在一起的粘合剂.这些查询语句都是简单但是功能很强大的,它们允许我们检测设备属性,定义规则,并根据规则等的不同加载不同的 CSS 属性.例 ...
- 刑天DDOS攻击器下一版本即将使用NTP放大功能
刑天DDOS攻击器下一版本即将使用NTP放大功能 在一次无语实验中无意发现NTP方法后的攻击流量相当可观,Linux实测G口高达30G,也就是说最大可以放大30倍的攻击流量是何等的威武.而 ...
- nodeJS中的包
前面的话 Node组织了自身的核心模块,也使得第三方文件模块可以有序地编写和使用.但是在第三方模块中,模块与模块之间仍然是散列在各地的,相互之间不能直接引用.而在模块之外,包和NPM则是将模块联系起来 ...
- nginx+tomcat+session共享(转)
1 起因 最近对新开发的web系统进行了压力测试,发现tomcat默认配置下压到600人的并发登录首页响应速度就有比较严重的影响,一轮出现2000多个的 500和502错误.我把登录的时间统计做了 ...
- 项目中的报错信息，maven报错等的总结
Maven是一个自动化的构建和管理工具.在项目开发中,如果遇到了错误(红叉),一般有如下的解决方法: 1.java.lang.UnsatisfiedLinkError: E:\apache-tomca ...
- ELK菜鸟手记 (四) - 利用filebeat和不同端口把不同服务器上的log4j日志传输到同一台ELK服务器
1. 问题描述 我们需要将不同服务器(如Web Server)上的log4j日志传输到同一台ELK服务器,介于公司服务器资源紧张(^_^) 2. 我们需要用到filebeat 什么是filebeat ...
- GitBook 使用
介绍 GitBook是一个基于Node.js的命令行工具,可使用 Github/Git和Markdown来制作精美的电子书,GitBook 并非关 Git的教程. 导出格式有PDF.HTML等,需要添 ...
- 通过wireshark学习Traceroute命令(UDP,ICMP协议)
traceroute: 通过TTL限定的ICMP/UDP/TCP侦测包来发现从本地主机到远端目标主机之间的第三层转发路径.用来调试网络连接性和路由问题. mtr: traceroute的一个变种,能根 ...
- STM8程序在IAR中报错 unable to allocate space for sections
Error[Lp011]: section placement failed: unable to allocate space for sections/blocks with a total es ...