ui-view not working angularjs

Question

I configured a route using ui-route as follows,

var app = angular.module("productManagement",
                        ["common.services",
                         "ui.router",
                         "productResourceMock"]);

app.config(["$stateProvider",
    function($stateProvider){
            // Products
            $stateProvider
            .state("productList", {
                url: "/products",
                templateUrl: "app/products/productListView.html",
                controller: "ProductListCtrl as vm"
            })

    }]
);

below is my index.html

<body ng-app="productManagement">
  <div class="container">
      <div ui-view></div>   
  </div>
</body>

it is not showing any error in console, and no views shown at all !!? it used to work fine just before adding the route

this is part of the course AngularJS Line of Business Applications from www.pluralsite.com by Deborah Kuratah episode 26 "setting up the routing"

Do you definitely have productListView.html in the correct location: app/products/productListView.html? — Matthew Cawley
– Matthew Cawley, Commented Sep 18, 2017 at 20:48
yes it is in the correct path : productManagement\app\products\productListView.html — M. Gamie
– M. Gamie, Commented Sep 19, 2017 at 3:41

yesIcan · Accepted Answer · 2017-09-18 21:24:47Z

1

You have to 1. have a default route 2. redirect to home if the state is not defined

app.config(["$stateProvider","$urlRouterProvider",
      function($stateProvider,$urlRouterProvider){
            // Products
           $urlRouterProvider.otherwise("/");
            $stateProvider
           .state("home", {
                url: "/",
                templateUrl: "app/products/productListView.html",
                controller: "ProductListCtrl as vm"
            })
            .state("productList", {
                url: "/products",
                templateUrl: "app/products/productListView.html",
                controller: "ProductListCtrl as vm"
            }}  
     }]
   );

answered Sep 18, 2017 at 21:24

yesIcan

1,7113 gold badges12 silver badges19 bronze badges

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

2 Comments

M. Gamie Over a year ago

it worked after adding the default route, but now it is giving me Error: transition superseded angular.min.js:124, any idea why?

yesIcan Over a year ago

Could be a number of things check this out if it helps stackoverflow.com/questions/41450712/…

Collectives™ on Stack Overflow

ui-view not working angularjs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related