Question

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

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

在控制器中，您已使用方括号关闭控制器;除去。在app config中，依赖项;如果在数组中传递，则函数将是数组的最后一项; config应该关闭数组，即方括号。

Answer 2

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

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

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

Answer 3

有一些位需要修复。

首先让服务器hapi到app文件安装惰性。

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中的角度脚本中删除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!";
})

AngularJS看不到脚本

的index.html

app.js

main.html中

server.js

3 个答案: