无法实例模块ngRoute [英] Failed to instantiate module ngRoute

查看：177
本文介绍了无法实例模块ngRoute的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

为什么我有这样的错误？
这是我的错误：
 无法实例化模块ngRoute

详细内容：

未捕获的错误：[$喷油器：modulerr]的http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=Rerp&p1=Error%3A%2…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.11%2Fangular.min.js%3A17%3A350)\"...

和

无法实例化模块TestApp由于：
错误：[$喷油器：modulerr] http://errors.angularjs.org/1.3.11/ $喷油器/ modulerr？P0 = ...）

和

无法实例化模块ngRoute由于：
错误：[$喷油器：NOMOD] http://errors.angularjs.org/1.3.11/ $喷油器/ NOMOD？P0 = NGR ......

HTML 

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENNG-应用=TestApp＆GT;
＆LT; HEAD＆GT;
  ＆LT;间的charset =UTF-8＆GT;
  ＆LT; META HTTP-EQUIV =X-UA-Compatible的内容=IE =边缘＆GT;
  ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1，最大规模= 1，用户可扩展性=无＆GT;
  ＆LT;标题＆GT;测试与LT; /标题＆GT;  ＆所述;！ -  JQUERY  - ＆GT;
  ＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js＆GT;＆下; /脚本＆GT;  ＆LT;！ - 自举 - ＆GT;
  ＆LT;链接rel =stylesheet属性HREF =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css/＆GT;
  ＆所述; SCRIPT SRC =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js＆GT; ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;    ＆LT;机身NG控制器=MainCtrl＆GT;
      ＆LT; D​​IV CLASS =主＆GT;
        ＆LT; D​​IV CLASS =容器NG-视图=＆GT;
      ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT; ＆LT;！ - 精主 - ＆GT; ＆LT;！ -  ANGULAR  - ＆GT;
 ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js\"></script>
 ＆LT;脚本SCR =// ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.js\"></script>
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;

APP.JS：

  VAR TestApp = angular.module（'TestApp'，['ngRoute']）;
无功配置= {
  appPartialPath：/部分/
  appApiEntryPoint：/ API /
 }; TestApp.config（['$ routeProvider'，函数（$ routeProvider）{
    $ routeProvider
            。当（'/模量'，{
                templateUrl：configuration.appPartialPath +'moduli.html'，
                控制器：'ModuliCtrl
            }）            。除此以外（{
                redirectTo：'/'，
                控制器：'MainCtrl
            }）;
}]）; / *控制器主要形式* /
 TestApp.controller（'MainCtrl'，函数（$范围）{
    的console.log（APP已启动）;
 }）;


解决方案

我固定您的问题，如果你仍然需要它：

app.js：

  VAR testApp = angular.module（'testApp'，['ngRoute']）;
无功配置= {
  appPartialPath：/部分/
  appApiEntryPoint：/ API /
 }; testApp.config（函数（$ routeProvider，$ locationProvider）{
    $ routeProvider
      。什么时候（'/'， {
        templateUrl：意见/ main.html中，
        控制器：'MainCtrl
      }）;
 }）; / *控制器主要形式* /
 testApp.controller（'MainCtrl'，函数（$范围）{
    的console.log（APP已启动）;
 }）;

和index.html：

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;  ＆LT; HEAD＆GT;
    ＆LT;间的charset =UTF-8/＆GT;
    ＆LT;间内容=IE =边缘HTTP的当量=X-UA-Compatible的/＆GT;
    ＆LT;元CONTENT =WIDTH =设备宽度，初始规模= 1，最大规模= 1，用户可扩展=没有NAME =视口/＆GT;
    ＆LT;标题＆GT;测试与LT; /标题＆GT;
    ＆所述;！ -  JQUERY  - ＆GT;
    ＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/1.3.11/angular.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/1.3.11/angular-route.js＆GT;＆LT; / SCRIPT＆GT;
    ＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js＆GT;＆下; /脚本＆GT;
    ＆LT;！ - 自举 - ＆GT;
    ＆LT;链接HREF =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css的rel =stylesheet属性/＆GT;
    ＆所述; SCRIPT SRC =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js＆GT;＆下; /脚本＆GT;
  ＆LT; /头＆GT;  ＆LT;机身NG-应用=testApp＆GT;
    ＆LT; D​​IV CLASS =主＆GT;
      ＆LT; D​​IV NG-视图=级=容器＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;！ - 精主 - ＆GT;
    ＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
  ＆LT; /身体GT;＆LT; / HTML＆GT;

问题是，你需要在你的头上，而不是你的身体得到两个脚本执行前角，使他们被加载。
此外，我固定的$ routeprovider，所以你Mainctrl被正确调用。

这里是一个Plunkr我提出来显示结果。

why i have this error? this is my error: "Failed to instantiate module ngRoute"

Details:

"Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=Rerp&p1=Error%3A%2…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.11%2Fangular.min.js%3A17%3A350)"...

and

"Failed to instantiate module TestApp due to: Error: [$injector:modulerr] http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=...)"

and

"Failed to instantiate module ngRoute due to: Error: [$injector:nomod] http://errors.angularjs.org/1.3.11/$injector/nomod?p0=ngR..."

HTML:

<!DOCTYPE html>
<html lang="en" ng-app="TestApp">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Test</title>

  <!-- JQUERY -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>        

  <!-- BOOTSTRAP  -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js">     </script>
</head>

    <body ng-controller="MainCtrl">
      <div class="main">
        <div class="container" ng-view="">
      </div>     
  </div>  <!-- fine main -->

 <!-- ANGULAR -->
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
 <script scr="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.js"></script>
<script src="app.js"></script>  
</body>

</html>

APP.JS:

var TestApp = angular.module('TestApp', ['ngRoute']);
var configuration = {
  appPartialPath: "/partial/",
  appApiEntryPoint: "/api/"
 };

 TestApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
            .when('/moduli', {
                templateUrl: configuration.appPartialPath + 'moduli.html',
                controller: 'ModuliCtrl'
            })

            .otherwise({
                redirectTo: '/',
                controller: 'MainCtrl'
            });
}]);

 /* CONTROLLER MAIN FORM */
 TestApp.controller('MainCtrl', function ($scope) {
    console.log("APP STARTED");
 });

解决方案

I fixed your issue, if you still need it:

app.js:

var testApp = angular.module('testApp', ['ngRoute']);
var configuration = {
  appPartialPath: "/partial/",
  appApiEntryPoint: "/api/"
 };

 testApp.config(function ($routeProvider,$locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      });
 });

 /* CONTROLLER MAIN FORM */
 testApp.controller('MainCtrl', function ($scope) {
    console.log("APP STARTED");
 });

and index.html:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
    <title>Test</title>
    <!-- JQUERY -->
    <script src="https://code.angularjs.org/1.3.11/angular.js"></script>
    <script src="https://code.angularjs.org/1.3.11/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- BOOTSTRAP  -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </head>

  <body ng-app="testApp">
    <div class="main">
      <div ng-view="" class="container"></div>
    </div>
    <!-- fine main -->
    <script src="app.js"></script>
  </body>

</html>

The problem was, that you need to get both scripts in your head instead of your body so they are loaded before angular is executed. Additionally I fixed your $routeprovider, so you Mainctrl gets called correctly.

Here is a Plunkr I made to show the result.

这篇关于无法实例模块ngRoute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆