01 ionic+angular开发webapp笔记

首先就是搭建环境，环境搭建比较费劲，用了三天才成功

第一步，安装java的jdk，然后配置系统环境，就那三条东西加入环境变量

第二部，去下载android studio，里面包含android sdk，打开想整哪个版本下载哪个版本的sdk，下载完一看30多g，吓到我了。

第三部，安装nodejs，简单了，直接略过。

第四部，npm install -g cordova

第五步，npm install -g ionic

完活，环境搭建完成。

然后先创建一个app测试一下

找个文件夹

ionic start mytest
           

做一个案例

然后

ionic platform add android
           

然后再

ionic build android
           

将手机连接电脑，敲入

ionic run android
           

成功的话，就会在手机上显示，安装app。好幸福

Ios  创建安装运 行
ionic start myproject
cd myproject
ionic platform add ios
ionic build ios
ionic emulate ios
Android  创建安装运 行
ionic start myproject
cd myproject
ionic platform add android
ionic build android
ionic emulate android (模拟器运行)
ionic run android (连接上手机运行
           

如果每次都用手机打开会很麻烦，所以，可以使用下面的命令，在浏览器中打开

ionic serve
           

解决android系统导航栏在顶部的问题

找到根目录下的www/js/app.js 从.config开始以后的使用下面代码覆盖，覆盖之前记得备份哦

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

	$ionicConfigProvider.platform.ios.tabs.style('standard');
	$ionicConfigProvider.platform.ios.tabs.position('bottom');
	$ionicConfigProvider.platform.android.tabs.style('standard');
	$ionicConfigProvider.platform.android.tabs.position('bottom');

	$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
	$ionicConfigProvider.platform.android.navBar.alignTitle('center');

	$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
	$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');

	$ionicConfigProvider.platform.ios.views.transition('ios');
	$ionicConfigProvider.platform.android.views.transition('android');

	// Ionic uses AngularUI Router which uses the concept of states
	// Learn more here: https://github.com/angular-ui/ui-router
	// Set up the various states which the app can be in.
	// Each state's controller can be found in controllers.js
	$stateProvider

	// setup an abstract state for the tabs directive
		.state('tab', {
		url: "/tab",
		abstract: true,
		templateUrl: "templates/tabs.html"
	})

	// Each tab has its own nav history stack:

	.state('tab.dash', {
		url: '/dash',
		views: {
			'tab-dash': {
				templateUrl: 'templates/tab-dash.html',
				controller: 'DashCtrl'
			}
		}
	})

	.state('tab.chats', {
			url: '/chats',
			views: {
				'tab-chats': {
					templateUrl: 'templates/tab-chats.html',
					controller: 'ChatsCtrl'
				}
			}
		})
		.state('tab.chat-detail', {
			url: '/chats/:chatId',
			views: {
				'tab-chats': {
					templateUrl: 'templates/chat-detail.html',
					controller: 'ChatDetailCtrl'
				}
			}
		})

	.state('tab.account', {
		url: '/account',
		views: {
			'tab-account': {
				templateUrl: 'templates/tab-account.html',
				controller: 'AccountCtrl'
			}
		}
	});

	// if none of the above states are matched, use this as the fallback
	$urlRouterProvider.otherwise('/tab/dash');

});
           

然后从新ionic build android 一下，然后，就真的成功啦，好神奇！！！

最后笔记，使用CrossWalk提高app的运行速度

优点：app运行速度提高，缺点：安装包会变大十几M

使用方法，在项目文件夹内使用以下代码

1．集成 crosswalk
ionic browser add crosswalk
2.卸载 crosswalk
ionic browser revert android 或者 ionic browser remove crosswalk
           

貌似现在上面的命令不行了，我现在用的下面的

cordova plugin add cordova-plugin-crosswalk-webview
           

啥都没写，项目竟然就已经达到30M了，感觉确实有点大了。。。。