mummakill mummakill - 2 months ago 7
Javascript Question

AngularJS don't see script

I'm using AngularJS + Hapi.js
Trying to create a simple ng-view example, but AngularJS don't see my custom script. Simple using src for app.js gave me an error in Chrome console. I tried to use ng-src, but nothing happens.

index.html



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

<script ng-src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script ng-src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script ng-src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script ng-src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
</head>
<body ng-app="testApp">
<div ng-view></div>

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


app.js



'use strict'

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

app.config(['$routeProvider'], function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'main.html',
controller: 'MainCtrl'
});
});

app.controller('MainCtrl', function($scope){
$scope.message = "Hello!";
}])


main.html



<h1>
{{ message }}
</h1>


server.js



'use strict';

const Hapi = require('hapi');
const Hoek = require('hoek');
const Handlebars = require('handlebars');

const server = new Hapi.Server();
server.connection({ port: 3000 });

server.register(require('vision'), (err) => {
Hoek.assert(!err, err);

server.views({
engines: {
html: Handlebars
},
path: __dirname,
layout: 'index'
});

server.route({
method: 'GET',
path: '/',
handler: {
view: 'index'
}
});
});

server.start((err) => {

if (err) {
throw err;
}
console.log(`Server running at: 3000`);
});


App structure:

server.js
index.html
- app
app.js
main.html

Answer

There are a few bits that need fixing.

First to get hapi to server the app files install inert.

npm install inert --save

Add then register the route to server.js the files under /app. This route should be registered first.

server.register(require('inert'), (err) => {
    server.route({
        method: 'GET',
        path: '/app/{param*}',
        handler: {
            directory: {
                path: './app',
                redirectToSlash: true,
                index: true
            }
        }
    });
});

server.register(require('vision'), (err) => {
    Hoek.assert(!err, err);

    server.views({
        engines: {
            html: Handlebars
        },
        path: __dirname,
        layout: 'index'
    });

    server.route({
        method: 'GET',
        path: '/',
        handler: {
            view: 'index'
        }
    });
});

Remove the ng-src directives from the angular scripts in index,html and add angular-route as well.

<head>
<meta charset="UTF-8">
<title>Document</title>

<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-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>

In your app.js fix the templateUrl remove the ] in the controller.

'use strict'

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

app.config(['$routeProvider'], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'app/main.html',
        controller: 'MainCtrl'
    });
});

app.controller('MainCtrl', function($scope){
    $scope.message = "Hello!";
})
Comments