CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
user1352057
user1352057

Reputation: 3182

Angular ui-view (UI-Router) not rendering template - plunker included

Question Background:

I am using AngulaJS's UI Router for the first time to create two views within my app.

The Issue:

Plunker link: https://plnkr.co/edit/2XAKa6mDCUyzyOPz2CNK

I feel I'm missing something simple here but I cannot get any route to render the specified html templates set in the app.js.

Eventually I want the Update.html template to render when the submit fucntion of the home.html (search()) is clicked but first off I need to be able to actually render a single view which I currently cannot.

I would expect on-load for the route to render up the home.html page but it wont:

Any help sorting this will be much appreciated.

app.js:

 angular
  .module('app', [
    'ui.router'
  ])
  .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'home.html',
        controller: 'HomeController'
      })
      .state('update', {
        url: '/update',
        templateUrl: 'Update.html',
        controller: 'UpdateController'
      })
  }])

Upvotes: 1

Views: 269

Answers (1)

phoffman
phoffman

Reputation: 187

Looking at your plunker briefly, it looks like your controller files are creating new angular apps with the same name. They were overriding each other so the .config() block didn't exist in the final app. I have updated the controller files in this plunker and it seems to be rendering the first ui view fine:

https://plnkr.co/edit/cdpWWOaBJWL3dONtIXzv?p=preview

Notice in the controller files, the angular.module('app') no longer has the second argument ['ui-bootstrap'] which was causing a new angular app to be created for each controller file. Check it out here in the angular docs.

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

Hope this helps!

Upvotes: 3

Related Questions