CODEWITHSUNDEEP
angularjsangular-ui-router
groo
groo

Reputation: 4448

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?

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?

Upvotes: 3

Views: 2392

Answers (1)

Prayag Verma
Prayag Verma

Reputation: 5651

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

Upvotes: 2

Related Questions