CODEWITHSUNDEEP
angularjs
Renaud is Not Bill Gates
Renaud is Not Bill Gates

Reputation: 2084

Using ui.router instead of ngRoute

I'm trying to use ui.router instead of ngRoute, And I can't figure out what is the problem.

In my console I get this :

angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=capValueRecruitApp&…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.5%2Fangular.min.js%3A19%3A381)

app.js

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

capValueRecruitApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'views/home.html'
    })
    .state('about', {
      url: '/about',
      templateUrl: 'views/about.html'
    });
  $urlRouterProvider.otherwise('/home');
});

index.html

<body ng-app="capValueRecruitApp" class="theme-style-1">
<!--WRAPPER START-->
<div id="wrapper">
  <!--HEADER START-->
  <header id="header" class="header-2 header-3">
    <div class="container">
      <!--NAVIGATION START-->
      <div class="navigation-col">
        <nav class="navbar navbar-inverse">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          </div>
          <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav" id="nav">
              <li><a href="#/home" data-path="/home">Home</a></li>
              .... Some code
              <li><a href="#/about" data-path="/about">Contact</a></li>
   ...Some code
  <div id="main"><div ui-view></div></div>
  ...Some code
<!--JQUERY MIN JS-->
<script src="../scripts/js/jquery-1.11.3.min.js"></script>
<!--BOOTSTRAP JS-->
<script src="../scripts/js/bootstrap.min.js"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
</body>

And in my views folder I have about.html and home.html.

When I googled about it I found this on similar problem in stackoverflow :

You are trying to use $stateProvider and $urlRouterProvider which are coming from "ui.router", and you didn't inject the dependency "ui.router".

Upvotes: 0

Views: 108

Answers (1)

kreck
kreck

Reputation: 68

Where are you loading your app.js? In the <head></head> ?

Make sure your loading order is:

  • Angular.js
  • UI-Router.js
  • AppScripts.js

If you're loading app.js before the dependencies you'll get errors as the modules are not available.

e.g.

<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<!-- THIS IS IMPORTANT! -->
<script src="app.js"></script>

Upvotes: 1

Related Questions