각 라우팅이 작동하지 않음

각 라우팅이 왜 작동하지 않는지 알 수 없습니다. 코드를 10 번 개정했는데 해결책을 찾지 못했습니다. 내 인덱스 페이지와 같은 것입니다 -각 라우팅이 작동하지 않음

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

자바 스크립트 페이지 내가 그들의 이름은 "조회수"폴더에 4 HTML 페이지를

/// <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"; 
 
});

처럼 "추가", "편집", "삭제", "집"과 같은 내용을 가지고 있습니다.

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

나는 그것이 작동하지 않은 이유를 알고 싶어하시기 바랍니다.

출처

2016-09-11 Mohammed Elwany

당신은 점점 어떤 오류? – Rakeschand

asp.net MVC 응용 프로그램입니까? –

빈 웹 응용 프로그램 없음 –

실제로 코드는 정확하지만 각도 응용 프로그램은 클라이언트 서버 아키텍처에서 올바르게 작동합니다.

친절하게 로컬 서버를 사용하여 응용 프로그램을 실행하십시오. Tomcat 서버가 필요 없습니다. Google 크롬 플러그인 "Chrome 용 웹 서버"를 쉽게 다운로드 할 수 있습니다. 여기 - 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

각 라우팅이 작동하지 않음

답변

관련 문제