AngularJS не видит скрипт

Я использую AngularJS + Hapi.js. Пытаюсь создать простой пример ng-view, но AngularJS не видит мой собственный скрипт. Простое использование src для app.js привело к ошибке в консоли Chrome. Я пытался использовать ng-src, но ничего не происходит.

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`);
});

Структура приложения:

server.js
index.html
 - app
   app.js
   main.html
Источник

3 ответа

Решение

Есть несколько битов, которые нужно исправить.

Во-первых, чтобы получить доступ к серверу, приложение инсталлирует файлы приложения.

npm install inert --save

Добавьте, а затем зарегистрируйте маршрут к server.js файлам в / app. Этот маршрут должен быть зарегистрирован в первую очередь.

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'
        }
    });
});

Удалите директивы ng-src из угловых сценариев в index,html и добавьте также angular-route.

<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>

В вашем app.js исправьте templateUrl, удалите] в контроллере.

'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!";
})
Источник

Это может быть проблемой с реляционным src в вашем теге script. Попробуйте изменить его на следующий абсолютный путь:

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

Предполагая, что папка приложения находится в корне вашего сайта.

Источник

Ваш файл app.js должен быть таким:

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!";
})

В контроллере вы закрыли контроллер квадратными скобками; удален. В конфиге приложения, зависимости; если передано в массиве, функция будет последним элементом массива; Конфигурация должна закрываться массивом, т.е. квадратной скобкой.

Источник
Другие вопросы по тегам