AngularJS beginner: ng-controller not working

2019-02-22 06:28发布

站内文章 / 移动开发
31 0 0

问题:

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.

回答1:

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
});


回答2:

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


回答3:

Add the controller to the angular application module

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



标签： angularjs model-view-controller ng-controller
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~