Javascript angularjs-ngRoute工作不正常_Javascript_Angularjs_Ngroute

Javascript angularjs-ngRoute工作不正常

javascript angularjs

Javascript angularjs-ngRoute工作不正常,javascript,angularjs,ngroute,Javascript,Angularjs,Ngroute,ngRoute以前工作正常，现在由于添加了几个文件和控制器而停止工作。在浏览器中，我得到的URL是，而不是下面是我的代码，请帮忙。学习AngularJS并不断遇到奇怪的问题。在JS控制台中没有看到错误 app.js var app = angular.module('DevStreamApp', ['ngRoute']); app.config(function($routeProvider){ $routeProvider .when('/', {templateUrl :

ngRoute以前工作正常，现在由于添加了几个文件和控制器而停止工作。在浏览器中，我得到的URL是，而不是

下面是我的代码，请帮忙。学习AngularJS并不断遇到奇怪的问题。在JS控制台中没有看到错误

app.js

 var app = angular.module('DevStreamApp', ['ngRoute']);

 app.config(function($routeProvider){
 $routeProvider 
   .when('/', {templateUrl : 'views/main.html', controller : 'mainController' })
   .when('/addnew', {templateUrl : 'views/addnew.html', controller : 'homeController', css : 'css/screen.css'})
   .when('/addnewfp', {templateUrl : 'views/addnewfeeprogram.html', controller : 'homeController', css : 'css/screen.css'})
   .when('/addnewcm', {templateUrl : 'views/addnewcustomermapping.html', controller : 'aboutController', css : 'css/screen.css'})
.when('/browsefp', {templateUrl : 'views/browseprogram.html', controller : 'browseprogramController', css : 'css/screen.css'})
.otherwise({ redirectTo : '/' })
 });

index.html

<!doctype html>
<!-- define angular app -->
<html ng-app="DevStreamApp">
<head>
<titleFee </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
   @import url("/css/screen.css");
   @import url("/js/yui/container.css");
</style>

<!-- load angular and angular route via CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js">        </script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  <script src="js/app.js"></script>
</head>
<body>
<hr noshade/>
 <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">
        <!-- angular templating -->
        <!-- this is where content will be injected -->
        <a href="#addnew">Add new </a><br/>  
        <a href="#addnewfp">Add new Fee Program</a><br/>  
        <a href="#addnewcm">Add new Customer mapping</a><br/> 
        <a href="#browsefp">Browse Fee Program</a>
        <div ng-view></div>
    </div>
</body>
<script src="js/app.js"></script>
<script src="js/controllers/mainController.js"></script>
<script src="js/controllers/homeController.js"></script>
<script src="js/controllers/aboutController.js"></script>
<script src="js/controllers/contactController.js"></script>
<script src="js/controllers/browseprogramController.js"></script>
</html>

从href中删除#，如您所见，他们将其配置如下：

<a href="Book/Moby">Moby</a>

.when('/Book/:bookId', {
      ....
});


.when（“/Book/：bookId”{
....
});

因此，在您的情况下，它将是：

    <a href="addnew">Add new </a><br/>  
    <a href="addnewfp">Add new Fee Program</a><br/>  
    <a href="addnewcm">Add new Customer mapping</a><br/> 
    <a href="browsefp">Browse Fee Program</a>

默认情况下，AngularJS将使用哈希标记路由URL，但您可以使用$locationProvider将其删除

您将使用$locationProvider模块并将html5Mode设置为true

 var app = angular.module('DevStreamApp', ['ngRoute']);

 app.config(function($routeProvider,  $locationProvider){
     $locationProvider.html5Mode(true);

     ... your code ...

在index.html中，链接必须是

<a href="addnew">Add new </a><br/>

但它不起作用？作为旁白，我建议它比开箱即用的angular routerany更健壮，使用起来也不难。为什么它不起作用？我的app.js中没有$locationProvider。在我添加更多代码文件之前，它一直工作正常。只需在你的app.js文件中添加$locationProvider即可。这行代码如下

app.config（function（$routeProvider，$locationProvider）{

，请记住添加

$locationProvider.html5Mode（true）；

。您现在的行代码是

app.config（function（$routeProvider）{

发布您在控制台日志中得到的内容

<a href="addnew">Add new </a><br/>