Using Angular ui.router how to start in a standard html Angular page and than move forward to one with ui.router template inside a folder?

Question

I have a standard angular page that is not associated with any ui.router functionality(index.html). From that page I click a link that triggers an Angular call and then after some operation the flow needs to be redirected to a page inside a folder that is using angular-ui.route template.

I have created a Plunker that represents this: http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview (current Plunker is working but there's a loop on first page trying to call default state created with $urlRouterProvider.otherwise('events');)

index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
   <script data-require="[email protected]" 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 ui-view tag is inside a manage folder: manage/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="[email protected]"></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>

The templateUrl page to be inserted is: manage/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 have created a plunker that represents this: http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview

I have tried different ways of moving from the first non ui.router page but none worked so far.

What's the best way of doing this?

You're using $state.go on a page with no ui-view so it's never going to show anything happen — Phil
– Phil, Commented Jun 17, 2015 at 4:41
yes, I understand. So I also tried redirecting using $window to trigger a ui.router url using: $window.location.href = 'manage/home.html/events based on this link: github.com/angular-ui/ui-router/wiki/URL-Routing but it also didn't work — groo
– groo, Commented Jun 17, 2015 at 4:42
But that's in loginApp.js which is never included. Your index.html file only uses app.js and the LoginController defined in the app module. I'm not sure why your index.html page doesn't just have <a href="manage/home.html">Login</a> instead of using a controller method — Phil
– Phil, Commented Jun 17, 2015 at 4:44
@Phil - Maybe you saw and old version of my plunker, sorry for that, missed saving. I don't have a loginApp.js — groo
– groo, Commented Jun 17, 2015 at 4:46
Here it is working anyway ~ plnkr.co/edit/Ie5m7iIMiigIOZg5REXs?p=preview. You also didn't have any named views some I'm not sure why you needed @home. Note that I've also removed all the ng-controller directives and am using the controller property in the state config — Phil
– Phil, Commented Jun 17, 2015 at 4:49

Prayag Verma · Accepted Answer · 2015-06-21 07:55:38Z

2

+50

Firstly , do not inject $state as dependency in the LoginController as the view related to this controller isn't an UI route. Adding the $state dependency causes the loop that you are seeing in your example as UI-Router then considers this view a route. As no state matches this route , it tries to load the default state , whose template has a relative URL , which then looks it up inside wrong directory of Plunkr , which causes 404 error.

Secondly , the URL to redirect should via location.href should have a hash otherwise it will also give 404

The code for the LoginController

app.controller('LoginController', ['$scope', '$window',
  function($scope, $window) {
    $scope.goToEvents = function() {
      //Do Something
      $window.location.href = 'manage/home.html#/events';
    };
  }
]);

Check the working example at http://plnkr.co/edit/K2iBYu?p=preview

answered Jun 21, 2015 at 7:55

Prayag Verma

5,6694 gold badges33 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Angular ui.router how to start in a standard html Angular page and than move forward to one with ui.router template inside a folder?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related