我一直在处理我的第一个应用程序，而且我已经停留在应用程序的路由上。
共有4个模板（Login，Overzicht，Settings，Toevoegen）
首先需要显示登录模板（我已经开始工作了）。当我按下登录时，它会让它通过或停止它。如果我点击登录，则会将我带到其他3个标签页。
从那时起，它再也不起作用了！我有以下几行： $ urlRouterProvider.otherwise（＆＃39; /登录＆＃39）;
每次都确实会回到/登录。
我将我的代码粘贴到
下面controllers.js
.controller('LoginCtrl', function($scope, LoginService, $ionicPopup, $state) {
$scope.data = {};
$scope.login = function() {
LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) {
$state.go('tab.toevoegen');
}).error(function(data) {
var alertPopup = $ionicPopup.alert({
title: 'Login failed!',
template: 'Please check your credentials!'
});
});
}
})
App.js
.controller("SettingsCtrl", function($scope, $stateParams, $ionicHistory){
$scope.goBack = function(){
$ionicHistory.goBack();
}
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
// setup an abstract state for the tabs directive
.state('tab', {
url: 'templates/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.toevoegen', {
url: 'templates/toevoegen.html',
views: {
'toevoegen': {
templateUrl: '/toevoegen.html',
controller: 'TodoCtrl'
}
}
})
.state('tab.overzicht', {
url: 'templates/overzicht',
views: {
'tabs-overzicht': {
templateUrl: '/overzicht.html',
controller: 'TodoCtrl'
}
}
})
.state('tab.settings', {
url: '/templates/settings.html',
templateurl: '/settings.html',
controller: 'SettingsCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
services.js
angular.module('starter.services', [])
.service('LoginService', function($q) {
return {
loginUser: function(name, pw) {
var deferred = $q.defer();
var promise = deferred.promise;
if (name == undefined && pw == undefined) {
deferred.resolve('Welcome ' + name + '!');
} else {
deferred.reject('Wrong credentials.');
}
promise.success = function(fn) {
promise.then(fn);
return promise;
}
promise.error = function(fn) {
promise.then(null, fn);
return promise;
}
return promise;
}
}
})
登录模板
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user- scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/controller.js"></script>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<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>
</body>
</html>
tabs.html
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Add" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/toevoegen">
<ion-nav-view name="tab-toevoegen"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Overzicht" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/overzicht.html">
<ion-nav-view name="tab-overzicht"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/settings">
<ion-nav-view name="tab-setttings"></ion-nav-view>
</ion-tab>
</ion-tabs>
overzicht.html
<script type="text/ng-template" id="tabs.overzicht">
<ion-content>
<div ng-show="shouldShowInkomsten.checked">
<ion-list>
<div class="item item-divider">
<p class="dividerclass">Inkomsten</p>
</div>
<ion-item ng-repeat="info in inkomsten" id="testborder1">
<ion-option-button class="button-dark" ng-click=Spliceinkomen($index);startAgain() >Delete</ion-option-button>
<div class="inkomsten-content">
{{info.Description}} <p class="swiper"><strong>{{ info.Value | currency: "€" : 2}}</strong></p><p class="dateaddedtext"><br />Added: {{ info.Date | date:'dd-MM'}}</p>
</div>
</ion-item>
</ion-list>
</div>
<!-- Uitgiften lijst-->
<div ng-show="shouldShowUitgiften.checked" >
<ion-list >
<div class="item item-divider">
<p class="dividerclass">Uitgiften</p>
</div>
<ion-item ng-repeat="info in uitgiften" id="cat">
<ion-option-button class="button-dark" ng-click=Spliceuitgiften($index);startAgain()>Delete</ion-option-button>
{{ info.Description }} <p class="swiper"><strong>{{info.Value | currency: "€" : 2}} </strong></p><p class="dateaddedtext"><br />Added: {{ info.Date | date:'dd-MM'}}</p>
</ion-item>
</ion-list>
</div>
<div class="item item-divider">
<p class="dividerclass">Uitkomst</p>
</div>
<div class="list list-inset">
<div class="item">
<p>Uw rest saldo is: {{endOutcome}} </p>
<strong>Maand: {{ info.date | date:'MM' }}</strong>
<p>{{Cate}}</p>
</div>
</div>
</ion-content>
</script>
非常感谢您的帮助。 ：）
提前致谢！
编辑10:17 19-01-2016
我的所有模板都存储在〜/ templates
中我认为您建议我将网址更改为网址：＆＃39; / templates＆＃39;然后将templateUrl转换为templateUrl：＆＃39; / overzicht＆＃39;正确？
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tabs',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.toevoegen', {
url: '/toevoegen',
views: {
'toevoegen': {
templateUrl: 'templates/toevoegen.html',
controller: 'TodoCtrl'
}
}
})
.state('tab.overzicht', {
url: '/overzicht',
views: {
'tabs-overzicht': {
templateUrl: 'templates/overzicht.html',
controller: 'TodoCtrl'
}
}
})
.state('tab.settings', {
url: '/settings',
templateurl: 'templates/settings.html',
controller: 'SettingsCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});