CODEWITHSUNDEEP
javascriptangularjsngroute
2K01B5
2K01B5

Reputation: 1121

Show a template AngularJS

<html>
<head ng-app="app">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <title>NG ROUTING</title>
    <meta charset="utf-8">
</head>
<body ng-controller="homeController">
    <header>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">My Website</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
            <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
        </ul>
            </div>
        </nav>
    </header>
    <div id="main">
        <div ng-view></div>
    </div>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.js"></script>
    <script src="js/app.js"></script>
</body>

This is my index.html file and what I want to do is every time I click a link in the nav I want one of my templates to show in the ngView. Heres my app.js file: 

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

app.config(function($routeProvider){
$routeProvider.when('/', {
    templateUrl: '/pages/home.html',
    controller: 'homeController'
}).when('/pages/about',{
    templateUrl: 'pages/about.html',
    controller: 'aboutController'
}).when('/pages/contact/', {
    templateUrl: '/pages/contact.html',
    controller: 'contactController'
}).otherwise({
    template: '/pages/routeNotFound.html',
    controller: 'notFoundController'
    });   
});

app.controller('homeController', function($scope){
$scope.message = "Welcome to my homepage";   
});

app.controller('aboutController', function($scope){
$scope.message = "Come and find out more about me and what I like to do.";   
});

app.controller('contactController', function($scope){
$scope.message = "Contact me now!";   
});

app.controller('notFoundController', function($scope, $location){
$scope.message = "There seems to be a problem with finding the page you wanted";
$scope.attemptedPath = $location.path(); 
});

I'm guessing that there is something wrong with the way I am matching the url paths and the routes(or maybe the href link within the html elements) as there is no error being displayed in the console and yet no template is appearing.

The templates are stored in a 'pages' folder and the file containing the angularJS code is stored with a 'js' folder.

Any help would be greatly appreciated.

Upvotes: 0

Views: 435

Answers (1)

Mehdi Dehghani
Mehdi Dehghani

Reputation: 11601

<li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#/about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#/contact"><i class="fa fa-comment"></i> Contact</a></li>

And

$routeProvider
.when('/', {
    templateUrl: '/pages/home.html',
    controller: 'homeController'
}).when('/about',{
    templateUrl: 'pages/about.html',
    controller: 'aboutController'
}).when('/contact', {
    templateUrl: '/pages/contact.html',
    controller: 'contactController'
}).otherwise({
    template: '/pages/routeNotFound.html',
    controller: 'notFoundController'
});});

OR

<li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#/pages/about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#/pages/contact"><i class="fa fa-comment"></i> Contact</a></li>

And

$routeProvider
.when('/', {
    templateUrl: '/pages/home.html',
    controller: 'homeController'
}).when('/pages/about',{
    templateUrl: 'pages/about.html',
    controller: 'aboutController'
}).when('/pages/contact', {
    templateUrl: '/pages/contact.html',
    controller: 'contactController'
}).otherwise({
    template: '/pages/routeNotFound.html',
    controller: 'notFoundController'
});});

Upvotes: 1

Related Questions