我使用AngularJS + happi .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
有几个地方需要修复。
首先要让hapi服务器的应用程序文件安装惰性。
npm install inert --save
在/app下的文件中添加并注册路由到server.js。这条路由应该先注册。
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!";
})
你的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中，你用方括号关闭了控制器;移除。在app config中，依赖项;如果在数组中传递，则函数将是数组的最后一项;
这可能是脚本标记中的关系src的问题。尝试将其更改为以下绝对路径:
<script src="/app/app.js"></script>
假设app文件夹在你网站的根目录