Angular – Step 0

AngularJS to Angular-

– After ‘AngularJS’ (version 1.xx), it was renamed to ‘Angular’ (version 2.xx to current version). Because in Angular we use typescript(ts) instead of javascript (js).  so these statements are true.

1- AngularJS 2.XX does not exist, AngularJS 1.xx does.

2- Angular 1.XX does not exist, Angular 2.XX does.

3TypeScript extends JavaScript with extra functionality or TypeScript is the superset of javaScript. 

Now, let’s see what are differences between Angular vs AngularJS.

[AngularJS]                                                                                [Angular]

1- Javascript (.js files)                                             1- Typescript(.ts files)

2- MVC based                                                           2- Components based

3- <tr ng-repeat=“student in studentsArray”>  3- <tr *ngFor=”let student in studentArray”>

4-<button ng-click=“vm.toggleImage()”>            4- <button (click) ==“vm.toggleImage()”>

5- ng-show, ng-hide                                                 5- [hidden]

6- ng-if                                                                        6- *ngIf

7-ng-model                                                                7- ngModel

AngularJs -Angular Timeline :

1– October 20, 2010 AngularJS
2– 22 September 2014 Angular 2
3– Angular 3 (skipped)
4– 13 December 2016 Angular 4
5– 1 November 2017 Angular 5
6– 3 May 2018 Angular 6
7– October 2018 Angular 7
8– May 2019 Angular 8
9– October/November 2019 Angular 9

Recent posts:

Angular – Step 7 : Ng- template

Concept – To use if and else within our templates. Example – <div><ng-template [ngIf]=”counter > 4″ [ngIfElse]=”none”> <p>The click counter <strong>IS GREATER</strong> than 4.</p></ng-template> <ng-template #none><p>The click counter is <strong>not greater</strong> than 4.</p> </ng-template> </div> Step 1- Use property binding [ngIf] and bind it to expression counter > 4. Step 2- If that expression is true, it will show the […]

Angular – Step 6- Two way data binding

Step 0 – Set and retrieve the data to and from the component/template! Step 1- In home.component.html add the following code: Step 2- Import it into our /src/app/app.module.ts: Step 3- Define the name property in the home.component.ts file: Done !

Angular – Step 5 – One way data binding

Step 1- Concept- When you want to communicate data from the component logic to the template (or vice versa), this is called one-way data binding. Step 2- Open up the /src/app/home/home.component.html file and replace it with the following: We have a few things happening here: (click) – This is a click event {{ myClickCounter }} this will display data that’s retrieved from the […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.