2017-03-25 34 views
0

私は角度が新しく、角度1を使用していましたが、私は常に404リソースを利用できません。
ここ は、私はdoing.IがNG-ビューを使用していますよコードであり、私は私のアプリケーションは、ログインまたはダッシュボードページAngular ng-view/Router not working

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

こんにちは以下のような変形Iにルーティングされない理由として一部で立ち往生していますあなたのコードに行ったことがあります。 は、コードを次のようにindex.htmlをを作成脇のindex.htmlファイルの

{{dashboard}} 

をパーシャルフォルダ内dashboard.htmlを作成

{{login}} 

のindex.htmlファイルの脇の部分音フォルダ内login.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 serveまたはgulp serveを使用します。またはnpmからserveプラグインを使用するだけです。 –