2017-01-26 5 views
-1

私はウェブサイトを作成していますが、JavaScript + AngularJSを使用していますが、現在はアプリケーションのルートを作成していますが、サーバで404が見つからないため、インターネットのいくつかの例を試しましたが、 htmlページがWebContentの中にあることを思い出して、私のコードの例を示します。AngularJS + JavaScriptで経路を作成するにはどうすればよいですか?

<html ng-app="angularRoutingApp"> 
<head> 
    <title>Home</title> 
    <meta charset="utf-8"> 
</head> 
<body> 
    <div> 
     <a href="/index">index</a> <br> <a href="/">home</a> 
    </div> 
    <div ng-view></div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script> 
    <script> 
    var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']); 

    angularRoutingApp.config(function($routeProvider, $locationProvider) { 

     $locationProvider.html5Mode(true); 

     $routeProvider 
      .when("/index", { 
       template: "/index.html" 
      }) 
      .otherwise({ 
       redirectTo: '/home.html' 
      }); 
    }); 
    </script> 
</body> 
</html> 
+1

'' 要素がありますか? – Laazo

+0

実際にng-viewタグは定義されていませんでしたが、今は書きましたが、まだ404が見つからない、上記の変更です –

+0

ランダムなコードを試してみるのではなく、チュートリアルに従うことをお勧めします。 – zerohero

答えて

0

ng-viewディレクティブを忘れました。

も、

  • hrefがハッシュプレフィックスである必要はあり - またはリンク・ディレクティブを使用して。
  • ビューを提供するredirectToキーが必要[名前/住所] &ない テンプレートあなたが&インラインでないコードは、キーtemplateUrlを使用するテンプレートファイルを使用したい場合は
  • あなたが例を見ることができます

ここにあなたのコードの:http://codepen.io/AceDesigns/pen/ZLXLKa

<html ng-app="angularRoutingApp"> 
    <head> 
    <title>Home</title> 
    <meta charset="utf-8"> 
    </head> 
    <body> 
    <div> 
     <a href="#/index">index</a><br> 
     <a href="#/">home</a> 
    </div> 
    <div class=""> 
     <ng-view></ng-view> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script> 
    <script> 
     var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']); 
     angularRoutingApp.config(function($routeProvider){ 
     $routeProvider 
      .when("/index", {template:"<div>INDEX VIEW</div>"}) 
      .when("/home", {template:"<div>HOME VIEW</div>"}) 
     .when("/tempFile", {templateUrl: "views/temp_file.html"}) 
      .otherwise({redirectTo: '/home'}); 
     }); 
    </script> 
    </body> 
</html> 
+0

ありがとう、それは働いた。 –

関連する問題