AngularJS 看不到脚本答案

【问题标题】：AngularJS don't see scriptAngularJS 看不到脚本
【发布时间】：2016-09-17 18:21:56
【问题描述】：

我正在使用 AngularJS + Hapi.js 试图创建一个简单的 ng-view 示例，但 AngularJS 看不到我的自定义脚本。简单地使用 src for 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

【问题讨论】：

控制台抛出什么错误？
"localhost:3000/app/app.js 加载资源失败：net::ERR_CONNECTION_REFUSED"
这与 HapiJS 有关。使用 inert (hapijs.com/tutorials/serving-files) 包提供文件，而不是仅提供 index.html。在您的服务器代码中，您只公开了 HTML 文件；仅此而已，这就是 app.js 失败的原因。
由于最初的 4 script[src]，因此存在 Angular 和插件。但后来app.js 脚本标签无法获取 app.js 文件，因此您的应用无法运行。
在 head 标签中你没有提供 'angular-route.js' 文件

标签： javascript angularjs hapijs

【解决方案1】：

有一些地方需要修复。

首先要让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'
        }
    });
});

从 index,html 中的 angular 脚本中删除 ng-src 指令，并添加 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!";
})

【讨论】：

它看起来很棒而且必须很好用，但现在在控制台错误中：“未捕获的错误：[$injector:modulerr] errors.angularjs.org/1.3.15/$injector/…...gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15% agnular.js 中的 2Fangular.min.js%3A34%3A399)" 尝试将脚本设置为本地和凉亭 - 都一样。
@mummakill 这看起来像是缺少 ngRoute 脚本的错误。你也加了<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>吗？
Yes :) 问题已在 app.js 中解决： app.config(['$routeProvider', function($routeProvider) { $routeProvider.when('/', { templateUrl: 'app/ main.html'，控制器：'MainCtrl' }); }]);通过转移方括号。

【解决方案2】：

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

在控制器中，您已经用方括号关闭了控制器；删除。在应用程序配置中，依赖项；如果传入数组，则函数将是数组的最后一项； config 应该通过数组关闭，即方括号来关闭。

【讨论】：

这个我已经在 cmets 中解释过了。和hapi配置有关。

【解决方案3】：

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

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

假设 app 文件夹位于您网站的根目录中。

【讨论】：