2016-06-20 13 views
0

マイIndex.htmlとAngularJsルーティングは

<!doctype html> 
<html data-ng-app="hotelApp"> 

    <head> 
    <title>SRK Hotel</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- <link rel="stylesheet" href="stylesheets/style.css"> --> 

    <!-- Angular dependencies --> 
    <link rel="stylesheet" type="text/css" href="lib/angular-material/angular-material.css"> 
    <script src="lib/angular/angular.min.js"></script> 
    <script src="lib/angular-animate/angular-animate.min.js"></script> 
    <script src="lib/angular-aria/angular-aria.min.js"></script> 
    <script src="lib/angular-material/angular-material.min.js"></script> 
    <script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script> 


    <script src="scripts/start.js" type="text/javascript"></script> 
    <script src="scripts/home-page-ctrl.js" type="text/javascript"></script> 
    <script src="scripts/states/misc-states.js" type="text/javascript"></script> 


    </head> 

    <body> 
    <!-- <div data-ng-include="'views/welcome-page.html'"></div> --> 
    <div ui-view="welcome"></div> 
    </body> 

</html> 

マイapp.js

(function() { 

    angular.module('hotelApp.controller', []); 
    angular.module('hotelApp.states', ['ui.router']); 

    angular.module('hotelApp', ['ui.router']); 



})(); 

マイstates.jsを失敗している - それは状態

angular.module('hotelApp.states') 
    .config(function ($stateProvider, $urlRouterProvider) { 
    'use strict'; 


    $stateProvider 
     .state('hotelApp.homePage', { 
      url: '/home', 
      views: { 
       'welcome': { 
        templateUrl: 'views/welcome-page.html', 
        conntroller: 'homePageCtrl' 
       } 
      } 
     }); 
    $urlRouterProvider.when('/', function($state){ 
    console.log('$state ' , $state); 
     $state.go('hotelApp.homePage'); 
    }); 

    $urlRouterProvider.otherwise(function(){ 
     console.log('hi'); 
    }); 


    }); 

私nodejsの宣言のためにそこにありますファイル

var express = require('express'); 

var cfenv = require('cfenv'); 


var app = express(); 


app.use(express.static(__dirname + '/public')); 
app.use(express.static(__dirname + '/public/views')); 

app.use('/lib', express.static(__dirname + '/node_modules')); 


app.get('*', function(req, res) { 
    res.sendFile(__dirname+'/public/index.html'); 
}); 


var appEnv = cfenv.getAppEnv(); 

app.listen(appEnv.port, '0.0.0.0', function() { 
    console.log("server starting on " + appEnv.url); 
}); 

この実装ではルーティングを使用しようとしていますが、失敗しています。 私はこのコードを追加しましたが、コードを実行すると何も起こりません。空白のページが表示されます。この実装で何が問題になりますか?私はエラーもログも得られません。

+0

あなたがブラウザでアクセスしているルートはありますか? –

答えて

0

あなたの主なモジュールは、だから、UI-ルータのみに依存

angular.module('hotelApp', ['ui.router']); 

として定義されます。

あなたの州は別のモジュール 'hotelApp.states'に定義されています。したがって、あなたのアプリケーションの一部ではありません。

もう1つの問題は、あなたが投稿した2つのJSファイルがapp.jsとstates.jsであり、その2つのファイルのHTMLページに<script>要素がないことです。だから、ブラウザでもロードされていません。

+0

これにより、上記の問題が解決されます。しかし、HTMLはui-viewで読み込まれていません。 私は 'angular.module( 'hotelApp'、[ 'ui.router'、 'hotelApp.states'、 'hotelApp.controller']) \t .RUN(関数($状態){ \t \t $状態を追加しました.go( 'hotelApp.homePage'); \t}); (start.js内) –

+0

まず、 'hotelApp.homePage'という名前を付けないでください。これは存在しないhotelApp状態の子であるホームページ状態を定義します。 –

+0

私はこれらのスクリプトをここに追加していません。そこにはあります:P –

関連する問題