Search code examples
javascriptangularjsnode.jstemplatesurl-routing

How to view first Angular template?

I'm trying to build a very basic Angular app but I'm having trouble with viewing the first template. My html looks like this:

<html ng-app="formApp">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>

and my app.js like this:

'use strict';
var formApp = angular.module('formApp', ['ui.router']);
formApp.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('main', {
            url: '/main',
            templateUrl: 'templates/main.html',
            controller: 'MainCtrl'
        });
    $urlRouterProvider.otherwise('/main')
});

and my controllers.js like this:

var formControllers = angular.module('formControllers', []);
formControllers.controller('MainCtrl', function($scope){
    $scope.lala = 'lalallala';
});

The template under the name templates/main.html looks like this:

<h1>Yes yes people</h1>
{{lala}}

So I started node using the command http-server -a 0.0.0.0 -p 8000 and went in the browser to http://0.0.0.0:8000/. Unfortunately, the screen remains white. It does load from the server (I see it making requests to node in the terminal) but I see nothing in the browser. I tried various urls, such as:

http://0.0.0.0:8000/
http://0.0.0.0:8000/#
http://0.0.0.0:8000/#/main
http://0.0.0.0:8000/app
http://0.0.0.0:8000/app/#/

but nothing works.

Does anybody know how I can view the first template I created? All tips are welcome!

[EDIT] The console gives no errors and when I view the source of the page, I do see my html. I just don't see anything like Yes yes people which I defined in my main.html. So My template is simply not loading. Any idea?

Solution

  • For UI-Router you should use ui-view directive instead of ng-view. So your html should look like this:

    <html ng-app="formApp">
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <div ui-view></div>
    </body>
</html>