AngularJS ui-router not rendering view

Question

I've been struggling with getting my AngularJS app to display a view based on a template.

The issue: ui-router seems to be correctly "routing" all the files, because the template file (landing.html) is being delivered to the console as an object (see console.log(result) in main.js below). Nevertheless, the template file is not being displayed in the app where <div ui-view></div> is supposed to be.

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
@@include('partials/head.html')
<body>

  @@include('partials/header.html')

      <div ui-view></div>

  @@include('partials/footer.html')
</body>
</html>

main.js:

angular.module('myApp', [
  'ui.router'
])
  .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('landing', {
      url: '/',
        controller: 'LandingCtrl as landing',
        templateUrl: 'templates/landing.html'
    });
      $urlRouterProvider.otherwise('/landing');

}])
  .run(['$http', '$templateCache', function($http, $templateCache) {

    $http.get('templates/landing.html', {
      cache: $templateCache
    }).then(function(result) {
      console.log(result);
    });

  }]);

My template file landing.html:

<main class="content">

    @@include('partials/search.html')
    <h2>Show me the contents of landing.html!</h2>

</main>

I'm using grunt and made sure to have it both watch and copy the /templates into /dist. Overall the Angular app is behaving correctly (no ng errors in the console).

Also, if instead of specifying a template file (templateURL), I simply use template: <h2>Show me the contents of landing.html!</h2> in main.js then this is rendered in the view. There's something preventing a file from being rendered.

Question: Given ui-router is correctly finding and routing all files, does anyone have an idea as to why the app is simply not displaying the template file?

Edit Here is LandingCtrl.js:

(function() {
  function LandingCtrl($scope, $location, $anchorScroll) {   
    $scope.goTo = function(id) {
      $location.hash(id);
      console.log($location.hash());
      $anchorScroll();
    };    
  }    
  angular
    .module('myApp')
    .controller('LandingCtrl', ['$scope', '$location', '$anchorScroll', LandingCtrl]);
})();

hi @Vivz, I'm using HTML partials because otherwise some of my files would be much longer. I tried various times to exclude them to see whether they made any difference but didn't get a different result so far. — orlando21
– orlando21, Commented Aug 8, 2017 at 14:50
@Vivz, could you please clarify a little... when I run the app as is, the partials in index.html are visible and functional as they should be. There is also a partial in landing.html but since the entire file is not being rendered, it makes no difference whether there is partial inside of this file or not. — orlando21
– orlando21, Commented Aug 8, 2017 at 14:55
Where is the controller code? maybe the controller is thrown an error and it is not rendering the view. — Valter
– Valter, Commented Aug 8, 2017 at 15:18

Tejinder Singh · Accepted Answer · 2017-08-09 06:28:37Z

5

in your main.js file change the url of Landing State as below:

angular.module('myApp', [
  'ui.router'
])
  .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('landing', {
      url: '/landing',
        controller: 'LandingCtrl as landing',
        templateUrl: 'templates/landing.html'
    });
      $urlRouterProvider.otherwise('/landing');

}])
  .run(['$http', '$templateCache', function($http, $templateCache) {

    $http.get('templates/landing.html', {
      cache: $templateCache
    }).then(function(result) {
      console.log(result);
    });

  }]);

answered Aug 9, 2017 at 6:28

Tejinder Singh

1,1203 gold badges8 silver badges25 bronze badges

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

1 Comment

orlando21 Over a year ago

Ok, so in $stateProvider.state, I replace url: / with url: /landing. Awesome, it works. Thanks!

Collectives™ on Stack Overflow

AngularJS ui-router not rendering view

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related