0
我想學習離子編程，我想創建一個登錄站點的應用程序，其中一個可以輸入登錄/密碼信息，然後進入一個側面菜單的網站。卡在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 = [];
});的一，二，three.html都是空白爲止。
我迄今的一，二，Three.html也許有閱讀是菜單的子如此，這將是類似的東西
.STATE（「menu.one」，{ 網址：「/一個」， 控制器：「OneController」， templateUrl：「模板/ one.html」 }）
但問題是，我甚至不能達到在開始菜單或登錄頁面。 我認爲，通常它應該至少用$ urlRouterProvider.otherwise（'/ login'）; 但它只是一個空白頁面。 我非常確定index.html或登錄/菜單控制器中有什麼問題，但在這一點上，我只是無法弄清楚，所以也許你可以給我一個提示或看到問題。
提前感謝和問候
謝謝你的幫助，但我的問題是，它甚至沒有向我展示登錄或菜單視圖，只是在第一個空白頁 – Dan
你的控制檯說什麼？你在設備或網頁上開發嗎？ –
控制檯到目前爲止我沒有錯誤 我正在研究Webstrom 10.0.2上的離子程序並使用網頁進行測試。 我認爲，在我的index.html
離子視圖---出錯 但通常據我讀它應加載至少默認頁面，而不是什麼。 如果我把這些信息直接放在index.html中，它似乎可以正常工作，但只要它分成不同的.html文件，它就不會在你的login.html文件中使用 – Dan