Partial templates in AngularJs not loading

Question

I am new to AngularJs and I just started learning about routing and partial templates. I'm writing a little application that is trying to do routing and inserting a partial templates into the layout HTML page when you click on a specific hyperlink such as Home, about or contact.

However, I'm having difficulty understanding why my templates are not loading into the layout view. I researched Stack Overflow and other resources and nothing seems to work. The structure of my files is like this:

index.html file
Templates Folder:
  +home.html
  +about.html

+contact.html
Scripts folder:
  +script.js
  +angular-route.min

Following is my code: index.html:

<!--index.html-->
<!DOCTYPE html>

<html>

<head>
<title>Routing App Example</title>

<script src = 
"https://code.angularjs.org/1.5.6/angular.js">`
</script>`

<script src = "https://code.angularjs.org/1.5.6/angular-route.js">`</script>
<script type="text/javascript" src = "Scripts/script.js"></script>
</head>

<body ng-app = "RoutingApp" ng-controller = "MainController">

<header>
    <div>
        <ul>
            <li><a href = "#/home">Home</a></li>
            <li><a href = "#/about">About</a></li>
            <li><a href = "#/contact">Contact</a></li>
        </ul>
    </div>
</header>
    <div>
        index ng-root
        <ng-view></ng-view>
    </div>
</div>
</body>
</html>

script.js:

var RoutingApp = angular.module('RoutingApp', ['ngRoute']);

RoutingApp.config(['$routeProvider', '$locationProvider', '$scope',   function($routeProvider, $locationProvider){

$routeProvider
// route for the index page

// route for the addOrder page

.when('/home', {
    templateUrl: 'Templates/home.html',
    controller: 'HomeController'
})
.when('/about', {
    templateUrl: 'Templates/about.html',
    controller: 'AboutController'
})
// route for the showOrders page
.when('/contact', {
    templateUrl: 'Templates/contact.html',
    controller: 'ContactController'
})
.otherwise({
    redirectTo: '/home',
});

}]);

RoutingApp.controller('MainController', function($scope){
$scope.message = "Welcome from the MainController";
});

RoutingApp.controller('HomeController', function($scope){
    $scope.message = "Welcome from the HomeController";$scope
});

RoutingApp.controller('AboutController', function($scope){
    $scope.message = "Welcome from the AboutController";
});

RoutingApp.controller('ContactController', function($scope){
    $scope.message = "Welcome from the ContactController";
});

home.html

<h1>{{message}}</h1>

about.html

<h1>{{message}}</h1>

contact.html

<h1>{{message}}</h1>

The problem that I'm having is the fact that the partial templates are not loading into the layout view page. I don't know what I'm doing wrong.

Is your partial template files are in same folder as index.html or they are in Template folder as you mentioned — Priyesh Kumar
– Priyesh Kumar, Commented Jun 12, 2016 at 18:01
No the partial templates are in a seperate folder called Templates. — Mo Laiouny
– Mo Laiouny, Commented Jun 12, 2016 at 18:34
I checked the Chrome console errors. This is what I'm getting: — Mo Laiouny
– Mo Laiouny, Commented Jun 12, 2016 at 20:09
SCRIPT5022: [$injector:modulerr] errors.angularjs.org/1.5.6/$injector/modulerr — Mo Laiouny
– Mo Laiouny, Commented Jun 12, 2016 at 20:21

Priyesh Kumar · Accepted Answer · 2016-06-12 21:12:45Z

1

You were getting that error because

In your route config locationProvider should be $locationProvider.
You are not injecting scope, but using it in route config. I have a doubt that it even exist for route config.

and some more typos.

correct route config is :

RoutingApp.config( [ '$routeProvider', '$locationProvider', function( $routeProvider, $locationProvider ){


    $routeProvider
      .when('/home', {
            templateUrl: 'template/home.html',
            controller: 'HomeController'
        })
        .when('/about', {
            templateUrl: 'template/about.html',
            controller: 'AboutController'
        })
        .when('/contact', {
            templateUrl: 'template/contact.html',
            controller: 'ContactController'
        })
        .otherwise({
            redirectTo: '/home',
         });

    } ] );

Here's a modified version of you code :
https://plnkr.co/edit/CtMucCAfuxb8JHO5Buci?p=preview

edited Jun 12, 2016 at 21:12

answered Jun 12, 2016 at 18:50

Priyesh Kumar

2,8571 gold badge17 silver badges29 bronze badges

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

2 Comments

Mo Laiouny Over a year ago

thank you for your help. I did made all the code changes that you suggested. When I run the app, it doesn't give me any errors on the console. However, the data expression is not binding. So what I get is ""{{message}} on every link that I click on.

Priyesh Kumar Over a year ago

@MoLaiouny is plunker example not working for you?. Please update your question with your new code

Collectives™ on Stack Overflow

Partial templates in AngularJs not loading

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related