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 ...
随机推荐
- yii2 resetful 授权验证
什么是restful风格的api呢?我们之前有写过大篇的文章来介绍其概念以及基本操作. 既然写过了,那今天是要说点什么吗? 这篇文章主要针对实际场景中api的部署来写. 我们今天就来大大的侃侃那些年a ...
- angular控制器之间的传值
每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个 ...
- 关于web程序快速开发个人见解以及经历
由于在之前公司业务的发展,需要在基于核心业务的基础上开发其他较为独立的业务系统,所以就有了这个基于Dapper,DDD概念的基础框架,由于个人基于这个框架已经经历过两个系统的开发,也因为其他项目团队需 ...
- My-Blog搭建过程：如何让一个网站从零到可以上线访问
文章简述 5月13号的时候,上线了自己的个人博客网站:http://blog.hanshuai.xin,随后在平台上发布了一篇关于My-Blog的介绍博客<Docker+SpringBoot+M ...
- 10.Java 加解密技术系列之 DH
Java 加解密技术系列之 DH 序 概念 原理 代码实现 结果 结束语 序 上一篇文章中简单的介绍了一种非对称加密算法 — — RSA,今天这篇文章,继续介绍另一种非对称加密算法 — — DH.当然 ...
- 分布式版本控制git常见问题之gitignore冲突
所见即所得,建议大家用可视化的SourceTree专为git打造的,非常好用,废话不多说了. 原因是有人提交了.gitignore里面的内容,所以和本地的不一样,这样就有问题,那么pull都不可以,所 ...
- C语言错题小本子
int a; ; a = ! x< //a的值是多少 我的答案:0, 正确答案:1 错误原因:没有熟练掌握运算符的优先级 // 找出下面无效的C语言变量名 A. _a B. main C. pr ...
- JavaScript实现上传图片预览[js前端实现]
<body> <input type="file" id="file_input" onchange="show_image()&q ...
- iOS 手势
一.看这里 二.抽象类 UIGestureRecognizer 继承于该类的有7类:轻点,捏合,拖拽,滑动,长按,旋转,边缘滑动; 一个手势可以绑定多个事件 - (void)addTarget:( ...
- C++构造函数（一）
本篇是介绍C++的构造函数的第一篇(共二篇),属于读书笔记,对C++进行一个系统的复习. 构造函数的概念和作用 全局变量未初始化时为0,局部变量未初始化时的值却是无法预测的.这是因为,全局变量的初始化 ...