我正在尝试学习离子编程，我想创建一个带有登录站点的应用程序，其中一个人可以输入登录/ pw信息，然后进入带有侧边菜单的站点。
我试图改编这个例子： 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 = [];
});
到目前为止，一，二，三..是空白。
到目前为止我已经阅读过，One，Two，Three.html可能必须是菜单的孩子，这样才会有类似的东西
.state（＆＃39; menu.one＆＃39;，{ url：＆＃39; / one＆＃39;， 控制器：＆＃39; OneController＆＃39;， templateUrl：＆＃39; templates / one.html＆＃39; }）
但问题是我甚至无法在开始时到达菜单或登录页面。 我认为通常它至少应该使用$ urlRouterProvider.otherwise登录（＆＃39; / login＆＃39;）; 但它只是一个空白页面。 我很确定index.html或登录/菜单控制器中有什么问题但是在这一点上我只是想不通，所以也许你们中的一个可以给我一个提示或看到问题。
提前致谢并提出最好的问候
答案 0 :(得分：0)
如果您执行menu.one，则需要在menu.html
中创建子视图<ion-nav-view name="childView">
</ion-nav-view>
你的州将会是
.state('one', {
url: '/one',
views:{
childView:{
controller: 'OneController',
templateUrl: 'templates/one.html'
}
}
})
答案 1 :(得分：0)
您需要更改yoru状态网址
你定义了：
url: 'login',
它应该是
url: '/login',