CODEWITHSUNDEEP
javascriptangularjs
Denny John
Denny John

Reputation: 464

Angular UI router not generating views

I am trying to set up my ui-routes and it seems simple but I don't know what's wrong. I have the following example, making a simple web template with angular ui-router

  <script src="./bower_components/angular/angular.min.js" >></script>
  <script src="./bower_components/angular-bootstrap/ui-bootstrap.min.js" >></script>
  <script src="./bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
  <script src="./app/app.module.js"></script>
  <script src="./app/app.route.js"></script>

I've written the app.module.js ,app.route.js and index.html something like this

app.module.js

'use strict';
angular.module('ezer',[ 'ui.router'

                     ])
.controller('main-cntrl',['$scope','$rootScope','$state',function($scope,$rootScope,$state)
{

$scope.message = "abc";

}]);

app.route.js

angular.module('ezer')
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {


 $urlRouterProvider.otherwise('/');

  $stateProvider


  .state('root',{
            url: '',

            views: {
              'header': {
                template: '<h1>My header</h1>',
                controller: 'main-cntrl'
              },
              'footer':{
                template : '<h1>My footer</h1>',
                controller: 'main-cntrl'
              }
            }
          })




}]);

index.html

<body ng-app="ezer" ng-controller="main-cntrl">
           <div ui-view="header"></div>
  <div ui-view="footer"></div>

</body>

In my console there are no errors at all.. I don't understand, what is the matter?

Upvotes: 1

Views: 49

Answers (2)

Tj Gienger
Tj Gienger

Reputation: 1405

in your app.route, the url should at least be '/' and not ''

Upvotes: 0

biancamihai
biancamihai

Reputation: 981

In your routes where you have the url, I think you should have 'url' : '/'.

Upvotes: 1

Related Questions