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

Answer 1

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

  }]);

AngularJS ui-router not rendering view

Question

1 answers

solution1
5 ACCPTED 2017-08-09 06:28:37

AngularJS ui-router not rendering view

Question

1 answers

solution1 5 ACCPTED 2017-08-09 06:28:37

solution1
5 ACCPTED 2017-08-09 06:28:37