2013-03-28 24 views
10

シンクライアント用のhtml5 SPAアプリケーションを開発したいと考えています。 Webサーバーを起動する方法はありません。そして、私はWebサーバーなしでルーティング作業をすることはできません。Webサーバを使用しないAngularJSルーティング

私のindex.html

<!doctype html> 
    <html ng-app="app"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> 
    <script src="app.js"></script> 
    <title></title> 
</head> 
<body style="background-color: white;"> 
    <h1>Index</h1> 
    <a id="link" href="/login">Go to login</a> 
    <div ng-controller="HomeCtrl"> 
     <ul ng-repeat="number in numbers" > 
      <li>{{number}}</li> 
     </ul> 
    </div> 
</body> 
</html> 

マイapp.js

angular.module('app', []). 
    config(function($routeProvider) { 
    $routeProvider. 
     when('/', {controller: HomeCtrl, templateUrl: 'index.html'}). 
     when('/login', {controller: LoginCtrl, templateUrl: 'login.html', resolve: function() {}}). 
     otherwise({redirectTo:'/'}); 
    }); 

function HomeCtrl($scope) { 
    $scope.numbers = [1,2,3,4,5]; 
} 

function LoginCtrl($scope) { 

} 

私はChromeで自分のコンピュータ上でローカルにこのコードをテストしています。データバインディングはチャームのように機能していますが、ログインページへのリンクはありません。それは{X}:\ loginにつながっています。だから私の質問は:それはそれがWebサーバーで動作するようにすることは可能ですか?そして第二に、それを達成するために私が逃しているものは?ここで

答えて

4

しばらくすると、私はそれを作った。まず

は、私は

別のファイルに
<div ng-controller="HomeCtrl"> 
    <ul ng-repeat="number in numbers" > 
     <li>{{number}}</li> 
    </ul> 
</div> 

この部分を移動させる第二に、index.htmlに私は、これはそれがビューのプレースホルダとして使用さ

<div ng-view></div> 

DIV追加しました。

ここでindex.htmlは、「マスターページ」または「レイアウト」として使用され、asp.netに精通している場合は使用されます。リンクをクリックすると、templateUrlファイルの内容がプレースホルダdivに挿入されます。

これの欠点は、URLがこの<a href="#/login"></a>

+1

これは標準的な角度のアプローチです。 docsサイト – charlietfl

+0

のチュートリアルを見て、ええ、ありがとう。分かりました。 – dantix

+1

これは私にとってはうまくいかなかった。あなたの答えで述べた上記の変更のうち、何がサーバーへのリクエストを妨げたのでしょうか?私の場合、アプリケーションはWebサーバーなしでは動作しませんでした。 –

1

http://docs.angularjs.org/api/ngからいくつかのコード。$ルート

// configure html5 to get links working on jsfiddle 
$locationProvider.html5Mode(true); 

私は同じことがあなたのために働くだろうと思います。

+0

いいえ、私はこれを試しました。私はそれが実際に働いている。私は数分で回答を投稿します。 – dantix

2

角度は、クライアント側のJSのフレームワークであり、それはWebサーバを必要としないように見えるべきであるということです。あなたがhtml5modeを使用しているのでなければ、ng-viewを追加すること(あなたがすでに分かったように)のほかに、あなたはリンクの前にhashbang(#/login)を持っている必要があります。

URLにハッシュバングを設定することは欠点ではありません。オプションです。

+0

非常に参考になりますが、異なるクライアントがアプリケーションにアクセスするにはどうすればよいのでしょうか...厚いクライアントのようなアプリケーションクライアントコードをすべてのクライアントに送信する必要がありますか? – Jay

1

この問題の解決策[Cross origin requests are only supported for HTTP]は私のために働きます。
しかし、実際にはngViewとngRouteを使用してWebサーバーがなくてもうまくいかないのですか?
ngRouteを設定するとindex.htmlの外部にlogin.htmlが作成されます。つまり、AJAXサービスを使用してファイルをロードしていますが、AJAXサービスはWebサーバーなしでは動作しません。だから私は私の問題を持っている。

+0

-disable-web-securityフラグを付けてchromeを実行すると、CORSと同じ発信元ポリシーは無視されますが、注意して実行してください。私がこの質問をしていたとき、私は、デスクトップ/モバイルブラウザほどの厳しいセキュリティ制限がないデバイスに埋め込みブラウザのアプリケーションを開発していたので、私にとって問題ではありませんでした。 – dantix

+0

ありがとう、Dantix。 IEはどうですか? –

+0

IEと同じ方法で、Webセキュリティを無効にすることができます –

5

スクリプトタグを使用してindex.html自体にテンプレートを配置する必要があります。これにより、angleがAJAX要求をフェッチする必要がなくなります。

<script type="text/ng-template" id="home.html"> 
    This is the content of the template 
</script> 
関連する問題