angularjs - AngularJS 初心者: ng-controller が機能しない

Question

私は AngularJS の基本を理解しようとしています。簡単な MVC アプリを書いてみたのですが、コントローラーが動かないようです。このファイルは、見つかったAngular 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>

また、1 つの文字列エントリが 2 行に分割されていたため、'employees' 配列が不正であることが判明しました。上記の作品。私が使用している初心者向けの本は古いに違いなく、残念です。

score 2 · Accepted Answer

angularjs アプリをどのように初期化しているのかわかりません。リンクした js ファイルに既に含まれているかどうかはわかりませんが、原則として、次のようなものが必要です。

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

次に、HTML コードに次のようなものを含めます。

<html ng-app="appName">

score -1 · Accepted Answer

コントローラーを angular アプリケーションモジュールに追加します。

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

angularjs - AngularJS 初心者: ng-controller が機能しない

3 に答える 3

Related

Reference