Learning Angular JS – Part One

Why and how I learn AngularJS

Short answer: Ionic Applications and via udemy

Long answer: I would very much like to produce simple Ionic applications. I find that they may be very helpful at a lot of things I do. And if I continue to make them better based on my and others user experience, who knows, maybe a little commercial success may help funding other projects of mine.

Now programming languages aren’t that easy to learn. Not only do your learn a new way to say common expressions in new terms, you also learn new functionalities and rules. But after a while, especially after you learn (and understand) the basic similarities most programming languages need to have to produce functioning applications it gets easier. Now it feels more like learning an accent than an actual language. Huge.

Even still, you need a good teacher (or a good book) if you want to learn efficiently. Alternatively you may always read the documentation and progress through boredom.

Always since my Google Adwords course on udemy I grew quite fond of how udemy teachers transformed boring texts into quite good & fast-paced videos.

So I settled (based on the raving reviews) with the AngularJS udemy course by Maximilian Schwarzmüller and start now my journey to mastering AngularJS.

As with most other courses I will mostly only post the products of my assignments and maybe some study notes here and there.

While I could output pictures of the completed assignments, I don’t see much sense in showing dynamic functionality in a single picture. And while in return GIFs would work in showing the functionality, it is a whole lot of additional work producing them website-compatible for such basic stuff. Maybe later, when my work becomes worth being displayed visually.

Assignment 01: Practicing Components

Getting more familiar with components and the basics of the basics.

  1. Create two new Components (manually or with CLI): WarningAlert and SuccessAlert
  2. Output them beneath each other in the AppComponent
  3. Output a warning or success message in the Components
  4. Style the Components appropriately (maybe some red/ green text?)

Use external or internal templates and styles!
Feel free to create more components, nest them into each other or play around with different types of selectors!

Thoughts/Feedback:

At first the @angular/core resource couldn’t be found, but an angular reinstall resolved this issue.

But afterwards a warning message started to pop up in the terminal:

[ Your global Angular CLI version (1.0.2) is greater than your local version (1.0.0). The local Angular CLI version is used. To disable this warning use “ng set –global warnings.versionMismatch=false”. ]

It doesn’t do any harm and all functions operate normally (for now), so I let it slip (until it becomes a problem 😉 )

Grade of my solution: B

Assignment 02. Practicing Databinding

Getting more familiar with the different types of databinding.

  1. Add a Input field which updates a property (‘username’) via Two-Way-Binding
  2. Output the username property via String Interpolation (in a paragraph below the input)
  3. Add a button which may only be clicked if the username is NOT an empty string
  4. Upon clicking the button, the username should be reset to an empty string

My Submission:

[code language=”html” collapse=”true” title=”My app.component.html”]</pre>
<ol>
<li style="list-style-type: none">
<ol>
<li>Add a Input field which updates a property (‘username’) via Two-Way-Binding</li>
</ol>
</li>
</ol>

<input class="form-control" type="text" />
<ol>
<li style="list-style-type: none">
<ol>
<li>Output the username property via String Interpolation (in a paragraph below the input)</li>

{{username}}
<li>Add a button which may only be clicked if the username is NOT an empty string</li>
</ol>
</li>
</ol>

<button class="btn btn-primary" disabled="disabled"> Button </button>
<ol>
<li>Upon clicking the button, the username should be reset to an empty string</li>
</ol>
<pre>

[/code]

[code language=”js” collapse=”true” title=”My app.component.ts”]import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {

username = "";
userIsEmpty= true;

isUsernameEmpty ($event) {
if (this.username.length >= 1 ) {
this.userIsEmpty = false;
} else {
this.userIsEmpty = true;
}
}

resetUsername ($event) {
this.username = "";

this.isUsernameEmpty($event);
}
}[/code]

Instructor Solution:

[code language=”html” collapse=”true” title=”Instructors app.component.html”]

<ol>

<li>Add a Input field which updates a property (‘username’) via Two-Way-Binding</li>

<input type="text" class="form-control" [(ngModel)]="username">

<li>Output the username property via String Interpolation (in a paragraph below the input)</li>

{{username}}

<li>Add a button which may only be clicked if the username is NOT an empty string</li>

<button class="btn btn-primary" [disabled]= "username === ”" (click)="username = ”">
Button
</button>

<li>Upon clicking the button, the username should be reset to an empty string</li>

</ol>

[/code]

Thoughts/Feedback:

The solution to my assignment was not quite … good. It wasn’t that I did something wrong, but it was limited through my knowledge.

I didn’t know that you could write conditions right between the quotation marks in property databinding, so I didn’t try it. But I now know better.

Grade of my solution: D-

Leave a Reply

Your email address will not be published.