使用 ionic 和 angular 进行路由
Routing with ionic and angular
我正在尝试使用 Angular、Meteorjs 和 Ionic Framework。多亏了 urigo:angular 和 urigo:ionic 包,一切变得简单。不幸的是,我无法弄清楚如何配置离子链接和 angular 路由以使其正常工作。我尝试了 html5Mode on/off、base href、anchors 等的不同组合,但没有任何效果。欢迎提出如何修复它的每个建议?
app.js
angular.module('namo', ['angular-meteor', 'ui.router', 'ionic']);
function onReady() {
angular.bootstrap(document, ['namo']);
}
if (Meteor.isCordova) {
angular.element(document).on("deviceready", onReady);
}
else {
angular.element(document).ready(onReady);
}
路由器
angular.module("namo").config(['$urlRouterProvider', '$stateProvider', '$locationProvider', '$ionicConfigProvider',
function ($urlRouterProvider, $stateProvider, $locationProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0)
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: '/',
views: {
'content' :{
templateUrl: "client/home/views/home.ng.html",
controller: 'HomeCtrl'
}
}
})
.state('user.profile', {
url: '/profile',
views: {
'content' :{
templateUrl: 'client/user/views/profile.ng.html',
controller: 'ProfileCtrl'
}
}
});
$urlRouterProvider.otherwise("/");
}]);
和主要布局
<head>
<base href="/">
</head>
<body>
<ion-nav-view></ion-nav-view>
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<a href="/" class="item" menu-close>Home</a>
<a href="/profile" class="item" menu-close>Profile</a>
</ul>
</ion-content>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<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="content" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</body>
控制器(主页和配置文件)包含简单的 "hello home" 和 "hello profile"。不幸的是,只显示一条消息,在链接之间切换不会触发更多消息。
在路由器状态下尝试将您的视图名称从 content 更改为
home 和 profile 并使用 ui-sref 而不是 href ui-sref="profile"
我正在尝试使用 Angular、Meteorjs 和 Ionic Framework。多亏了 urigo:angular 和 urigo:ionic 包,一切变得简单。不幸的是,我无法弄清楚如何配置离子链接和 angular 路由以使其正常工作。我尝试了 html5Mode on/off、base href、anchors 等的不同组合,但没有任何效果。欢迎提出如何修复它的每个建议?
app.js
angular.module('namo', ['angular-meteor', 'ui.router', 'ionic']);
function onReady() {
angular.bootstrap(document, ['namo']);
}
if (Meteor.isCordova) {
angular.element(document).on("deviceready", onReady);
}
else {
angular.element(document).ready(onReady);
}
路由器
angular.module("namo").config(['$urlRouterProvider', '$stateProvider', '$locationProvider', '$ionicConfigProvider',
function ($urlRouterProvider, $stateProvider, $locationProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0)
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: '/',
views: {
'content' :{
templateUrl: "client/home/views/home.ng.html",
controller: 'HomeCtrl'
}
}
})
.state('user.profile', {
url: '/profile',
views: {
'content' :{
templateUrl: 'client/user/views/profile.ng.html',
controller: 'ProfileCtrl'
}
}
});
$urlRouterProvider.otherwise("/");
}]);
和主要布局
<head>
<base href="/">
</head>
<body>
<ion-nav-view></ion-nav-view>
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<a href="/" class="item" menu-close>Home</a>
<a href="/profile" class="item" menu-close>Profile</a>
</ul>
</ion-content>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<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="content" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</body>
控制器(主页和配置文件)包含简单的 "hello home" 和 "hello profile"。不幸的是,只显示一条消息,在链接之间切换不会触发更多消息。
在路由器状态下尝试将您的视图名称从 content 更改为
home 和 profile 并使用 ui-sref 而不是 href ui-sref="profile"