CODEWITHSUNDEEP
javascriptangularjstemplates
orlando21
orlando21

Reputation: 307

AngularJS ui-router not rendering view

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]);
})();

Upvotes: 1

Views: 1025

Answers (1)

Tejinder Singh
Tejinder Singh

Reputation: 1120

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);
    });

  }]);

Upvotes: 5

Related Questions