2016-09-09 5 views
0

Я написал следующий код AngularJS маршрутизации и он не работает:AngularJS - маршрутизация не работает

/// <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>

И еще 4 HTML <div> в разделенных 4 HTML страниц (добавлять, редактировать, удалять, дома) реализовать этот код:

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

+0

Добро пожаловать в СЦ! Не могли бы вы дать более подробную информацию о том, «это не работает»? Что вы ожидаете? Какие ошибки, если таковые имеются, вы получаете? –

+0

Какая ошибка вы получаете? – Ruhul

+0

нет синтаксической ошибки в коде, но он не работает –

ответ

1

Ссылки должны прийти внутри <body> тега, также вам не хватает ссылок на угловом маршрута

<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

+0

я писал, что во втором почтовом коде, и он не работал –

+0

<мета кодировок = «UTF-8» /> <ссылка href = "Content/bootstrap.css" rel = "stylesheet" /> < скрипт src = "scripts/angular.js">

+1

Создать плункер и показать – Sajeetharan

Смежные вопросы