角度ルーティングが機能しませんでした

なぜ角ルーティングが私と連携しないのか分かりません。私はコードを10回改訂し、解決策を見つけることができませんでした。私のインデックスページは次のようである -角度ルーティングが機能しませんでした

/// <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.html', 
 
      controller:'addController' 
 
     }). 
 
     when('/edit', { 
 
      templateUrl: 'Views/edit.html', 
 
      controller: 'editController' 
 
     }). 
 
     when('/delete', { 
 
      templeteUrl: 'Views/delete.html', 
 
      controller: 'deleteController' 
 
     }). 
 
     when('/home', { 
 
      templateUrl: 'Views/home.html', 
 
      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"; 
 
});

よう

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

 
     <ng-view> 
 

 
     </ng-view> 
 

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

とJavascriptのページ私は、 "ビュー" の4つのhtmlページが自分の名前をフォルダ持っています「追加」、「編集」、「削除」、「自宅」、およびそれらは同じ内容を有する。

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

私はそれが機能しなかった理由を知りたいください。

出典

2016-09-11 Mohammed Elwany

を得ていますか？ – Rakeschand

それはasp.net MVCアプリケーションですか？ –

空のWebアプリケーションなし –

実際にはコードは正しいですが、角度アプリケーションはクライアントサーバーアーキテクチャ上で正しく動作します。

親切にローカルサーバーを使用してアプリケーションを実行します。 Tomcatサーバーは必要ありません。 Google Chromeプラグイン「Chrome用Webサーバー」を簡単にダウンロードできます。あなたはどのようなエラーをhere- https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

<html ng-app="myApp"> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
 

 
    <script> 
 
    var app = angular.module("myApp", ["ngRoute"]); 
 

 
    app.controller() 
 

 
    app.config(function($routeProvider) { 
 

 
     $routeProvider 
 
     .when('/abc', { 
 
      'template': "This is the ABC page" 
 
     }) 
 

 
     .when('/Home', { 
 
     'template': "This is the home page" 
 
     }) 
 

 
     .when('/About', { 
 
     'template': "This is the About page" 
 
     }) 
 

 
     .when('/Contact', { 
 
     'template': "This is the Contact page" 
 
     }) 
 

 
     .when('/Service', { 
 
     'template': "This is the Service page" 
 
     }) 
 

 
    }) 
 
    </script> 
 

 
</head> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 

 
     <nav class="navbar navbar-inverse"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#">Routing App</a> 
 
      </div> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href="#abc">Abc</a></li> 
 
      <li><a href="#About">About us</a></li> 
 
      <li><a href="#Service">Services</a></li> 
 
      <li><a href="#Contact">Contact</a></li> 
 
      <li><a href="#Contact">Contact</a></li> 
 
      </ul> 
 
     </div> 
 
     </nav> 
 
    </div> 
 
    <div ng-view></div> 
 
    </div> 
 
</body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
 
</script> 
 
<script src="script.js"></script> 
 

 

 

 
</html>

出典

2017-10-30 12:29:15

角度ルーティングが機能しませんでした

答えて

関連する問題