环境配置
- 正常配置中文版官方地址，不多说了
- 异常情况：
安装过程中出现，没有安装Python错误，所以需要安装Python.
出现VC++环境错误，需要安装VS2015.
分析ionic导航过程
官方例子：地址
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>菜鸟教程(runoob.com)</title>
<link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
<script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'home-tab': {
templateUrl: "templates/facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
.state('tabs.navstack', {
url: "/navstack",
views: {
'about-tab': {
templateUrl: "templates/nav-stack.html"
}
}
})
.state('tabs.contact', {
url: "/contact",
views: {
'contact-tab': {
templateUrl: "templates/contact.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) {
console.log('HomeTabCtrl');
});
</script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts.html" type="text/ng-template">
<ion-view view-title="Facts">
<ion-content class="padding">
<p>Banging your head against a wall uses 150 calories an hour.</p>
<p>Dogs have four toes on their hind feet, and five on their front feet.</p>
<p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
<p>A cockroach will live nine days without it's head, before it starves to death.</p>
<p>Polar bears are left handed.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts2.html" type="text/ng-template">
<ion-view view-title="Also Factual">
<ion-content class="padding">
<p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
<p>1 in every 4 Americans has appeared on T.V.</p>
<p>11% of the world is left-handed.</p>
<p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
<p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
<p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/about.html" type="text/ng-template">
<ion-view view-title="About">
<ion-content class="padding">
<h3>Create hybrid mobile apps with the web technologies you love.</h3>
<p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
<p>Built with Sass and optimized for AngularJS.</p>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p></p>
</ion-content>
</ion-view>
</script>
<script id="templates/contact.html" type="text/ng-template">
<ion-view title="Contact">
<ion-content>
<div class="list">
<div class="item">
@IonicFramework
</div>
<div class="item">
@DriftyTeam
</div>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
- 项目启动首次执行config配置信息，通过路由执行到$urlRouterProvider.otherwise("/tab/home"); 其中"/tab/home"就是url地址
- 加载url为tab的页面（这个不会单独显示，这里为了便于理解），执行里面的templateUrl地址tabs.html
- 加载完毕后，再找下面的home
.state('tabs.home',
{ url: "/home",
views: { 'home-tab':
{ templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
首先看到state为tabs.home所以url完整地址为：state为tabs中url + 自己的url 即为/tab/home, 就是我们要找的地址，然后就会显示templateUrl地址home.html，显示到<body>标签中的<ion-nav-view>
- 当点击底部tab的时候，对应的href为 href="#/tab/home"，就会跳转到这个地址，地址查找和前面一样，这里要注意的是<ion-nav-view name="home-tab"></ion-nav-view> 这个view的name和
.state('tabs.home',
{ url: "/home",
views: { 'home-tab':
{ templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
中的views中的'home-tab'是对应的，不一样的话也是显示不出来的
- state中的controller也是要定义的，然后会报错找不到。
Ionic 路由页面间传递复杂参数 ！！！
Router跳转：参考链接
- 但是这里要说的是传递对象，传递对象其实用JavaScript的序列化就可以了，和传递字符串一样的方式！（必须是抽象类的实现类才可以！！！）
- 如果两个View公用同一个service，就可以在service里面设置set ，get 函数来传递参数.
Ionic生命周期
Controller生命周期：参考blog
Ionic分页加载更多
List加载更多：参考链接
Ionic无限轮播
- 不显示问题
如题所示：
<ion-slide-box slide-interval='2000' auto-play='true' does-continue='true' style="height: 150px">
<ion-slide ng-repeat="item in infoList track by $index">
<div class="box blue">
<img ng-src={{item}} width="100%">
</div>
</ion-slide>
</ion-slide-box>
HTML中infoList是从后台得到的url数组，但是这样不显示，一定要添加$ionicSlideBoxDelegate，然后拿到数组以后，手工渲染一下$ionicSlideBoxDelegate.update(); 就可以了！！！
- 无限循环问题
这样做了以后就会出现，轮播图从第一个滚动到最后一个然后不动了，就是不会循环播放，所以在最后还需要加上$ionicSlideBoxDelegate.loop(true); 来实现！！！ - 去其他页面在返回，轮播图不会动了
1.初次进来的时候
$ionicSlideBoxDelegate.$getByHandle('my-handle').update();
$ionicSlideBoxDelegate.$getByHandle('my-handle').loop(true);
$ionicSlideBoxDelegate.$getByHandle('my-handle').start();
2.再次返回的时候
$ionicSlideBoxDelegate.$getByHandle('my-handle').next();
Ionic打电话
-
首先在config.xml中配置<access origin="tel:*" launch-external="yes" />
然后Android就可以打电话了，但是IOS不可以 -
还要在config.xml中配置<allow-navigation href="*" />
这样ios也可以打电话了，完美解决！
Ionic 数据库PouchDB ＋ SQLite
参考链接：
ionic 通过PouchDB ＋ SQLite来实现app的本地存储（Local Storage）
完全按照官方文档步骤就行了，链接
Ionic SQLite原生说明链接
原生操作Demo
网友评论