AngularJS view not loading

Question

I started learning AngularJS and trying to make a very simple skeleton application with multiple views. I am using Flask for the back-end.

Problem: When I load the page it does not show the appropriate view - I get a blank page.

The relevant folder structure is like this:

app/
|   static/
|   |      js/
|   |      |  app.js
|   |      |  controllers.js
|   |      partials/
|   |      |        landing.html
|   templates/
|   |         index.html
|   views/
|   |     views.py

Basically my index.html looks like this:

<!DOCTYPE html>
<html>
<head lang="en" ng-app="MyApp">
    <meta charset="UTF-8">
    <title>My App</title>

    <link href="{{ url_for('static', filename='semantic/semantic.min.css') }}" rel="stylesheet" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>

    <script src="{{ url_for('static', filename='semantic/semantic.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
    <script src="{{ url_for('static', filename='js/controllers.js') }}"></script>
</head>
<body>
    <div id="content" ng-view></div>
</body>
</html>

My python index function:

@app.route('/')
@app.route('/index')
def index():
    return make_response(render_template('index.html'))

My 'app.js':

'use strict';

angular.module('MyApp', ['ngRoute'])
    .config(['$routeProvider', '$locationProvider',
        function ($routeProvider, $locationProvider) {
            $routeProvider
                .when('/', {
                    templateUrl: 'static/partials/landing.html',
                    controller: IndexController
                })
                .otherwise({
                    redirectTo: '/'
                });

            $locationProvider.html5Mode(true);
        }]);

And my IndexController in controllers.js which does nothing:

'use strict';

/* Controllers */

function IndexController($scope) {

}

The landing.html file simply contains some text.

Where am I going wrong with this? All I get is an empty page. I noticed it does not complain or throw any errors if I put any path in templateUrl: path/to/landing.html, so I am not sure this is the correct way reference these files. Is it possible to somehow use the flask url_for function here?

EDIT

I tried using a template directly instead of a template URL. So I have

.....
.when('/', {
             template: 'Hello',
             controller: IndexController
           })
 ....

This is still giving me a blank page.

I don't have that much python knowledge, but what happends when you disable html5mode and use hashbang? $locationProvider.html5Mode(false); when using html5 mode the backend needs to redirect all request to the angular page (except for the views html pages). — Erik Lieben
– Erik Lieben, Commented Apr 23, 2015 at 11:35
Open your dev-console and check if all network requests work properly. Maybe you need to serve static files differently or access them differently. — felixbr
– felixbr, Commented Apr 23, 2015 at 11:47
do you register your controller somewhere? like var app = angular.module('app',[]); app.controller('controllerName', controllerFunction); — Erik Lieben
– Erik Lieben, Commented Apr 23, 2015 at 11:54
@erik Actually I didn't :). I added the registration but I still get the same results ... — Iulian
– Iulian, Commented Apr 23, 2015 at 12:05

Erik Lieben · Accepted Answer · 2015-04-23 12:40:15Z

1

Move your ng-app to your body tag, like this:

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>My App</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="MyApp">
        <div id="content" ng-view></div>
</body>
</html>

Register module

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

app.controller('IndexController', ['$scope', function($scope){
    $scope.title = "Home Page";
}]);

app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/', {
            controller : 'IndexController',
            templateUrl : 'landing.html'
        })

        .otherwise({
            redirectTo : '/'
        });
}]);

Then it should works, angular was now looking inside the head tag for ng-view, but it isn't there. Another option is to put it on the html tag.

edited Apr 23, 2015 at 12:40

answered Apr 23, 2015 at 12:19

Erik Lieben

1,2476 silver badges12 bronze badges

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

1 Comment

Iulian Over a year ago

Thank you man! Sometimes simple things get you when you try to learn new tings.

Collectives™ on Stack Overflow

AngularJS view not loading

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related