angular - @angular/common，不带NPM

Question

我试图在我的代码中使用ng-template指令，以便能够在按钮单击事件后显示div，但我无法让它工作，因为我需要使用angular/common库。我尝试通过添加脚本标记来引用它

<script src="https://cdn.jsdelivr.net/npm/@angular/common@11.0.2/bundles/common.umd.min.js" integrity="sha256-+HBVhNZwWCgkN0Z0tvWyjqjm+yI9F/szNt3Yz4/0/ws=" crossorigin="anonymous"></script>

但每次我测试我的应用程序时，控制台中都会出现以下错误。

common.umd.min.js:35 Uncaught TypeError: Cannot read property 'InjectionToken' of undefined

我被卡住了，不知道如何才能使用ng-template指令

HTML (index.html)：

<ng-template>
    <div class="container">
        <h2>Edit or Delete an Evangelist</h2>
        <form name="userEditForm">
            <p>person id:     <input type="text" id="name" ng-model="userEdit.personid" disabled /></p>
            <p>name:     <input type="text" id="name" ng-model="userEdit.name" /></p>
            <p>location: <input type="text" id="location" ng-model="userEdit.location" /></p>
            <button id="btn-edit-evangelist" class="btn btn-primary" ng-click="editName(userEdit)">Save</button>
            <button id="btn-canceledit-evangelist" class="btn btn-default btn" ng-click="delName(userEdit);">Delete User</button>
        </form>
    </div>
    <div *ngIf="isEdit">
    </div>
</ng-template>

Angular (main-app.js)：

"use strict";

angular.module('MainApp', [
])


.controller("MainController", function ($scope, $http) {

    //initialize scope variables
    $scope.user = {
        name: function (theName) {
            if (angular.isDefined(theName)) {
                $scope._name = theName;
            }
            return $scope._name;
        }(),
        location: function (theLocation) {
            if (angular.isDefined(theLocation)) {
                $scope._location = theLocation;
            }
            return $scope._location;
        }()
    };


    function redirectToEdit(user) {
        this.isEdit = !this.isEdit;

        var id = user.personid;

        $http.get('https://webapimongodb.herokuapp.com/api/name/' + id, {
            params: { personid: user.personid, name: user.name, location: user.location },
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        })
            .success(function (res) {
                console.log(res);
                $scope.userEdit.personid = res.personid;
                $scope.userEdit.name = res.Name;
                $scope.userEdit.location = res.Location;
            });

    }


})

是否可以通过脚本标记引用@angular/common模块，或者是否需要通过NPM引用它？

Answer 1

我认为这里的问题在于所使用的版本。

您提供的代码是用Angular.js代码编写的，而@angular/common是一个Angular模块

为了让你的代码正常工作，你需要这样做

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>

Here you can find the Angular.js docs，顺便说一句，它已被弃用。

以及Angular和Angular.js之间的this article explains the difference