javascript - angularjs - ngRoute 无法正常工作

标签 javascript angularjs ngroute

ngRoute 之前工作正常,现在在添加了几个文件和 Controller 后停止工作。 在浏览器中,我得到的 URL 为 http://localhost/#browsefp 而不是 http://localhost/#/browsefp

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

应用程序.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>

主 Controller .js

 //create the controller module 
 angular.module('DevStreamApp').controller('mainController', function($scope) {

// create a message to display in our view
$scope.message = 'Everyone come in Main Controller!';
});

最佳答案

从 href 中删除 #,如您在 doc 中所见他们将其配置如下:

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

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

关于javascript - angularjs - ngRoute 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34497091/

相关文章:

javascript - 如何在动态添加的数组中具有不同的值

javascript - for 循环和 while 循环之间的真正区别是什么?

angularjs - 我想动态应用 ui 路由器中的参数

javascript - Angular $location.state() 与 history.pushState 行为

javascript - Angular JS + 重定向不起作用

javascript - 在单页应用程序中重新加载页面

javascript - 为类似数据结构的区 block 链对象数组排序

javascript - 将html输入数组转换为JS对象

javascript - 如何测试现有的Angularjs整体性能(DOM渲染)?

javascript - AngularJS : How do I switch views from a controller function?