我正在尝试将AngularJS与Node一起使用，因为我需要使用Express进行预渲染。我的Angular网站通过Angluar脚本等工作，并且是Node的新手。我已经将Angular作为依赖项包含在Node中。我将路由代码从我的app.js文件移植到server.js中，但收到一条错误消息，指出“未定义角度”。简而言之，我如何设置Angular与Node一起使用。我猜想它不会加载具有脚本的index.html文件，并且需要以其他方式（例如依赖项）将其包含在内。
在移植app.js代码后，这是我的server.js：
var pfcModule = angular.module('pfcModule', [
'ngRoute',
'ui.bootstrap',
'auth0',
'angular-storage',
'angular-jwt',
'angularUtils.directives.dirPagination',
'pfcServices',
'pfcAddArticle',
'pfcArticleID',
'pfcArticlesCategory',
'pfcArticlesCount',
'pfcArticleVoting',
'pfcHomeArticles',
'pfcLoginManagement',
'pfcModalDependency',
'pfcDirectives']);
pfcModule.config([
'$routeProvider',
'authProvider',
'$httpProvider',
'$locationProvider',
'jwtInterceptorProvider',
'paginationTemplateProvider',
function ($routeProvider, authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider, paginationTemplateProvider) {
$routeProvider.
when('/home', { templateUrl: '/views/home.html', controller: 'pfcHomeArticlesCtrl' }).
when('/categories/:articlecategoryID/:articlecategoryName', { templateUrl: '/views/categories.html', controller: 'pfcArticlesCategoryCtrl' }).
when('/article/:articleTitle/:articleID', { templateUrl: '/views/article.html', controller: 'pfcArticleIDCtrl' }).
when('/add-article', { templateUrl: '/views/add-article.html', controller: 'pfcArticlePostCtrl', requiresLogin: true }).
when('/login', { templateUrl: '/views/login.html', controller: 'loginPageCtrl' }).
otherwise({ redirectTo: '/home' });
$httpProvider.defaults.headers.common['X-ZUMO-APPLICATION'] = '1111111';
$httpProvider.defaults.headers.common['Content-Type'] = 'Application/json';
authProvider.init({
domain: 'passthru.auth0.com',
clientID: '1111111111111',
callbackURL: location.href,
loginUrl: '/login'
});
$locationProvider
.html5Mode(true);
jwtInterceptorProvider.tokenGetter = function (store) {
return store.get('token');
}
$httpProvider.interceptors.push('jwtInterceptor');
// Pagination provider
paginationTemplateProvider.setPath('js/libs/dirPagination.tpl.html');
}])
.run(function ($rootScope, auth, store, jwtHelper, $location) {
$rootScope.$on('$locationChangeStart', function () {
if (!auth.isAuthenticated) {
var token = store.get('token');
if (token) {
if (!jwtHelper.isTokenExpired(token)) {
auth.authenticate(store.get('profile'), token);
} else {
$location.path('/login');
}
}
}
});
});
这是我的index.html文件中的脚本：
<!-- Using Async and Defer for script execution -->
<script src="js/libs/angular.min.js" defer></script>
<script src="js/libs/ui-bootstrap-tpls-0.12.0.min.js" defer></script>
<script src="js/libs/angular-route.min.js" defer></script>
<script src="js/libs/angular-resource.min.js" defer></script>
<script src="js/libs/dirPagination.js" defer></script>
<!-- Auth0 Scripts -->
<!-- We use client cookies to save the user credentials -->
<script src="//code.angularjs.org/1.2.16/angular-cookies.min.js" defer></script>
<!-- Auth0 Lock script and AngularJS module -->
<script src="//cdn.auth0.com/js/lock-6.js" defer></script>
<!-- angular-jwt and angular-storage -->
<script type="text/javascript" src="//rawgit.com/auth0/angular-storage/master/dist/angular-storage.js" defer></script>
<script type="text/javascript" src="//rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js" defer></script>
<!-- Auth0 Scripts -->
<script src="//cdn.auth0.com/w2/auth0-angular-4.0.1.js" defer> </script>
<!-- Application Scripts -->
<script src="js/services/services.js" defer></script>
<script src="js/controllers/addArticle.js" defer></script>
<script src="js/controllers/articleID.js" defer></script>
<script src="js/controllers/articlesCategory.js" defer></script>
<script src="js/controllers/articlesCount.js" defer></script>
<script src="js/controllers/articleVoting.js" defer></script>
<script src="js/controllers/homeArticles.js" defer></script>
<script src="js/controllers/loginManagement.js" defer></script>
<script src="js/controllers/modalDependency.js" defer></script>
<script src="js/directives/directives.js" defer></script>
<script src="server.js" defer></script>
您在这里对Angular和Node之间的交互有误解。Angular只是一个部署到浏览器的JavaScript文件，它不会直接与Node或Express交互。
使用Node，您很可能在server.js中有以下内容：
var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('index.html', { root: __dirname });
});
app.listen(3006); //the port you want to use
这将配置Express引擎服务在不同的目录，静态资源的文件，并允许它以服务index.html为产品，不能使用静态文件或不明确定义的任何路线app.get，app.post等等。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句