AngularJS初学者:ng-controller无法正常工作

时间:2015-07-10 16:50:19

标签: angularjs model-view-controller ng-controller

我只是试图了解AngularJS的基础知识。我尝试编写一个简单的MVC应用程序,但控制器似乎没有工作。该文件可以找到刚找到的有角度的lib,我已经通过排除&ng-controller控制器进行了测试。

<!DOCTYPE html>
<html ng-app>
<head>
    <script src='js/lib/angular.js'></script>
    <script>
        // controller
        function MyFirstCtrl($scope) {
            // model
            var employees = ['Christopher Grant', 'Monica Grant', 'Christopher
            Grant', 'Jennifer Grant'];

            $scope.ourEmployees = employees;
        }
    </script>
</head>
<body ng-controller='MyFirstCtrl'>
    <!-- view -->
    <h2>Number of employees: {{ourEmployees.length}}</h2>
</body>
</html>

编辑: 错误日志说明如下:

Uncaught SyntaxError: Unexpected token ILLEGAL , line 9
Uncaught SyntaxError: Unexpected token { , line 19
Error: [ng:areq] Argument 'MyFirstCtrl' is not a function, got undefined

EDIT2:我将代码更改为:

<!DOCTYPE html>
<html ng-app='MVCExample'>
<head>
    <script src='js/lib/angular.js'></script>
    <script>
        var app = angular.module('MVCExample', []);

        // controller
        app.controller("MyFirstCtrl", function($scope) {

            // model
            var employees = ['Christopher Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];

            $scope.ourEmployees = employees;
        });
    </script>
</head>
<body ng-controller='MyFirstCtrl'>
    <!-- view -->
    <h2>Number of employees: {{ourEmployees.length}}</h2>
</body>
</html>

事实证明,&#39;员工&#39;我拥有的数组是非法的,因为我有一个字符串条目分成两行。以上工作。我正在使用的初学者书必须过时,这是不幸的。

3 个答案:

答案 0 :(得分:11)

如果您正在使用angularjs 1.3+版本,那么您无法像上面那样声明全局控制器。

您应该如下初始化。

<div ng-app="appname" ng-controller="MyFirstCtrl">
var app = angular.module('appname', []);
app.controller('MyFirstCtrl',function(){
   //controller code here
});

答案 1 :(得分:2)

我不知道你是如何初始化angularjs应用程序的,不知道你是否已经包含在你链接的js文件中,但原则上你应该有这样的东西:

var app = angular.module("appName", []).controller("ControllerName", function ($scope){
  //your controller code here
});

然后在您的HTML代码中添加如下内容:

<html ng-app="appName">

答案 2 :(得分:-1)

将控制器添加到角度应用程序模块

.module('LogIn')
.controller('LoginController', LoginController)

image