Angular 2 (Introduction to a web development platform)
In this post, we would be writing a simple Angular 2 app. This will give us a first idea of the framework and provide us with the understanding of the concepts behind.
Install the Angular cli
First you need to install the angular-cli, if you haven’t already done so.
npm install -g @angular/cli
Create a new application
Having installed angular cli, lets create a new project named ng-todo.
ng new ng-todo
Its likely we will be creating a simple todo project. Running the above command angular-cli generates a new project with a default application and supported files.
Serve the Application
Now we go into the project directory by running the commandcd ng-todo and launch our new application by runningng serve — open
The ng serve command builds the app, starts the development server, watches the source files, and rebuilds the app as you make changes to those files.
The --open flag opens a browser to http://localhost:4200/.
You should see the app now running in your browser.
Understanding Our Application structure
Using our preferred text editor(in my case am using VScode) in the project directory, below are what we will find in it.
Open thesrc folder , there you will find several files that makes up our starter app we got initially when we runng serve — open .
Index.html
Like basic web pages, we tend to have an index.html file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgTodo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
In the <body> tag, we have a new tag <app-root> . This is what renders our web page
Are you asking HOW ? This were Angular Components plays its role.
Angular Components
Components are the building blocks of Angular applications. They help display data, listen on user inputs and react on this inputs.
Still using your preferred text editor, navigate to the app folder in thesrc directory.
This folder contains 3 main files:
app.component.ts— the component class code, written in TypeScript
app.component.html— the component template, written in HTML
app.component.css— the component's private CSS styles.
# Open the app.component.ts and lets change the title of our application to TodoApp.
title = 'TodoApp';
Open the app.component.html , here you find our intial html template we got on the browser.
This reveals to us that angular uses components to pass template views to the browser in the form of selectors/ html tags.
Lets change view to reflect our simple todo app: Paste this in your app.component.html
<h4>{{title}}</h4>
<h5>
Number of todos: <span class="badge">{{todos.length}}</span>
</h5>
<ul class="list-group">
<li *ngFor="let todo of todos" class="list-group-item">
{{todo}}
</li>
</ul>
<div class="form-inline">
<input class="form-control" #todotext>
<button class="btn btn-primary" (click)="addTodo(todotext.value)">
ADD Todo
</button>
</div>
Now we have our todo template ready, but we are getting some new syntaxes right…. I’ll explain
Interpolation:
Remember when we changed the property title = 'TodoApp'; inapp.component.ts . Now angular allows us to display data,
<h4>{{title}}</h4> <h5> Number of todos: <span class=”badge”>{{todos.length}}</span> </h5>
To access the property value the expression is included in the template by using double curly braces known as Interpolation
Directives:
The ngFor directive will help us generate a <li> data for every data in the todos array.
<li *ngFor="let todo of todos" class="list-group-item">
{{todo}}
</li>
The syntax here *ngFor=”let todo of todos” represents a kind of forloop i.e for every todos element in the array, it is repeated as a todo. We can then access the element values using interpolation{{todo}}
Event Binding:
Noticed the #todotext in the <input> tag, this is a syntax used in angular to create a variable which is accessible to the component giving us access to the html value/element.
Also the button contains a special attribute(click)
<button class="btn btn-primary" (click)="addTodo(todotext.value)">
ADD Todo
</button>
This is used in angular to describe events, passing an eventhandler method addTodo. This method will be implemented in our component.
Implementing the Component
So the template being ready, we need to adjust our component class to meet the expectations of the template
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'TodoApp';
todos: any ;
constructor(){
this.todos = [
"Learn HTML",
"Learn CSS",
"Learn JavaScript"
]
}
addTodo(todo: string){
this.todos.push(todo);
}
}
We are using TypeScript to declare todos as type of any , the class constructor is used to initialize the todos array.
.The addTodo method is implemented in class AppComponent, so that we can use this method to handle the click event of the button. The method takes this string and calls the push method to extend the todos array with this new item.
Conclusion
With ng serve — open already running, our application is already compiled and built for us, even when we where making changes . OPEN http://localhost:4200/ to see your little application.
