AngularJS beginner: ng-controller not working

2019-02-22 06:38发布

站内问答 / 前沿技术
1163 3 4

I'm just trying to get my head around the basics of AngularJS. I tried writing a simple MVC app, but the controller doesn't seem to be working. The file can find the angular lib just find, I already tested that by excluding '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>

EDIT: The error log says the following:

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: I changed the code to this:

<!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>

It also turned out that the 'employees' array that I had was illegal since I had one string entry split into two lines. The above works. The beginner book I am using must be outdated, which is unfortunate.

3条回答
放荡不羁爱自由
2楼-- · 2019-02-22 07:02

If you're using angularjs 1.3+ versions then you can not declare global controller like above you're doing.

You should initialize like below.

<div ng-app="appname" ng-controller="MyFirstCtrl">
var app = angular.module('appname', []);
app.controller('MyFirstCtrl',function(){
   //controller code here
});
查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
3楼-- · 2019-02-22 07:22

Add the controller to the angular application module

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

image

查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
4楼-- · 2019-02-22 07:25

I don't see how you are initialising the angularjs app, don't know if that is already included in the js file you have linked, but in principle, you should have something like this:

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

And then have in your HTML code something like:

<html ng-app="appName">
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)