CODEWITHSUNDEEP
javascriptangularjsnode.js
JohnWick
JohnWick

Reputation: 5149

AngularJS -- View Will Not Render in my Browser?

I am navigating to a route '/login' I set up in my angular app. When I try to navigate to the view I created, using angular routing, I only see the navbar on my page, and nothing inside ng-view. In the network tab of my chrome console, it shows that the view is being successfully requested and sent to the client, yet it is not rendering for me in view source. Also I'd like to note that my route for '/' is working correcting. There are no errors in the console.

I am using NodeJS + ExpressJS for my webserver. It's an SPA. Also I am using RequireJS for module loading.

server.js

var express = require('express'),
    app = express(),
    path = require('path'),
    apiRouter = require('./app/routes/api'),
    mongoose = require('mongoose'),
    compression = require('compression');

app.use(compression());
app.use(express.static('public'));
app.use('/api', apiRouter);

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

mongoose.connect('mongodb://localhost/triviaattack');

var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
    //Connected to DB successfully.

});

app.listen(1337);

index.html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <!-- <script src="js/vendor/modernizr-2.8.3.min.js"></script> -->
        <script data-main="js/main" src="js/vendor/require.js"></script>     
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <nav class="navbar navbar-inverse navbar-fixed-top" ng-controller="navCtrl">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><button class="btn btn-default navbar-btn" ng-click="login()">Login</button></li>
                <li><button class="btn btn-info navbar-btn" ng-click="register()">Register</button></li>
            </ul>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>
        <div ng-view></div>
    </body>
</html>

main.js

require.config({

    paths: {
        'angular': 'vendor/angular',
        'domReady': 'vendor/domready',
        'angularRoute': 'vendor/angular-route',
        'bootstrapCss': 'vendor/bootstrap-css'
    },

    shim: {
        'angular': {
            exports: 'angular'
        },
        'angularRoute': {
            deps: ['angular'],
            exports: 'angularRouter'
        }
    },

    deps: ['./bootstrap']
});

bootstrap.js

require([
    'angular', 
    'angularRoute', 
    'app',
    'services/loginSvc',
    'controllers/navCtrl',
    'controllers/homeCtrl',
    'controllers/loginCtrl',
    'routes'
    ], function (angular, angularRoute, app) {
    'use strict';

    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });

});

app.js

define([
    'angular',
     'angularRoute'
 ], function(angular, angularRoute) {

'use strict';

var app = angular.module('myApp', ['ngRoute']);

return app;

});

routes.js

define(['app'], function(app) {
    'use strict';

    app.config(function($routeProvider) {
        $routeProvider
        .when('/', {
            templateUrl: 'js/views/home.html',
            controller: 'homeCtrl'
        })
        .when('/login', {
            templateUrl: 'js/views/login.html',
            controller: 'loginCtrl'
        });
    });
});

Upvotes: 1

Views: 1364

Answers (2)

Andrew Mairose
Andrew Mairose

Reputation: 10995

I imagine you are typing the /login path directly in your browser. If you are typing the route in manually to your browser, when you type in http://myapp.com/myapp/, ng-route will follow the / route. However, if you type http://myapp.com/myapp/login, it will not follow the login route. This is because ng-route expects the route to come after a #.

Try typing http://myapp.com/myapp/#/login, obviously replacing the myapp parts with the appropriate path for your application.

Also, it might help to make a /home route, then use the .otherwise() function of $routeProvider to make that the default route that it loads. That way, if you attempt to hit a route that does not exist, it will default to the /home route, instead of showing you a blank template.

Here is how you would achive that:

app.config(function($routeProvider) {
    $routeProvider
    .when('/home', {
        templateUrl: 'js/views/home.html',
        controller: 'homeCtrl'
    })
    .when('/login', {
        templateUrl: 'js/views/login.html',
        controller: 'loginCtrl'
    })
    .otherwise({
        redirectTo: '/home'
    });
});

EDIT:

Always use your browser's element inspector when you are using ng-view. The 'View Source' option in your browser will never show your loaded template code, because the actual source code of your page just contains <div ng-view></div>, and not the template code.

Upvotes: 3

JohnWick
JohnWick

Reputation: 5149

My view actually was rendering. But since I was using a fixed navbar, it was being displayed behind it (so it was invisible.) I can add a margin to top of my ng-view div, really simple fix.

Upvotes: 0

Related Questions