CODEWITHSUNDEEP
javascripthtmlangularjs
orlando21
orlando21

Reputation: 307

AngularJS ui-router not loading template

My AngularJS app doesn't find the template landing.html, although I tried to make the correct declarations everywhere.

index.html:

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

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

    <main class="content">

      <ui-view></ui-view>

    </main>

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

main.js:

angular.module('myApp', ['ui.router'])
  .config(['$stateProvider', '$locationProvider', 
  function($stateProvider, $locationProvider) {
  $stateProvider
    .state('landing', {
      url: '/',
        controller: 'LandingCtrl as landing',
        templateUrl: 'templates/landing.html'
    })
      .state('faq', {
      url: '/faq',
      templateURL: 'faq.html'
  });
    $locationProvider
        .html5Mode({
        enabled: true,
        requireBase: false
    });
}]);

The structure of my files is as follows:

/src
|
|--index.html
|--faq.html
|--js
|  |--main.js
|  |--controllers
|  |  |--LandingCtrl.js
|--templates
|  |--landing.html

I think the path for landing.html is correctly declared, but I'm still getting the following error:

angular.min.js:sourcemap:123 Error: [$compile:tpload] http://errors.angularjs.org/1.6.4/$compile/tpload?p0=templates%2Flanding.html&p1=404&p2=Not%20Found

Would anyone have an idea as to why the app can't find the template?

EDIT When I enter this in the browser URL: http://localhost:3000/templates/landing.html

Result is: Cannot GET /templates/landing.html

EDIT 2 Removing $locationProvider also removes the "landing.html not found" error msg, but the view that's supposed to be rendered inside of <ui-view> is still not shown.

Upvotes: 1

Views: 673

Answers (1)

Tejinder Singh
Tejinder Singh

Reputation: 1120

  • in your index.html change <ui-view></ui-view> to <div ui-view></div>.

in your main.js change the code 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: 2

Related Questions