頁面未找到錯誤，甚至為路由指定了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