routeProvider不重定向页面

Question

我尝试了几种不同的方式，并且我将尝试重定向到另一个页面的所有不同方式，但是对于所有这些页面都会出现404错误。

index.html

此页面很好，根目录正在呈现：

     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ng-view></div>

  <div>Angular seed app: v<span app-version></span></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
  <script src="controllers/app.controller.js"></script>
  <script src="app.config.js"></script>
</body>
</html>

的app.config

app.config(['$routeProvider', function($routeProvider) {

    $routeProvider.when('/',{
        templateUrl: 'views/templates/home.tpl.html', //page is rendering
        controller: 'HomeController'
    })
        .when('/userForm',{
            templateUrl: 'views/templates/userForm.html', //NOT rendering
            controller: 'FormController'
        })
        .otherwise({redirectTo: '/'});

}]);

app.controller.js

app.controller('HomeController',['$scope', 'ROOT', function($scope, ROOT){

    $scope.Root = ROOT;

  console.log("Inside the home controller");

  $scope.menu = {
      items:[
          {
              link: ROOT+'/userForm',
              name: 'Contact Form'
          }
      ]
  }

}]);

app.controller('FormController',['$scope', function($scope){

    console.log("You are inside the form controller");

}]);

尝试使用按钮，href和来自控制器的链接重定向到userForm.html。所有人都给我404错误。

<div>
    <a class="navbar-brand" ng-href="{{ Root }}">Menu</a>

<button type="button" onclick="window.location.href='/userForm.html'">Next page</button>
    <a ng-href="/userForm.html">Click here to go to the next page...</a>

    <ul class="nav navbar-nav navbar-right">

    <li ng-repeat="item in menu.items" class="dropdown" dropdown on-toggle="toggled(open)">

        <a ng-href="{{ item.link }}">{{ item.name }}</a>

     </li>
     </ul>
</div>

app.js

// Declare app level module which depends on views, and components
var app = angular.module('myApp', [
  'ngRoute',
  'myApp.version'
]);

app.constant('ROOT','/RedirectedControllerDemo/app/views/templates');

文件结构：

Answer 1

问题是您必须重定向到网址，而不是重定向到html.Try href="#/userForm"

Answer 2

我将我的评论移到答案（这是第一个响应），但由于AngluarJS中的路由，路由组件不需要URL包含文件的名称：userFomr.html，而是路由而不是www.url.com/userForm 你的href应该是这样的：  ＆lt; a href =＆＃34;＃/ userForm＆＃34;＆gt; 但是如果你想删除＃，你可以将你的应用程序设置为使用HTML5模式： https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag