Angular UI router not working

Question

**This js file for the ui router is proper or not.The error displaying is "Error: Unknown provider: $stateProvider from routerApp"

this js files have been loaded in the Html file.

**

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/template1');

$stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
    .state('template1', {
        url: '/temp1',
        templateUrl: 'templates/template1.html'
    })

    // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
    .state('template2', {
        // we'll get to this in a bit       
    });

});


<!-- MAIN CONTENT -->
<div class="container">

<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>

</div>

</body>
</html>

Please help.Thanks in advance

The js files that are loaded are:<script src="cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.0.1/…> <script src="ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script> <script src="app_js.js"></script> — Rajeshwar
– Rajeshwar, Commented Aug 13, 2014 at 14:00
Are you also including angular.js file? and make sure ui.router js file is loaded after angular.js. — Darshan P
– Darshan P, Commented Aug 13, 2014 at 14:04

sylwester · Accepted Answer · 2014-08-13 20:36:03Z

please see here : http://plnkr.co/edit/FYxpaHpKgvpEu6f1TZ7l?p=preview

var routerApp = angular.module("routerApp", ["ui.router"]);



routerApp.config(
  ["$stateProvider", "$urlRouterProvider",
    function($stateProvider, $urlRouterProvider) {

      $urlRouterProvider.otherwise("/template1");

      $stateProvider
        .state("template1", {
          url: "/template1",
          templateUrl: "template1.html",
          controller: "tmp1Controller"
        })
        .state("template2", {
          url: "/template2",
          templateUrl: "template2.html",
          controller: "tmp2Controller"
        })



      ;

    }
  ]);

routerApp.controller("mainCtrl", ["$scope",
  function($scope) {

  }
]);
routerApp.controller("tmp1Controller", ["$scope",
  function($scope) {

  }
]);

routerApp.controller("tmp2Controller", ["$scope",
  function($scope) {

  }
]);

anayarojo · Accepted Answer · 2016-10-23 17:21:30Z

1

I had the same problem, was solved replacing

<div ui-view></div>

by

<ui-view> 
 <i>Loading ....</i>
</ui-view>

answered Oct 23, 2016 at 17:21

anayarojo

1,2352 gold badges24 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular UI router not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related