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) {

	}]);

示例项目

github - IonicDemo

Ionic Demo 解析的更多相关文章

  1. IOS CoreData 多表查询demo解析

    在IOS CoreData中,多表查询上相对来说,没有SQL直观,但CoreData的功能还是可以完成相关操作的. 下面使用CoreData进行关系数据库的表与表之间的关系演示.生成CoreData和 ...

  2. 转：RealThinClient LinkedObjects Demo解析

    这个Demo源码实现比较怪,有点拗脑,原因估是作者想把控件的使用做得简单,而封装太多. 这里说是解析,其实是粗析,俺没有耐心每个实现点都查实清楚,看源码一般也就连读带猜的. 这个Demo表达出的意义, ...

  3. android报表图形引擎(AChartEngine)demo解析与源码

    AchartEngine支持多种图表样式,本文介绍两种:线状表和柱状表. AchartEngine有两种启动的方式:一种是通过ChartFactory.get***View()方式来直接获取到view ...

  4. Android蓝牙联机Demo解析

    写在前面: 手游的双人对战实现方式有很多,比如: 联网对战(需要一个服务器负责转发客户端请求,各种大型手游的做法) 分屏对战(手机上下分屏,典型的例子就是切水果的双人对战) 蓝牙联机对战(通过蓝牙联机 ...

  5. 人脸识别Demo解析C#

    概述 不管你注意到没有,人脸识别已经走进了生活的角角落落,钉钉已经支持人脸打卡,火车站实名认证已经增加了人脸自助验证通道,更别提各个城市建设的『智能城市』和智慧大脑了.在人脸识别业界,通常由人脸识别提 ...

  6. SpringBoot使用activiti自定义流程demo解析

    环境搭建[这里直接讲解自定义流程] 集成 Activiti Modeler 下载源码 我这里选用的是 Activiti 5.23.0 版本的页面,下载 zip,解压 Activiti 5.23.0 源 ...

  7. Tensorflow 的Word2vec demo解析

    简单demo的代码路径在tensorflow\tensorflow\g3doc\tutorials\word2vec\word2vec_basic.py Sikp gram方式的model思路 htt ...

  8. Flux Demo解析

    最近学习了阮一峰老师的博文 "Flux入门教程",博文中详细介绍了Flux框架和Controller view模式,并提供了Demo,受益匪浅. 现特参考阮老师的Demo,绘制了一 ...

  9. SpringMVC小demo解析

    第一次实际接触SpringMVC,之前在教程网站上看得是概念性的. SpringMVC是属于Java框架SSM中的一环 在做了一个小demo后发现原来编程如此简单. 首先建立动态网页项目(Dynami ...

随机推荐

  1. POJ1182食物链（并查集）

    Description 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到 ...

  2. Cornerstone 3.0.3 for mac 破解版

    破解版本 直接安装即可 解压密码:xclient.info 下载地址: 链接: https://pan.baidu.com/s/1mhD64vY 密码: nwmc

  3. html学习笔记 - 特殊字符

  4. Spring Boot 声明式事务结合相关拦截器

    我这项目的读写分离方式在使用ThreadLocal实现的读写分离在迁移后的偶发错误里提了,我不再说一次了,这次是有要求读写分离与事务部分要完全脱离配置文件,程序员折腾了很久,于是我就查了一下,由于我还 ...

  5. Java虚拟机原理

    1.编译机制 分析和输入到符号表: 词法分析:将代码转化为token序列 语法分析:由token序列生成抽象语法树 输入到符号表:将类中出现的符号输入到类的符号表 注解处理: 处理用户自定义注解,之后 ...

  6. （数字IC）低功耗设计入门（六）——门级电路低功耗设计优化

    三.门级电路低功耗设计优化 (1)门级电路的功耗优化综述 门级电路的功耗优化(Gate Level Power Optimization,简称GLPO)是从已经映射的门级网表开始,对设计进行功耗的优化 ...

  7. ATmega8仿真——外部中断的学习

    前面我们学习了ATmega8的I/O口作为通用数字输入/输出口来用时对LED数码管控制和扫描按键的应用: 但ATmega8多数的I/O口都是复用口,除了作为通用数字I/O使用,还有其第二功能,这里我们 ...

  8. Unity遮挡透明渐变

    遮挡透明若没有渐变实现方法: 1.透明中物体存在list中 2.每过一段时间(可以每帧,但是流畅性会降低)摄像机发送一条射线向玩家,out hitInfo 3.list与hitInfo比对,将在lis ...

  9. 【Python之基本数据类型 基本运算】

    一.基本数据类型 1.字符串 类:str 方法:选中str,按住command(ctrl)+左键跳转至对应的方法 字符串常用方法归纳如下: 1)capitalize 功能:实现字符串首字母大写,自身不 ...

  10. Python教程(0)——介绍

    What's Python? Python是一种编程语言,由荷兰人Guido van Rossum于1989年,为打发无聊的圣诞节而开发的. Python的优点是语法简洁,代码量比C/C++.Java ...