My Angular Application Script Doesn't Execute

Question

The following page is based on the sample Angular page which is generated by Visual Studio for a new Angular web application:

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

The button counter works so that pretty much confirms that Angular support is present.

I've added some additional angular code into that page. Beginning with the div tag is some sample code which I'm basing on the tutorial which I find here: https://www.w3schools.com/angular/angular_sql.asp. This will be my first foray into fetching data from the backend SQL Server and displaying it on a web page using Angular.

I've set a breakpoint inside of my controller: https://localhost:44319/api/Portfolio

If I hit that URL manually in a browser window, the breakpoint is hit as expected. But when I load the page, I get no breakpoint. So the script is not being run, but I cannot understand why not.

Can you help me with this? Thank you!

Hmm - someone changed my tag from angular to angularjs. This might be the crux of my problem. I am trying to use angular - I am using Visual Studio 2019 and I've selected Angular as the type of my web application. Is the code which I have inserted into this page actually the older AngularJS which is not compatible with the newer version of angular? — Yossi G., Nov 05 '19 at 06:15
Your full code is of angularjs. But you have use click event syntax of angular. It will not work. — Saima Haji, Nov 05 '19 at 06:46

score 0 · Answer 1 · answered Nov 05 '19 at 05:18

0

move your api call to some function and call that function like

var init=function(){

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

init();

Also there is nothing like (click) in angularjs it should be ng-click

Related SO

answered Nov 05 '19 at 05:18

jitender

10,238
1
18
44

I am trying to use Angular not AngularJS. – Yossi G. Nov 05 '19 at 06:16
@YossiGeretz then please reefer to [docs](https://angular.io/) bcs in your code it's totally angularjs – jitender Nov 05 '19 at 06:34

score 0 · Accepted Answer · answered Nov 06 '19 at 01:22

Thank you all for clarifying the point. My example fails because I have been conflating Angular with AngularJS. My project, produced by Visual Studio 2019 is Angular NOT AngularJS. But the sample I pulled off the web is AngularJS - of course it's not going to work.

For anyone who might be in the same predicament, here is some code which you can use to augment the auto-magically generated sample pages with some of your own code to get a feel for how Angular is constructed.

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

It works! Every journey begins with its first step. Thanks for all your help!

My Angular Application Script Doesn't Execute

2 Answers2