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

Question

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'
      })
  }])

phoffman · Accepted Answer · 2016-04-27 01:31:31Z

3

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!

edited Apr 27, 2016 at 1:31

answered Apr 27, 2016 at 1:19

phoffman

1871 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related