我是AngularJS的新手，并且一直在小型网站上工作。目前，我只是将所有页面链接在一起，并与Gulp一起创建一个分发文件夹。分配创建没有问题，但我最终得到上述错误。这是我的代码
的index.html
<!DOCTYPE html>
<html lang="en" ng-app="arabicApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!--<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">-->
<!-- endbuild -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div ui-view="sidebar"></div>
<div ui-view="content"></div>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<!--<script src="https://code.angularjs.org/1.6.4/angular.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-route.js"></script>-->
<script src="scripts/app.js"></script>
<!--<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>-->
<!-- endbuild -->
</body>
</html>
app.js
'use strict';
angular.module('arabicApp', ['ui-router', 'ngResource'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url:'/',
views: {
'sidebar': {
templateUrl: 'views/sidebar.html',
},
'content': {
templateUrl : 'views/home.html',
//controller : 'IndexController'
}
}
})
.state('app.verbSelect', {
url: 'verbSelect',
views: {
'content@': {
templateUrl: 'views/VerbSelect.html',
//controller: 'verbsController'
}
}
})
.state('app.verbPractice', {
url: 'verbPractice',
views: {
'content@': {
templateUrl: 'views/verbPractice.html',
//controller: 'verbsController'
}
}
});
$urlRouterProvider.otherwise('/');
})
;
sidebar.html
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><a href="#">Lessons</a></li>
<li><a ui-sref="app.verbSelect">Verbs</a></li>
<li><a ui-sref="app">Nouns</a></li>
</ul>
</div>
这是我的gulpfile.js，如果这有帮助
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
browserSync = require('browser-sync'),
ngannotate = require('gulp-ng-annotate'),
del = require('del');
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function() {
return del(['dist']);
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('usemin', 'imagemin','copyfonts');
});
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/**/*.html')
.pipe(usemin({
css:[minifycss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'));
});
// Images
gulp.task('imagemin', function() {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('copyfonts', ['clean'], function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', ['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
有人可以解释一下我在这里缺少什么吗？显然，我没有包括我应该做的事情。任何帮助将不胜感激。
谢谢
编辑：这是错误
main-665edfe53c.js:1 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=arabicApp&p1=Error%…20(http%3A%2F%2Flocalhost%3A3000%2Fscripts%2Fmain-665edfe53c.js%3A1%3A8239)
at main-665edfe53c.js:1
at main-665edfe53c.js:1
at o (main-665edfe53c.js:1)
at u (main-665edfe53c.js:1)
at Bt (main-665edfe53c.js:1)
at i (main-665edfe53c.js:1)
at Q (main-665edfe53c.js:1)
at X (main-665edfe53c.js:1)
at main-665edfe53c.js:6
at HTMLDocument.n (main-665edfe53c.js:1)
编辑：这是我的bower.json文件。我认为这可能值得包括
{
"name": "class",
"description": "Arabic Class",
"main": "index.html",
"keywords": [
"Arabic",
"Class",
"Practice"
],
"authors": [
"Ba"
],
"license": "MIT",
"homepage": "",
"dependencies": {
"bootstrap": "^3.3.7",
"angular": "^1.6.4",
"angular-ui-router": "^0.4.2"
},
"devDependencies": {
"font-awesome": "^4.7.0",
"angular-resource": "^1.6.4",
"angular-route": "^1.6.4",
"angular": "^1.6.4",
"angular-ui-router": "^0.4.2"
}
}
编辑：错误是由于我在app.js文件中添加了依赖项“ui-router”。经过两天试图找到问题，我意识到我必须添加'ui.router'。那令人沮丧！
答案 0 :(得分：0)
您需要加入ngResource：
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js" type="text/javascript"></script>
或者，如果使用凉亭：
bower install angular-resource#1.6.4
然后添加到index.html：
<script src="../bower_components/angular-resource/angular-resource.js"></script>
在缩小时，还要使用字符串数组注入依赖项。请参阅AngularJS文档中的a note on minification。
以下是使用inject property annotation注入的配置：
// arabic-app.module.js
(function() {
'use strict';
angular.module('arabicApp', ['ui-router', 'ngResource']);
})();
// arabic-app.config.js
(function() {
'use strict';
angular.module('arabicApp').config(Config);
Config.$inject = ['$stateProvider', '$urlRouterProvider']
function Config($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/',
views: {
'sidebar': {
templateUrl: 'views/sidebar.html',
},
'content': {
templateUrl: 'views/home.html',
//controller : 'IndexController'
}
}
})
.state('app.verbSelect', {
url: 'verbSelect',
views: {
'content@': {
templateUrl: 'views/VerbSelect.html',
//controller: 'verbsController'
}
}
})
.state('app.verbPractice', {
url: 'verbPractice',
views: {
'content@': {
templateUrl: 'views/verbPractice.html',
//controller: 'verbsController'
}
}
});
$urlRouterProvider.otherwise('/');
}
})();