AngularJS - routing not working

Question

I wrote the following AngularJS routing code and it's not working:

/// <reference path="C:\Users\elwany\documents\visual studio 2015\Projects\spaapplication\spaapplication\scripts/angular.js" />

var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['$routeProvider', 
    function($routeProvider){
        $routeProvider.
        when('/add',{templateurl:'Views/add', controller:'addController'}).
        when('/edit',{templateurl:'Views/edit', controller:'editController'}).
        when('/delete',{templateurl:'Views/delete', controller:'deleteController'}).
        when('/home',{templateurl:'Views/home', controller:'homeController'}).
        otherwise({redirectTo :'/home'});
    }]);
myApp.controller('addController',function($scope){
    $scope.message="in Add view Controller";
});
myApp.controller('editController',function($scope){
    $scope.message="in edit view Controller";
});
myApp.controller('deleteController',function($scope){
    $scope.message="in delete view Controller";
});
myApp.controller('homeController',function($scope){
    $scope.message="in home view Controller";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="scripts/jquery-1.9.0.js"></script>
    <script src="scripts/bootstrap.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-route.js"></script>
    <script src="demo.js"></script>
</head>
<body>
    <div class="container">
        <nav style="background-color:darkslateblue" role="navigation" class="nav navbar-inverse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#home">home</a></li>
                <li><a href="#add">add</a></li>
                <li><a href="#edit">edit</a></li>
                <li><a href="#delete">delete</a></li>
            </ul>
        </nav>
        <div ng-view>


        </div>
        <h3 style="font-size:small" class="text-center text-info">developed by Mr-Mohammed Elwany</h3>
    </div>
</body>
</html>

And another 4 html <div> in separated 4 HTML pages (add, edit, delete, home) implement this code:

<div class="row jumbotron">
    <h2>{{message}}</h2>
</div>

Welcome to SO! Can you please give more details of "it's not working"? What do you expect? What errors, if any, you get? — Laur Ivan
– Laur Ivan, Commented Sep 9, 2016 at 8:07

Sajeetharan · Accepted Answer · 2016-09-09 08:07:27Z

1

The references should come inside the <body> tag , also you are missing the reference for angular-route

  <head>     
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
 </head>

DEMO APP

answered Sep 9, 2016 at 8:07

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Mohammed Elwany Over a year ago

i wrote that in the second post code and it not worked

Mohammed Elwany Over a year ago

Collectives™ on Stack Overflow

AngularJS - routing not working

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