Ionic+Angular 开发移动应用三:路由


Ionic+Angular 开发移动应用三

欢迎交换友链: Laker’s Blog–进击的程序媛
Github:https://github.com/younglaker
V信: lakerHQ (请注明‘来自博客’)


接下来我会在ubuntu里开发,windows大同小异。

ionic模板已经建好一系列依赖,比如scss的编译,自动检测文件变化并刷新浏览器等。

做一个页面

在文件夹www/template下新建文件page.html

1
2
3
4
5
<ion-view view-title="First Page">
<ion-content class="padding">
<h1>hello world</h1>
</ion-content>
</ion-view>

ion-content标签在又头部导航是,记得加 class=”padding”,不然就被导航遮住一部分

app.js 添加路由:

1
2
3
4
5
6
7
8
9
.state('page', {
url: '/page', // 定义的跳转页面
views: {
'': { // 留空
templateUrl: 'templates/page.html', //页面地址
controller: 'PageCtrl' //控制器名,在下面的配置要用
}
}
})

controller.js 添加控制器:

1
2
3
4
5
6
.controller('PageCtrl', function($scope) {
// PageCtrl 是在app.js里面定义的控制器名
$scope.settings = {
enableFriends: true
};
})

terminal运行:

1
$ ionic serve

浏览器自动打开首页http://10.0.2.15:8100/#/tab/dash,把tab/dash改成page,就可以访问我们刚刚写的页面http://10.0.2.15:8100/#/page

注意,不要漏掉 /#

在chrome里进入开发者模式,点击进入移动开发模式,可以看到效果。

开发者模式

看一下范例中tabs的运用

tabs

tab.html 里定义了底部tabs,比如其中一个tab:

1
2
3
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
  • title: 标签的文字
  • icon-off:标签不激活状态的icon
  • icon-on: 标签激活状态的icon
  • href=”#/tab/dash”: tab页地址

app.js看下dash页面的路由配置,注意与我们单页面page不同之处

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//tab
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// tab.dash
.state('tab.dash', { //注意,这里是tab.dash
url: '/dash',
views: {
// html里面的name <ion-nav-view name="tab-dash">
// 刚刚我们做page页的时候留空
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})

新建一个tab

http://ionicons.com 可以找到更多icons。

tab.html 添加:

1
2
3
<ion-tab title="More" icon-off="ion-social-angular-outline" icon-on="ion-social-angular" href="#/tab/more">
<ion-nav-view name="tab-more"></ion-nav-view>
</ion-tab>

app.js

1
2
3
4
5
6
7
8
9
.state('tab.more', {
url: '/more',
views: {
'tab-more': {
templateUrl: 'templates/tab-more.html',
controller: 'MoreCtrl'
}
}
})

controller.js

1
2
3
4
5
.controller('MoreCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
})

Ionic+Angular 开发移动应用三:路由

本文原创自http://laker.me/blog,转载请注明出处,欢迎交换友链

如果本文对您有帮助,微信扫一扫,请我喝杯咖啡吧

评论组件不稳定,有事请联系V信 lakerHQ (请备注来自博客)