2016-05-22 19 views
0

私はアプリケーションをビューに分割し、Angular UI Routerから始めようとしています。私は複数のビューを作成していますが、もし私が 'テンプレート'を使うとうまくいきますが、template.rlを外部の.htmlファイルと一緒に使うと空白のページしか得られません。AngularJS UIルータは、templateUrlで空白のページを表示します

HTML:

<!DOCTYPE html> 
<head> 
<meta charset="utf-8"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script> 

<script src="searchApp.js"></script> 

</head> 

<body ng-app="searchApp"> 
<div ui-view> 
</div> 
</body> 
</html> 

searchApp.js:

var searchApp = angular.module('searchApp', ['ui.router']) 
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('index', { 
    url: "/", 
    views: { 
     '': { 
     templateUrl: 'testView.html' 
     } 
    } 
    }); 

    $urlRouterProvider.otherwise('/'); 
}]) 

testView.html

This is a test. 

がここにありますPlunkr:https://plnkr.co/edit/4xQaHbx71mUNYRbTQntz

EDIT: これはPlunkerで動作しているようですが、私のコンピュータ上でローカルに動作しません。マックと勝利の両方で試してみました。

EDIT 2: 私はそれを作ることができるすべてはストレートファイルシステムから実行したときにUIルータtemplateUrlパラメータが動作しないということですが、多分、ファイルを開くことができるように、サーバーを必要ですか?これはそうですか?それのまわりで何か?

EDIT 3: ソリューション:templateUrlを使用して(または一般に任意のファイルを含めて)彼らはAjaxを介して、フェッチされているので、ときにページがファイルシステムから直接サーバを介して実行する必要はないと思われます。したがって、templateUrlを使用するには、ローカルマシンにサーバーをインストールするか、代わりにサーバーでコーディングを続ける必要があります。

+0

サーバー**必見テンプレートページがAJAX経由でフェッチされているので**、UI-ルータで使用されます。 – Claies

+0

これで説明します。どうもありがとうございました! –

答えて

0

angularが見つかりませんでしたので、これはUI-routerとは何の関係もありませんでした。 Angularを読み込むために間違ったURLを使用していました。

https://ajax.googleapis.com/ajax/libs/angularjs/...

"http://ajax.googleapis.com/ajax/libs/angularjs/...

を変更すると、物事が働かせました。

https://plnkr.co/edit/rSbD4FBIFsnamiaMQLve?p=preview

+0

ええと、私はそれが今Plunkerで動作することがわかりますが、これはまだ私のコンピュータ上でローカルに動作しません。私はmacとwinの両方でテストし、Plunkerからコードを直接コピーしました。私は一日中これに何らかの理由を見つけようとしていました...また、それ自体では角度がありますが、元の投稿に記載されているように、UIルータのtemplateUrlは機能しません。 –

+0

おそらくパスの設定ミス? –

+0

ああ、そう...本当に、これは何かのように聞こえるかもしれない。しかし、どのように設定するのですか?uiルータはどのような構成を必要としますか? –

関連する問題