Angular: ng-view not displaying anything

0
votes

I'm learning Angular so I can get into web app development. I'm doing a test project but can't get ng-view to work. My HTML is as follows:

<!DOCTYPE HTML>
<html>
<head>
    <title>TEST PROJECT</title>
    <link rel="stylesheet" type="text/css" href="test_project.css">
    <script src="lib/jquery-1.11.3.js"></script>
    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-route.min.js"></script>
    <script src="lib/angular-animate.min.js"></script>
    <script src="lib/Chart.js"></script>
</head>
<body ng-app='TestProject'>

    <center>
    <div class="interface" ng-controller="SelectionController">
        <div style="height: 10%">
        <a href="http://www.somewebsite.com"><img style="margin:5px; float:left; height: 10vh" src="pictures/logo.gif"></a>
        <center><h1>{{ title }}</h1></center>
        </div>

        <div style="height: 85%" ng-view></div>

        <div style="height:5%">
        <p>Having trouble? <a href="http://www.somewebsite.com/contact.shtml">Request Support</a>
        <p style="bottom: 50px; position:fixed; size:8px">Footer Text
        </div>
    </div>
    </center>


    <script src="angular/app.js"></script>
    <script src="angular/controllers.js"></script>
</body>
</html>

I also have app.js:

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

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

As well as controllers.js, which currently only has:

app.controller('SelectionController', ['$scope',function($scope) {
    $scope.title = 'Title!';

}]);

And then I have a home.html,

<div>
<h2>Welcome to this page! Please select an option below.</h2>
            <table>
                <td><div><img class="Symbol" src="../pictures/pica.jpg"></div></td>
                <td><div><img class="Symbol" src="../pictures/picb.jpg"></div></td>
                <td><div><img class="Symbol" src="../pictures/picc.jpg"></div></td>
            </table>
</div>

which SHOULD be loaded into ng-view. My aim is to make a single page where the center div of the window changes so I can load different screens to do whatever the app does without reloading the other stuff. The current directory structure is like this:

--angular
------app
------controllers
--lib
------angular.min
------angular-animate.min
------angular-route.min
------Chart.js
------jquery-1.11.3
--pictures
------pica
------picb
------picc
--views
------home.html
index.html
test.css

What I have now makes {{ title }} change the way it's supposed to, but there's nothing in the middle of the page. When I inspect the page, I see that the ng-view directive is commented.

<-- ngView: undefined -->

Is where my content from home.html is supposed to be. Why is ngView being commented out here?

2
angularjs
Are you sure the path to the view is correct (it may be relative to the website root, not the "app.js" root)? Although it may be trivial, please post the view source as well. - Brendan Green
Ive added the view source and an outline of where stuff is in the directory - Zephyr
Change your route to be: templateUrl : '/views/home.html' - notice the casing on Url. Also, update the path to be "root based" - Brendan Green
I did the first two things and updated the OP, but I dont know what you mean by update the path to be root based - Zephyr
Did it make a difference? Is there anything logged to the console that details an error? - Brendan Green

2 Answers

1
votes

I had this EXACT issue. what resolved it for me was, as Brendan Green mentioned,
changing my route to be : templateUrl instead of : templateURL ...casing made a huge difference!!!!

0
votes

The html file that you show should be:

This file should be the index.html.

<html>
<head>
<title>TEST PROJECT</title>
<link rel="stylesheet" type="text/css" href="test_project.css">
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/angular-animate.min.js"></script>
<script src="lib/Chart.js"></script>
</head>
<body ng-app='TestProject'>

  <div ng-view></div>

<script src="angular/app.js"></script>
<script src="angular/controllers.js"></script>
</body>
</html>

And then create a new html file, should be as you have in the routeProvider, and should be inside inside view folder, as it view/home.html

And content must be:

<div class="interface" ng-controller="SelectionController">
    <div style="height: 10%">
    <a href="http://www.somewebsite.com"><img style="margin:5px; float:left; height: 10vh" src="pictures/logo.gif"></a>
    <center><h1>{{ title }}</h1></center>
    </div>
    <div style="height:5%">
    <p>Having trouble? <a href="http://www.somewebsite.com/contact.shtml">Request Support</a>
    <p style="bottom: 50px; position:fixed; size:8px">Footer Text
    </div>
</div>

Thats the way angular works.

Regards.