ui-routerを使用して静的なランディングページをルートルートで独自のデザインに統合する方法

ui-routerを使用して角度js 1.xアプリケーションを開発しており、角度が新しいのでボトルネックが発生しています。私がばかに聞こえるなら、私を許してください。ui-routerを使用して静的なランディングページをルートルートで独自のデザインに統合する方法

問題：

私はcssファイルやスクリプトファイル（コントローラ、ディレクティブサードパーティのライブラリブートストラップ、角度などやサービスなどのファイル）は、独自のを持っている主な角度jsのアプリを持っています。

ここでは、個別のデザイン（独自のcss、スクリプト、画像ファイルがあります）のリンク先ページがあります。

ここでは、上記のランディングページを角度jsアプリのルートルート上の別のファイルと統合したいと考えています。

私の質問はどうすればいいのですか？そのため、ランディングページにアクセスしようとすると、CSSファイルとスクリプトファイルがそれぞれ重複せず、メインアプリケーションのルートが戻ってきます。

私はリンク先のページの状態とメインのアプリケーションファイルのそれぞれに必要なファイルを試しましたが、お互いのファイルと競合しているようです。私が起こっていると思いますが、ランディングページのメインアプリリンクをクリックしたときに、メインアプリケーション用に遅延ロードされたファイルとのページの競合が発生します。

編集1：

私はまた、新しいファイルを追加する前に、すべての遅延ロードのファイルをアンロードするが、何が起こるかはページ上unstyledページをリロードすることであるので、それは仕事をして、角度-UI-ルータ・スタイルを使用してみましたパッケージがheadタグに追加した後にCSSファイルをロードするため、数秒後にスタイルが取得されます

出典

2017-02-08 fullmetal

body.hのように1つのページを挿入する必要があるindex.htmlがあるとします。

<body> 
<div> 
<ui-view></ui-view> 
</div> 
</body>.

あなたが特定の状態へのデフォルトルートで作るためにあなたの設定で$のurlRouterProviderサービスを注入する必要があります：あなたのコードは、この

var myApp=angular.module("myModule",["ui.router"]) 

.config(function($stateProvider,$urlRouterProvider){ 
$urlRouterProvider.otherwise("/home"); 
$stateProvider 
    .state("homePage",{ 
      url:"/home", 
      templateUrl:"site/homepage.html", 
      controller:"homePageController as homePageCtrl" 
      }) 
    .state("Dashboard",{ 
      url:"/dashboard", 
      templateUrl:"site/dashboard.html", 
      controller:"DashboardController as homePageCtrl" 
      }) 

)}

説明のようにする必要がありindex.jsお使いのコントローラファイルで今

は考えます。この例ではは、我々はそれがルートのホームページ状態のために指定されたURLである「/ホーム」をURLになります

$urlRouterProvider.otherwise("/home");

をmake`。これは、その状態のそれぞれのhtmlページ、つまりhomePage.htmlをロードします。プロジェクトがロードされたときに他の静的ページをデフォルトのページにしたい場合は、そのURLを$ urlRouterProvider（）に指定するだけです。 $ urlRouterProviderサービスを挿入することを忘れないでください。また、あなたのカスタムCSSファイルをindex.htmlに追加してboootstrapのCSSファイルを上書きする場合は、あなたのHTMLファイルにIDを追加し、CSSファイルを指定してください。私はあなたの問題をクリアしていることを願っています。

出典

2017-02-08 07:35:23 SwapRenge

私はこれを、2つのプロジェクトを完全に別々に保つことによって行いました。サーバーにプロジェクトをデプロイするとき、Angularアプリをランディングページプロジェクトのサブディレクトリに配置します。

これを行うには、Angularアプリに、サイトのルートではなくサブディレクトリで実行していることを伝える必要があります。デプロイ時に、私はgulpタスクで角度アプリのindex.htmlの

のタグを変更します。私はローカルで開発しているときにAngularアプリをサブディレクトリではなくルートです。

<base>タグを変更すると、AngularアプリのURLを変更して、サブディレクトリ内の新しい場所を反映する必要がなくなります。

最後に、私のウェブサーバー（私の場合はnginx）は、ルートのランディングページとサブディレクトリの単一ページアプリケーションを提供するように設定されています。

出典

2017-02-11 19:26:58

ui-routerを使用して静的なランディングページをルートルートで独自のデザインに統合する方法

答えて

関連する問題