Shah Rukh K Shah Rukh K -5 years ago 142
AngularJS Question

AngularJs routing is failing

My Index.html

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

<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>


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


My app.js

(function() {

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

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


My states.js - that is there for declaration of states

.config(function ($stateProvider, $urlRouterProvider) {
'use strict';

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



my nodejs file

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) {

var appEnv = cfenv.getAppEnv();

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

I am trying to use routing in this implementation but it is failing.
I have added this code but when i run my code.. nothing happens .. I just get a blank page. What is wrong with this implementation.? I get no error, no logs.

Answer Source

Your main module is defined as

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

So it depends exclusively on ui-router.

Your states are defined in a separate module, 'hotelApp.states', which is thus not part of your application.

Another problem is that the two JS files you've posted are app.js and states.js, and there is no <script> element in your html page for those two files. So the're not even loaded by the browser.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download