Question

我的Index.html

<!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);
});

我正在尝试在此实现中使用路由但它失败了。我添加了这段代码但是当我运行我的代码时......没有任何反应..我只是得到一个空白页面。这个实现有什么问题。我没有错误，没有记录。

Answer 1

您的主模块定义为

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

所以它完全取决于ui-router。

您的州是在一个单独的模块“hotelApp.states”中定义的，因此不属于您的申请。

另一个问题是你发布的两个JS文件是app.js和states.js，而你的html页面中没有<script>元素用于这两个文件。所以甚至没有被浏览器加载。

AngularJs路由失败

1 个答案: