【发布时间】：2015-04-28 14:27:24
【问题描述】：
我正在尝试学习 Ionic 编程，我想创建一个带有登录站点的应用程序，在该站点中可以输入登录/密码信息，然后进入带有侧菜单的站点。
我试图修改这个例子： https://github.com/GeorgiCodes/ionic-side-menu-with-navigation
我现在的问题是我想导航到登录页面，然后导航到菜单站点，但如果我尝试这样做，它只会向我显示一个空白页面
这是我的 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ionic Seed</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- ionic css -->
<link href="css/ionic.min.css" rel="stylesheet">
<!-- your app's css -->
<link href="css/app.css" rel="stylesheet">
<!-- angularjs scripts -->
<script src="js/vendor/ionic/ionic.min.js"></script>
<script src="js/vendor/angular/angular.min.js"></script>
<script src="js/vendor/angular/angular-animate.min.js"></script>
<script src="js/vendor/angular/angular-resource.min.js"></script>
<script src="js/vendor/angular/angular-sanitize.min.js"></script>
<script src="js/vendor/angular/angular-ui-router.min.js"></script>
<script src="js/vendor/ionic/ionic-angular.min.js"></script>
<!-- cordova script -->
<script src="cordova.js"></script>
<!-- your app's script -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</head>
<!-- 'sideMenuApp' is the name of this angular module (js/app.js)-->
<body ng-app="sideMenuApp">
<ion-nav-view>
<ion-view>
<ion-content>
</ion-content>
</ion-view>
</ion-nav-view>
</body>
</html>这是 login.html
<!DOCTYPE html>
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>这就是 menu.html
<ion-view>
<ion-content>
<div>
<ion-side-menus>
<!-- Center content -->
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-assertive" back-button-type="button-icon"
back-button-icon="ion-arrow-left-c"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
<!-- Left Side Menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item ng-click="goTo(item.link)" class="item item-icon-left" ng-repeat="item in list">
<i ng-class="item.iconClass"></i>
{{item.text}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
</ion-content>
</ion-view>最后是 app.js
var sideMenuApp = angular.module('sideMenuApp', ['ionic', 'sideMenuApp.controllers', 'sideMenuApp.services']);
sideMenuApp.config(function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
sideMenuApp.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// 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
.state('login',{
url: 'login',
controller: 'MyLogin_Controller',
templateUrl: 'templates/login.html'
})
.state('menu', {
url: 'menu',
controller:'Menu_Controller',
templateURL: 'templates/menu.html'
});
/* .state('one', {
url: '/one',
controller: 'OneController',
templateUrl: 'templates/one.html'
})
.state('two', {
url: '/two',
controller: 'TwoController',
templateUrl: 'templates/two.html'
})
.state('three', {
url: '/three',
controller: 'ThreeController',
templateUrl: 'templates/three.html'
});
*/
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
}
])和controller.js
angular.module('sideMenuApp.controllers', [])
.controller('MyLogin_Controller', function($scope, LoginService, $ionicPopup, $state) {
$scope.data = {};
$scope.login = function() {
LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) {
$state.go('one');
}).error(function(data) {
var alertPopup = $ionicPopup.alert({
title: 'Wrong Login',
template: 'Please check your credentials!'
});
});
}
})
.controller('Menu_Controller', function ($scope, $location, MenuService) {
// "MenuService" is a service returning mock data (services.js)
$scope.list = MenuService.all();
$scope.goTo = function(page) {
console.log('Going to ' + page);
$scope.sideMenuController.toggleLeft();
$location.url('/' + page);
};
})
.controller('OneController', function ($scope) {
$scope.navTitle = "";
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.sideMenuController.toggleLeft();
}
}];
$scope.rightButtons = [];
})
.controller('TwoController', function ($scope) {
$scope.navTitle = "";
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.sideMenuController.toggleLeft();
}
}];
$scope.rightButtons = [];
})
.controller('ThreeController', function ($scope) {
$scope.navTitle = "";
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.sideMenuController.toggleLeft();
}
}];
$scope.rightButtons = [];
});一、二、三.html目前为空白。
到目前为止，我已经读过 One, Two, Three.html 可能必须是 menu 的子项，这样它才会是这样的
.state('menu.one', { 网址：'/一个'， 控制器：'OneController'， 模板网址：'模板/one.html' })
但问题是我什至无法在开始时到达菜单或登录页面。 我认为通常它至少应该使用 $urlRouterProvider.otherwise('/login'); 登录 但它只是一个空白页。 我很确定 index.html 或登录/菜单控制器有问题，但此时我无法弄清楚，所以也许你们中的某个人可以给我一个提示或看到问题。
提前致谢并致以最诚挚的问候
【问题讨论】：