使用 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"