AngularJS 看不到脚本

Question

我正在使用 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

Answer 1

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

在controller中，你用方括号关闭了controller；删除。在应用程序配置中，依赖项；如果传入数组，则函数将是数组的最后一项；配置应通过数组关闭即方括号关闭。

Answer 2

这可能是您的脚本标记中的关系 src 有问题。尝试将其更改为以下绝对路径：

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

假设应用程序文件夹位于您网站的根目录中。

Answer 3

有几个位需要修复。

首先让 hapi 服务器应用程序文件安装惰性。

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

从索引中的 angular 脚本中删除 ng-src 指令，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!";
})

AngularJS 看不到脚本

AngularJS don't see script

javascript

angularjs

hapijs

index.html

app.js

main.html

server.js