2017-03-25 173 views
0

我是新來的角和使用角1,但我總是得到404資源不可用錯誤。
這裏是我所作所爲。我用NG-查看代碼,我卡在一部分,爲什麼我的應用程序不路由到登錄或儀表板頁面角ng瀏覽/路由器不工作

index.html : 

<!DOCTYPE html> 
<html ng-app="sampleApp" lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script src="webapp/js/vendor/angular.js"></script> 
<script src="webapp/js/vendor/angular-route.min.js"></script> 
<script src="webapp/js/app/app.js"></script> 
<script src="webapp/js/app/loginController.js"></script> 
<script src="webapp/js/app/dashboardController.js"></script> 
<script type="text/javascript"> 
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />')); 
    </script> 
</head> 
<body > 
<ng-view></ng-view> 

<a href="/login">Login</a> 
<a href="/dashboard">Dashboard</a> 
</body> 
</html> 

var sampleApp = angular.module('sampleApp',  ['ngRoute','loginModule','dashboardModule']); sampleApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){ 

    $routeProvider 
    .when('/login',{ 
     templateUrl: 'partials/login.html', 
     controller: loginController 
    }) 
    .when('/dashboard',{ 
     templateUrl: 'partials/dashboard.html', 
     controller: dashboardController 
    }); 

    $locationProvider.html5Mode(true); 
}]); 

This is my loginController.js 

angular.module('sampleApp',[]) 
.controller('loginController',function($scope,$location){ 
    $scope.login = "In Login Controller"; 
}); 

dashboardController.js 

angular.module('sampleApp',[]) 
.controller('dashboardController',function($scope,$location){ 
    $scope.dashboard = "In Dashboard Controller"; 
}); 

Please let me know what wrong am I doing. 
Sorry for my English. 
+0

什麼是LoginModule和dashboardModule? – Sajeetharan

回答

0

嗨以下修改我已經完成了你的代碼。 創建的login.html裏面的諧音夾一邊index.html文件的

{{login}} 

創建dashboard.html裏面的諧音夾index.html文件的預留

{{dashboard}} 

創建下面的代碼的index.html。

<!DOCTYPE html> 
<html ng-app="sampleApp" lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Insert title here</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
    <!--<script type="text/javascript"> 
     angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />')); 
    </script>--> 
</head> 

<body> 
    <ng-view></ng-view> 

    <a href="/login">Login</a> 
    <a href="/dashboard">Dashboard</a> 
</body> 

</html> 
<script> 
    var sampleApp = angular.module('sampleApp', ['ngRoute']); 
    sampleApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 
     $locationProvider.html5Mode({ 
      enabled: true, 
      requireBase: false 
     }); 
     $routeProvider.when('/login', { 
      templateUrl: 'partials/login.html', 
      controller: 'loginController' 
     }).when('/dashboard', { 
      templateUrl: 'partials/dashboard.html', 
      controller: 'dashboardController' 
     }); 
    }]); 
    sampleApp.controller('loginController', function($scope, $location) { 
     $scope.login = "In Login Controller"; 
    }); 
    sampleApp.controller('dashboardController', function($scope, $location) { 
     $scope.dashboard = "In Dashboard Controller"; 
    }); 
</script> 
+0

我跟着上面,雖然我改變了href到Login Dashboard,在app.js文件中做了相應的更改,但我仍然得到該錯誤。 –

+0

使用一些grunt服務或gulp服務爲特定主機提供您的應用程序。或者只是使用npm的serve插件。 –