Angular 生成的项目，无响应的控制器

Question

很抱歉这个宽泛的问题，但我很难确定我的问题。我使用 "ng new" 命令生成一个新的 angular 项目，但是当我尝试在项目中使用控制器时，它们仍然没有响应。为了确保它不是我的代码，它从以下代码块中获取了代码块：https://www.w3schools.com/angular/angular_events.asp（ng-click 指令示例 2）也可以在下面看到：

当运行此代码在单个 index.html 文件中时，angular 控制器会响应并且点击时屏幕上的计数会发生变化。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <button ng-click="myFunction()">Click me!</button>
        <p>{{ count }}</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.count = 0;
            $scope.myFunction = function () {
                $scope.count++;
            }
        });
    </script>
</body>
</html>

但是在我的应用程序中插入代码时，格式基本相同但没有 "DOCTYPE"、"html" 和 "script src=..." 标记（如下所示），应用程序变得无响应。

<div ng-app="myApp" ng-controller="myCtrl">

    <button ng-click="myFunction()">Click me!</button>
    <p>COUNT:</p>
    <p>{{ count }}</p> 
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.count = 0;
        $scope.myFunction = function () {
            $scope.count++;
        }
    });
</script>

我不确定还有哪些其他文件可以解决这个问题，但请写信，我会提供它们，但目前我没有制作其他控制器，以及上面提到的 .html 文件在 app.component.html

的子组件中

Answer 1

首先，当前的 angular 将不支持 ng-click，并且都不会引用 w3schools 这是一个过时的教程，我建议您使用 https://angular.io/ ( angular的官方文档）

解决你的问题 angular 2+ 有不同的语法没有控制器所以它不会工作

您的 app.component.html 应该是：

<div>
    <button (click)="myFunction()">Click me!</button>
    <p>{{ count }}</p>
</div>

你的app.component.ts

export class AppComponent {

    public count    :    number    =    0;

    constructor() {}

    public myFunction() {
        this.count  =    this.count + 1;
    }
}

Answer 2

ng new 命令不生成 angularjs 应用程序。它生成 Angular App，这是非常不同的：

Angular 是用 Typescript 写的（大部分时间），因为 Angular 是用 Javascript 写的（大部分时间）
Angular 正在积极开发中（撰写本文时为第 9 版），Angularjs 在 2021 年 6 月 30 日之前提供长期支持。
Angular 利用大部分新的浏览器功能，因为 AngularJs 存在旧的兼容性问题。
还有很多东西，

在您的情况下，您正在学习 angularjs 教程。这不适用于您的上下文。

您仍然可以使用angularjs，但建议迁移到Angular。如果您仍然希望创建一个 angularJS 应用程序，您可以毫无问题地按照该教程进行操作。但是，您无法使用 ng new.

创建新应用

但是，如果您正在寻找 Angular 教程，我建议您查看他们的 Hero tutorial，它制作精良且易于理解。

Angular 生成的项目，无响应的控制器

Angular generated project, unresponsive controller

angularjs

angularjs-controller

angular