Ionic Demo 解析

时间：2024-01-14 12:15:20

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

相关文章