我的Angular应用程序脚本无法执行

Question

以下页面基于Visual Studio为新的Angular Web应用程序生成的示例Angular页面：

<h1>Member Module</h1>

<p>This is a simple example of an Angular component.</p>

<p aria-live="polite">Current count: <strong>{{ currentCount }}</strong></p>

<button class="btn btn-primary" (click)="incrementCounter()">Increment</button>

<div ng-app="myApp" ng-controller="myController">
  <table>
    <tr ng-repeat="x in portfolios">
      <td>{{ x }}</td>
    </tr>
  </table>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myController', function ($scope, $http) {
    $http.get("https://localhost:44319/api/Portfolio")
      .then(function (response) { $scope.portfolios = response.text(); });
  });
</script>

按钮计数器可以正常工作，因此几乎可以确认存在Angular支持。

我在该页面中添加了一些其他角度代码。以div标签开头的是一些示例代码，这些示例代码基于我在此处找到的教程：https://www.w3schools.com/angular/angular_sql.asp。这是我第一次尝试从后端SQL Server提取数据并使用Angular将其显示在网页上。

我已经在控制器内部设置了一个断点：https://localhost:44319/api/Portfolio

如果我在浏览器窗口中手动命中该URL，则会按预期命中断点。但是，当我加载页面时，没有断点。因此该脚本未在运行，但我不明白为什么不这样做。

您能帮我吗？谢谢！

Answer 1

将您的api调用移至某个函数，然后像调用该函数一样

var init=function(){

 $http.get("https://localhost:44319/api/Portfolio")
      .then(function (response) { $scope.portfolios = response.text(); });
}

init();

angularjs中也没有类似(click)的东西，应该是ng-click

Related SO

Answer 2

谢谢大家阐明这一点。我的示例失败，因为我一直在将Angular与AngularJS合并。我的由Visual Studio 2019制作的项目是Angular NOT AngularJS。但是我从网络上获取的示例是AngularJS-当然，它是行不通的。

对于可能处在同一困境中的任何人，下面是一些代码，您可以使用它们用自己的一些代码来扩充自动生成的示例页面，以了解Angular的构造方式。

member.component.html：

<h1>Member Module</h1>

<p>This is a simple example of an Angular component.</p>

<p aria-live="polite">Current count: <strong>{{ currentCount }}</strong></p>

<button class="btn btn-primary" (click)="incrementCounter()">Increment</button>
<hr />
<h1>{{title}}</h1>
<h2>My favorite hero is: {{heroes[currentCount]}}</h2>
<p>Heroes:</p>
<ul>
  <li *ngFor="let hero of heroes">
    {{ hero }}
  </li>
</ul>

member.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-member-component',
  templateUrl: './member.component.html'
})

export class MemberComponent {

  public currentCount = 0;

  public title = 'Tour of Heroes';
  public heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  public myHero = this.heroes[0];

    public incrementCounter() {

        if (this.currentCount < this.heroes.length -1) {
            this.currentCount++;
        }
        else {
            this.currentCount = 0;
        }
  }
}

有效！每个旅程都从第一步开始。感谢您的所有帮助！