AngularJS: single page app demo not working

Question

i'm having this online course on AngularJS, which provides the code in folders, according to the lesson. This one is about routing and single page applications; similar demos and structures work on plunker (like this one ) but not in my machine...I don't understand why, can someone help me out?

EDIT: actually, if I download this demo the thing wont work...

INDEX file:

<html lang="en-us" ng-app="myApp">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">


        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <style>
            html, body, input, select, textarea
            {
                font-size: 1.05em;
            }
        </style>


        <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>

        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#/second"><i></i> Second</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">

            <div ng-view></div>

        </div>

    </body>
</html>

The Module file: APP.JS

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

myApp.config(function ($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl: 'pages/main.html',
        controller: 'mainController'
    })

    .when('/second', {
        templateUrl: 'pages/second.html',
        controller: 'secondController'
    })

    .when('/second/:num', {
        templateUrl: 'pages/second.html',
        controller: 'secondController'
    })

});

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {

    $scope.name = 'Main';

}]);

myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {

    $scope.num = $routeParams.num || 1;

}]);

Pages one and two (views):

<h1>This is Main.</h1>
<h3>Scope value: {{ name }}</h3>

<h1>This is second.</h1>
<h3>Scope route value (on second page): {{ num }}</h3>

The folder structure. The code is as suggested

well, yes, it says "angular is not defined" first line on app.js — Mellville
– Mellville, Commented Aug 1, 2017 at 10:10
I dont get it because I have other samples - not about routing - and they work.... — Mellville
– Mellville, Commented Aug 1, 2017 at 10:12
Do they have the same script source as above? Try changing the script tags as below — Vivz
– Vivz, Commented Aug 1, 2017 at 10:14

Vivz · Accepted Answer · 2017-08-01 10:07:55Z

1

Your references for angular and bootstrap are not correct

Angularjs

<script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>

Bootstrap

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

answered Aug 1, 2017 at 10:07

Vivz

6,6282 gold badges19 silver badges34 bronze badges

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

7 Comments

Mellville Over a year ago

Bootstrap now loads, but the links dont work. Here's the log:

Error: [$compile:tpload] http://errors.angularjs.org/1.3.0-rc.1/$compile/tpload?p0=pages%2Fmain.html     at angular.js:38     at g (angular.js:14932)     at angular.js:12076     at m.$eval (angular.js:13276)     at m.$digest (angular.js:13088)     at m.$apply (angular.js:13380)     at HTMLHtmlElement.<anonymous> (angular.js:10414)     at HTMLHtmlElement.c (angular.js:2977)

Vivz Over a year ago

It is telling that it failed to fetch the templates that u have defined in your routing. Are the paths correct?

Mellville Over a year ago

I guess so, I haven't changed the file structure. Besides, as I said above, if I build a simple module and controller (two files), the thing works fine, so I guess the problem isnt the CDN

Vivz Over a year ago

Do you have the html files in pages directory which is in the same level as your app.js?

Mellville Over a year ago

yes, I'm sorry, for the late reply. The folder was supose to work as it is; changing the links only gave me bootstrap...As for Angular, if i write some basic code like an object attached to scope and then render it, the thing works...so i'm confused

|

Ghulam Mohayudin · Accepted Answer · 2017-08-01 10:39:33Z

You need to correct you urls like this

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

myApp.config(function ($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl: 'pages/main.html',
        controller: 'mainController'
    })

    .when('/second', {
        templateUrl: 'pages/second.html',
        controller: 'secondController'
    })

    .when('/second/:num', {
        templateUrl: 'pages/second.html',
        controller: 'secondController'
    })

});

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {

    $scope.name = 'Main';

}]);

myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {

    $scope.num = $routeParams.num || 1;

}]);

<html lang="en-us" ng-app="myApp">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">


        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <style>
            html, body, input, select, textarea
            {
                font-size: 1.05em;
            }
        </style>


        <script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>

        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#/second"><i></i> Second</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">

            <div ng-view></div>

        </div>

    </body>
</html>

Also you need to add a page for the view on the following path in project pages/main.html

? honnestly I don't understand you answer. The code and structure are exacly the same...
I have added https in all links you have used in your header

john · Accepted Answer · 2017-08-01 10:50:40Z

0

You need to use your application throught the localhost like this:

Just mount your project on HTTP server.

$> sudo npm -g live-server
$> cd path/to/root/dir/project
$> live-server

EDIT: and eventually, include every time your scripts at bottom of body:

<body>

    .....
    .....
    .....

    <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
    <script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
    <script src="app.js"></script>
</body>

edited Aug 1, 2017 at 10:50

answered Aug 1, 2017 at 10:44

john

3161 silver badge9 bronze badges

Collectives™ on Stack Overflow

AngularJS: single page app demo not working

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related