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>

Answer 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

AngularJS - routing not working

Question

1 answers

solution1
1 2016-09-09 08:07:27

AngularJS - routing not working

Question

1 answers

solution1 1 2016-09-09 08:07:27

solution1
1 2016-09-09 08:07:27