Using angular ui.router how to start in a standard angular html page and then navigate to one with a ui.router template inside a folder?
I have a standard angular page that is not linked to any ui.router (index.html) function. On this page, I click a link that triggers an angular call and then after some operation the stream needs to be redirected to a page inside a folder using the angular-ui.route template.
I created a plunker that represents this: http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview (the current plunker works, but there is a loop on the first page that tries to invoke the default state created with $ urlRouterProvider.otherwise ( 'events');)
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="LoginController as lgCtrl">
<h1>This page does not use ui.router</h1>
<a href="manage/home.html" ng-click="goToEvents()">Login</a>
</body>
</html>
The page with the ui-view tag is inside the control folder: control /home.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16" data-require="angular.js@1.3.16"></script>
<script data-require="ui-router@*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script type="text/javascript" src="../app.js"></script>
</head>
<body ng-controller="EventsController as evtCtlr">
<h1>Hello manage/home.html</h1>
<div ui-view></div>
</body>
</html>
Insert page templateUrl: control /events.html
<div ng-controller="EventsController as evtCtrl">
<h3>Events Page</h3>
<div>Some user email</div>
</div>
app.js
'use strict';
(function () {
var app = angular.module('app', ['ui.router']);
/**
* Configuration for ui-router module. Handles navigation based on app states.
*/
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('events');
$stateProvider
.state('events', {
url: '/events',
views:{
'@manage/home':{
templateUrl: 'manage/events.html'
}
}
});
});
app.controller('LoginController', ['$scope','$window', '$state',
function($scope, $window, $state){
$scope.goToEvents = function(){
console.log('trying to load events');
//this call doesn't work, 404 - It should?? -->> see reference
//https://github.com/angular-ui/ui-router/wiki/URL-Routing
$window.location.href = 'manage/home.html/events';
//don't work
//$state.transitionTo('events');
//also don't work
//$state.go('events');
};
}]);
app.controller('EventsController', [function(){
console.log('EventsController');
}]);
})();
I created a plunker that represents this: http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview
I tried different ways to navigate from the first page of ui.router but nothing worked so far.
What's the best way to do this?
source to share
First, do not add $state
as a dependency in LoginController
, since the view associated with this controller is not a UI. Adding dependencies $state
triggers the loop that you see as UI-Router in your example, then looks at that kind of route. Since no state matches this route, it tries to load a default state whose template has a relative url, which then looks at it in the wrong Plunkr directory, causing a 404 error.
Second, the redirect url must be via location.href must have a hash, otherwise it will give 404 too
Code for LoginController
app.controller('LoginController', ['$scope', '$window',
function($scope, $window) {
$scope.goToEvents = function() {
//Do Something
$window.location.href = 'manage/home.html#/events';
};
}
]);
Check out a working example http://plnkr.co/edit/K2iBYu?p=preview
source to share