AngularJS와 라우팅

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

이 구현에서 라우팅을 사용하려고하는데 실패하고 있습니다. 이 코드를 추가했지만 코드를 실행하면 아무 일도 일어나지 않습니다. 빈 페이지가 생깁니다. 이 구현에서 잘못된 점은 무엇입니까? 나는 어떤 오류도없고 어떤 통나무도 얻지 못한다.

출처

2016-06-20 Shah Rukh K

당신은 브라우저에서 어떤 경로를 액세스하고 있습니까? –

주요 모듈은 그래서 UI 라우터에만 의존

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

으로 정의된다.

상태는 별도의 모듈 'hotelApp.states'에 정의되어 있으므로 응용 프로그램의 일부가 아닙니다.

또 다른 문제는 게시 한 두 개의 JS 파일이 app.js 및 states.js이고 두 파일에 대한 HTML 페이지에 <script> 요소가 없다는 것입니다. 그래서 브라우저에서로드되지 않았습니다.

출처

2016-06-20 06:37:27

위의 문제가 해결되었습니다. 하지만 이제 HTML이 ui-view에서로드되지 않습니다. I는 angular.module '('hotelApp '['ui.router ','hotelApp.states ','hotelApp.controller ']) \t .RUN (함수 ($ 상태) {$ \t \t 상태 추가 한 .go ('hotelApp.homePage'); \t}); start.js에있는 –

먼저 'hotelApp.homePage'로 이름을 지정하지 마십시오. 이것은 존재하지 않는 hotelApp 상태의 하위 인 homePage 상태를 정의합니다. –

나는이 스크립트를 여기에 추가하지 않았습니다 .. 거기에 있습니다 : P –

AngularJS와 라우팅

답변

관련 문제