Question

新手AngularJS在这里。

我在下面有一个index.html文件，它引用了一个名为app.js的Javascript文件。 index.html文件如下：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="controller1.js"></script>
  </head>

  <body>
    <h1>Github Viewers</h1>
    <div ng-view></div>
  </body>

</html>

在我的app.js文件中，我有以下代码：

(function(){
  var app = angular.module("myApp", ["ngRoute"]);

  app.config(function($routeProvider){
    $routeProvider
      .when("/main", {
        templateUrl: "main.html",
        controller: "controller1"
      })
      .otherwise({redirectTo: "/main"});
  });
}());

我在行上设置了断点（在Chrome开发工具中）：

templateUrl: "main.html",

但我无法进入这条线。

控制台窗口显示没有错误，所以我有点难过。

欣赏有关在何处进一步了解的任何见解。

Answer 1

您使用的是错误的应用名称。

将<html ng-app="myApp">更改为<html ng-app="githubViewer">

修改

您不能在该行（templateUrl: "main.html"）中放置断点。请注意，对象定义而不是函数：

{
  templateUrl: "main.html",
  controller: "controller1"
}

和所有对象一样，它们是在原子操作中定义的。如果它的所有属性都是立刻创建的，那意味着你不能打破＆＃34;打破＆＃34;特定财产的执行。

我已经使用 Chrome开发工具进行了测试，它甚至不允许我在该行中设置断点。不知道你是怎么做到的......

如果您想检查是否正在加载"main.html"模板，请观看 Chrome开发工具的网络标签。

Answer 2

我认为您的依赖注入缺少controller1模块.. 如果您管理不同模块中的控制器，则必须将其注入app.js

 //controller1.js
    angular.module('controllers',[])
     .controller('controller1',function(....)

    //app.js
    var app = angular.module("myApp", ["controllers","ngRoute"]);
     ...

//index.html
    ...
     <script src="controller1.js"></script>  
     <script src="app.js"></script> 
    ...

AngularJS中的路由功能不会被执行

2 个答案:

修改