2016-11-07 87 views
0

我正在開發管理面板和用戶面板。管理面板工作正常,代碼寫入ExpressJs。現在我想要在AngularJs中設計我的用戶面板。我創建了HTML頁面和app.js頁面。頁未找到錯誤,甚至路由給出angularJs

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 /配置文件。

不知道怎麼回事......或者我在哪裏弄錯了...... 請提出任何建議。

+0

做其他路線正在 –

+0

請你把你的代碼中http://plnkr.co/ –

+0

無路由的處於工作狀態,能直接訪問home.html的URl,但不喜歡/家 – Gayatri

回答

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() {}) 

})(); 
+0

嗨,我正在使用mottie鍵盤https:// github .COM/Mottie /鍵盤。我在index.html中添加了所有js文件和css文件,而不是在家中訪問鍵盤。HTML。所有的腳本工作正常。你能幫我解決這個問題嗎? – Gayatri

+0

請確保你正在添加jquery .. –

+0

如果你爲你的問題創建一個plunker,將很容易調試:) –

0

你必須首先放置你的項目根路徑,然後'#'和路徑。

查看https://docs.angularjs.org/tutorial/step_09瞭解更多詳情。

+0

累了,但也沒有爲我工作。任何其他解決方案..請... – Gayatri

+0

還請注意'ngView'在代碼中缺失。 – marcosspn

+0

謝謝,我加了一樣的404錯誤即將到來。任何其他...請 – Gayatri