Fatal编程技术网
  • javascript/
  • Javascript 角度布线不'；不适用于具有相同模块名称的控制器

Javascript 角度布线不'；不适用于具有相同模块名称的控制器

javascript angularjs

Javascript 角度布线不'；不适用于具有相同模块名称的控制器,javascript,angularjs,angular-routing,Javascript,Angularjs,Angular Routing,这是一个简单的angular应用程序，它的代码中似乎有一个愚蠢的错误，我不太能够理解它。 问题在于路由。单击链接不会将我带到指定的模板url，而是重新加载相同的index.html页面 但是，地址栏中的链接更改为： 单击相应的链接 index.html <!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <title>My

这是一个简单的angular应用程序，它的代码中似乎有一个愚蠢的错误，我不太能够理解它。 问题在于路由。单击链接不会将我带到指定的模板url，而是重新加载相同的index.html页面

但是，地址栏中的链接更改为：

单击相应的链接

index.html

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/style.css"/>

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers/myStats.js"></script>
  <script src="js/controllers/mySports.js"></script>

</head>
<body>
  <div class="container">
    <a ng-href="#/stats">My Stats</a>
    <a ng-href="#/sports">My Sports</a>
  </div>
  <div ng-view></div>
</body>
</html>
我希望我的目录结构没有问题：

编辑：

angular.module('myApp', [])

angular.module('myApp',['ngRoute'])
为控制器共享代码，问题在于控制器。它必须与具有相同名称的角度模块有关，尽管这是我学习的方式

js/controllers/mySports.js

angular.module('myApp',[])
    .controller('mySports',['$scope', function($scope){
        console.log('just checking');

    }]);
什么有效： 将mySports.js中的模块名称从myApp更改为mySports，然后将mySports作为依赖项注入app.js

已将app.js更新为：

'use strict';
    angular.module('myApp', ['ngRoute','mySports'])
    .config(['$routeProvider', function($routeProvider){
      $routeProvider
          .when('/stats', {
            templateUrl: 'partials/stats.html'
          })
          .when('/sports', {
            templateUrl: 'partials/sports.html'
            controller: mySports,
          })
    }]);
编辑

仍然存在的问题是，为什么要更改控制器的模块名称，然后作为依赖项注入到app.js？为什么没有相同的模块名？

您需要将ngRoute作为依赖项注入应用程序

改变

发件人：

angular.module('myApp', [])

angular.module('myApp',['ngRoute'])
至：

angular.module('myApp', [])

angular.module('myApp',['ngRoute'])
以下是工作指南

检查相关链接。URL中的
应用程序
需要声明为基本，如下所示：

<head>
  <base href="/app/">
</head>
在HTML脚本中，尝试添加min.js文件，而不是仅添加.js文件，这是一个示例：

<script src="bower_components/angular-route/angular-route.min.js"></script>
该文件夹中应该有一个min.js，和！非常重要，不要先添加路由文件，这可能是一个很好的添加：

<script src="bower_components/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/myStats.js"></script>
<script src="js/controllers/mySports.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
我觉得它很好。 我这里有一个工作示例 你可以考虑几张支票

  • 文件权限。应该是（755）
  • 这条路。将文件放在
    partials
    文件夹之外，然后重试
    • 祝您好运

    对于更新的问题，要在任何地方使用相同的模块，您可以按如下方式定义模块：

    var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
 $routeProvider
  .when('/stats', {
    templateUrl: 'partials/stats.html'
  })
  .when('/sports', {
    templateUrl: 'partials/sports.html'
  })
}]);
    以及您的控制器：

    app.controller('mySports',['$scope', function($scope){
    console.log('just checking');

}]);
    作品：

    问题是，当您在此处定义“mySports”控制器时，您正在重新定义主模块：

    angular.module('myApp',[]).controller('mySports',[...
    有一个“，[]”和，它覆盖了先前注入的
    ngRoute
    。取而代之

    angular.module('myApp').controller('mySports',[...
    如果没有
    ，[]
    部分，那么它应该可以工作

    这也是将myport注入myApp有效的原因，因为在这种情况下，myApp的injections数组不会被覆盖。

    哦，很抱歉。ngRoute以前就在那里，我把它拿出来做实验。现在编辑了这个问题，它仍然不起作用。好像还有别的不对，就是这样！您的URL中的
    应用程序
    。我记得angular在非根索引页上有问题。@Toxantron-我不明白。您是否希望我以某种方式删除应用程序目录，并从“”而不是“”启动应用程序？@Sajeetharan-您的作品。我按照您的方式更改了代码，删除了目录结构，使所有内容都位于同一目录级别，并在主app.js文件中包含了控制器，而不是将它们单独存在。它根本没有做任何改变。我认为依赖项有问题，或者可能是其他问题，但不是routing@kamal0808为您的问题创建一个plunker可能是this
    ng href=“#”/
    到this
    ng href=“/#
    ？@litestone-这会将页面重新加载到@ddepablo的索引中-这会将我带到一个只显示“未找到”的页面。在Dev工具的Networks选项卡中查看时，它给出了一个404提示，这在我的机器上运行良好。不知道是什么问题。请尝试从根目录运行
    http服务器
    ，并查看问题日志是否确实可以在
    上定义
    ng app=“myApp”
    。除了在
    上声明的
    ng-app
    指令之外，我的代码几乎相同。我尝试了一下。不做任何改变。此外，单击链接时，地址栏会更改URL并在“”之后包含“/app”。我认为它足够聪明，可以自行检查项目是否位于AppDirectory中，但这不是它应该位于的位置吗？据我所知，你的应用程序托管在yes，我的应用程序托管在“localhost:8000/app”。这似乎是一个非常糟糕的主意，它会说app.jstrue中找不到angular my fail，请立即检查它，但重要的是min.jsI不知道缩小的文件会如何改变应用程序的行为。但是，我找到了一个解决方案，请参见问题更新。但是这个解决方案仍然没有回答原来的问题，看看你是否能帮上忙文件权限是755。在partials文件夹之外进行操作对我来说没有意义，因为这意味着存在部分视图。我想把它们放在partials文件夹里。要我更改某个位置指定的路径吗？控制台没有错误。请检查问题更新是否有效。但是控制器如何访问变量“app”，而不首先在自己的js文件中定义它们呢？其次，我研究了在变量中声明模块，然后重用变量是一种不好的做法。为什么不在每次定义控制器时都定义模块呢？它只是存储主角度模块的变量，上面代码中的
    app
    ，被全局存储，您可以在任何地方访问它。尝试console.log（应用程序）并签入firebug.com。因此，我假设js文件中声明的任何变量都是全局变量。无论如何，它也可以在没有变量的情况下工作。检查我选择的最佳答案。正确的解释，这是有效的。删除“[]”完全有意义，因为它覆盖了主依赖项数组。