页面未找到错误，甚至为路由指定了angularJs

Question

我正在开发管理面板和用户面板。 管理面板工作正常，代码使用ExpressJs编写。 现在，我想在AngularJs设计用户面板。 我创建了HTML页面和app.js页面。

use strict;

angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider) {

    $routeProvider.when('/home', {
        templateUrl: 'home.html',
        controller: 'homeCtrl'
    });

    $routeProvider.when('/profile/:userId', {
        templateUrl: 'profile.html',
        controller: 'profileController'
    });

    $routeProvider.otherwise({redirectTo: '/home'});
    }])
    .controller('profileController', function($scope, $http, $routeParams) {
        $scope.params = $routeParams;
        $http.get('json_files/record_'+$scope.params.userId+'.json').success(function(response) {
        $scope.details = response;
       });    
    })
    .controller('homeController', function() {

    });

这是我的app.js文件。

以下是我的profile.html

<html lang="en" ng-app="myApp" class="no-js">
 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My AngularJS App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="http://localhost:8000/">
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="app.js"></script>
    </head>
    <body>
       <div ng-controller="profileController">
            <table>
               <thead>
                  <tr>
                      <td>CategoryID</td>
                       <td>CategoryName</td>
                   </tr>
               </thead>
               <tbody>
                  <tr ng-repeat="category in categories">
                      <td>{{category.CategoryID}}</td>
                    <td>{{category.CategoryName}}</td>
                </tr>
               </tbody>
             </table>
         </div>
    </body>
</html>

每当我尝试以http：// localhost：8000 / profile / 1访问页面时，都会收到以下错误消息

未找到

在此服务器上找不到请求的URL / profile。

不知道出了什么问题...或我在哪里犯了错误...请提出任何建议。

Answer 1

您在索引页面中缺少ng-view 。 您的所有路线都会被该标签替换。

请参阅此链接： https : //docs.angularjs.org/api/ngRoute/directive/ngView

index.html

<html lang="en" ng-app="myApp" class="no-js">
 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My AngularJS App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
    <script src="script.js"></script>
    </head>
    <body>

    <div ng-view></div>

    </body>
</html>

home.html

<div> Home page

    <a href="#/profile/1" >Go to Profile page</a>

</div>

profile.html

<div> Profile page

    <a href="#/home" >Go to Home page</a>

<div>

app.js

(function() {
    "use strict";

    angular.module('myApp', ['ngRoute'])
    .config(['$routeProvider', function($routeProvider) {

        $routeProvider.when('/home', {
            templateUrl: 'home.html',
            controller: 'homeCtrl'
        });

        $routeProvider.when('/profile/:userId', {
            templateUrl: 'profile.html',
            controller: 'profileController'
        });

        $routeProvider.otherwise({
            redirectTo: '/home'
        });

    }])

    .controller('profileController', function($scope, $http, $routeParams) {
        $scope.params = $routeParams;
        /*$http.get('json_files/record_' + $scope.params.userId + '.json').success(function(response) {
            $scope.details = response;
        });*/
    })

        .controller('homeCtrl', function() {})
        .controller('profileController', function() {})

})();

Answer 2

您必须首先放置项目的根路径，然后是“＃”，而不是路径。

检查https://docs.angularjs.org/tutorial/step_09了解更多详细信息。

页面未找到错误，甚至为路由指定了angularJs

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-11-08 04:57:27

解决方案2
0 2016-11-07 12:38:01

页面未找到错误，甚至为路由指定了angularJs

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-11-08 04:57:27

解决方案2 0 2016-11-07 12:38:01

解决方案1
1 已采纳 2016-11-08 04:57:27

解决方案2
0 2016-11-07 12:38:01