javascript - AngularJS-错误 : Uncaught Error: [$injector:modulerr] http://

标签 javascript angularjs dependency-injection

我是 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('/');
    })
;

侧边栏.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”。这真是令人沮丧!

最佳答案

您需要包含 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>

缩小时还用字符串数组注入(inject)依赖项。请参阅a note on minification来自 AngularJS 文档。

这是注入(inject) 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('/');
  }

})();

关于javascript - AngularJS-错误 : Uncaught Error: [$injector:modulerr] http://，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43400820/

上一篇：javascript - 如何将数据传递到 Angular Material 中的 $mdDialog

下一篇：javascript - 使用来自 Threejs 的 Canvas 定位 div

相关文章：

javascript - 我可以定义跨多个页面使用的 JavaScript 全局变量吗？

javascript - 使用额外的变量在过滤器 JavaScript 中进行排序

javascript - 在 UI 路由器状态更改时更新父范围

android - 依赖注入(inject)提供 Activity

c# - 如何将 Autofac 链接到单元测试

javascript - ReactJS 无法读取未定义的属性 setState

javascript - 使用 javascript 更改 nav/div 的内容

javascript - 每次加载单页应用程序时检索 cookie

javascript - 带有 require 的父指令 Controller 上的 Angular 监视

java - 为什么我注入(inject)相同的bean，但实际上注入(inject)了不同的类？

©2024 IT工具网  联系我们