Question

我仍然处于angularjs的学习模式，只有2天。我试图制作模块，所以我为它创建了单独的js文件并创建了如下所示的模块。还添加了控制器。

var app = angular.module("githubViewer", []);
app.controller("MainCtrl", MainCtrl);

但是当我跑步时我得到错误'MainCtrl' is not a function, got undefined

这里是Plunker

有人可以帮助我吗？

Answer 1

在查看plunker之后，我想您想在控制器的单独文件中创建一个单独的模块，并将其添加到主模块中。

对于单独文件中控制器的创建模块，

angular.module("githubViewer", [])
.controller('MainCtrl', function($scope,$http) {
//your logic
});

然后将其添加到main作为主模块中的依赖项

angular.module('plunker', ['githubViewer']);

这是工作演示：http://plnkr.co/edit/T9p7Uo2DxUVjqS1wuuiA?p=preview

Answer 2

好的，你是角色的新手，所以这里有一些规则，你必须遵循这些规则，直到你证明你需要做其他事情。

您可以将模块的定义放在单独的文件中。简而言之，这通常是一种矫枉过正，但这应该是你应该在真实世界大小的应用程序中做的事情。请注意，我这里只讨论模块。不是谈论控制器，工厂和其他东西。
将控制器的主体与其包含在一起分成角度不会带来任何好处。不要这样做。

那就是说，你的文件应该是这样的：

# my_app.module.js
angular.module('myApp', []);

# main.controller.js
var app = angular.module('myApp')
app.controller('MainCtrl', MainCtrl);

function MainCtrl() {
  // logic here
}

Answer 3

我检查了您的Plunker。

这里是Working Plunker，因为你想要单独的js文件中的控制器逻辑和单独文件中的模块

<强> app.js

function MainCtrl($scope,$http) {
    var person = {
        firstName: "Kiran",
        lastName: "Nandedkar"
    };
    $scope.name = 'World';

    var onUserComplete = function(response){
        $scope.user = response.data;
    }

    var onError = function(reason){
       $scope.error = "dfdfdf"  ;
    }

    $http.get("https://api.github.com/users/odetocode")
      .then(onUserComplete,onError);

    $scope.person = person;
};

<强> module.js

var app = angular.module("githubViewer", []);
app.controller("MainCtrl", MainCtrl);

<强>的index.html

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

    <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
        <script src="app.js"></script>
        <script src="module.js"></script>
  </head>

  <body ng-controller="MainCtrl">
      <p>Hello {{person.firstName}}!</p>
      <div>Login : {{user.login}}</div>
 </body>

添加模块不工作

3 个答案: