AngularJS loading different views through routes

Question

I want to display two pages, but use a base layout. I have it somewhat working with the following:

index.html

<html data-ng-app="myApp">
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
    <div data-ng-view class="container"></div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="public/app.js"></script>
</body>
</html>

main.html

<div>
    <h2> Hello! This is Main page </h2>
</div>

list.html

<div>
    <h2> This is List page </h2>
</div>

app.js

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

// Routing Setup
function myAppRouteConfig($routeProvider) {
    $routeProvider.
    when('/', {
        templateUrl: 'index.html'
    }).
    when('/list', {
        controller: ListController,
        templateUrl: 'list.html'
    }).
    otherwise({
        redirectTo: '/'
    });
}

myApp.config(myAppRouteConfig);

This somewhat works when I visit index.html and list.html, but two problems:

When I load index.html, bootstrap loads fine. But when I visit list.html, bootstrap doesn't load. In fact, looking at the html source in firebug, all the code from index.html isn't loaded. The container is missing, the script and css links are missing.
How do I load an actual index page? I have my main.html that I want to load when a user visits the root page, but index.html is the base layout that contains code that persists through all other views (ie, like header and footer etc). If I modify my app.js and set the templateUrl: 'main.html', it seems to still load index.html. Is AngularJS implicitly looking for index.html as the base template?

EDIT:

File structure:

-- server.js
-- public/
      |-- index.html
      |-- list.html
      |-- main.html
      |-- js
          |-- app.js

Khanh TO · Accepted Answer · 2014-10-12 04:11:23Z

1

Change your route to:

$routeProvider.
    when('/', {
        templateUrl: 'main.html'
    }).
    when('/list', {
        controller: ListController,
        templateUrl: 'list.html'
    }).
    //if you need to use login page, add 1 more route
    when('/login', {
        templateUrl: 'login.html'
    })
    otherwise({
        redirectTo: '/'
    });

and put your index.html at the root directory (or any sub directory) of your web app, configure it as the default document.

Is AngularJS implicitly looking for index.html as the base template?

There is nothing related to angular here, this is the normal behavior of loading an html page from a web server.

Here is how it works:

When users access your application at the root url (e.x: http://example.com) or any sub directory (http://example.com/public), the index.html is loaded into browser like with normal web applications, then your app.js is run as normal. When the routes are registered and the application is bootstrapped, angular checks the route and loads main.html to be inserted into the container where ng-view is declared.

edited Oct 12, 2014 at 4:11

answered Oct 12, 2014 at 3:40

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user21398 Over a year ago

I tried that, but it doesn't work. I get a blank page when visiting root. Also, why doesn't bootstrap load for login.html? All the code from index.html is gone when I visit the login page. Could it be my file directory structure?

Khanh TO Over a year ago

@user21398: you should have only 1 index.html for your whole app. If you need login page, modify the route config to add 1 more route. I'll update my answer with an example.

user21398 · Accepted Answer · 2014-10-12 19:46:42Z

0

After digging around, it turns out my AngularJS route requires ngRoute, which is its own module now. After including it, it started to display the correct pages.

answered Oct 12, 2014 at 19:46

user21398

1,4934 gold badges18 silver badges32 bronze badges

Collectives™ on Stack Overflow

AngularJS loading different views through routes

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related