- Angular2 is an open source javascript library that is sponsored and maintained by Google.
- Angular2 applications are built around a design pattern called MVC.
- Angular2 applications are written in Typescript, which is a superset of javascript.
Angular2 Development Tools
1. install nodejs
$node -v
v7.7.2
2. NPM is installed with Node.js but we can also update npm
$ npm install -g npm@3.10.9
3. install angular-cli
$ npm install -g angular-cli
4. creating and preparing project
create folder <project_name>
$ ng init or ng new <project_name>(if not exists)
project structure
- e2e
- node_modules
- src
- app
- assets
- environments
- index.html
- main.ts
- tsconfig.json // typescript compiler configuration file
- package.json // list of software packages required
5. build the contents
$ ng build
6. generate components
$ ng generate component <component_name>
7. start the server
$ npm start or $ ng serve =>
typescript compiler && HTTP Server(lite-server)
javascript opens a connection back to the server(http server) and waits for a signal to reload the page, which is sent when the server detects a change in any of the files in the directory.
Angular applications are typically written in TypeScript.
TypeScript is a superscript of JavaScript, but one of its main advantages is that it lets you write code using the latest JavaScript language specification with features that are not yet supported in all of the browsers that can run Angular applications.
TypeScript compiler generate browser-friendly JavaScript files automatically when a change to a TypeScript file is detected. (TypeScript files have the .ts extension)
Creating a Data Model
To create a data model for the application, a file called model.ts added to the /app folder
model.ts
var model = {
user: "Adam",
items: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
};
model.js
var model = {
user: "Adam",
items: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
};
Using ES6 Features in the model.ts File
export class Model {
user;
items;
constructor() {
this.user = "Adam";
this.items = [new TodoItem("Buy Flowers", false),
new TodoItem("Get Shoes", false),
new TodoItem("Collect Tickets", false),
new TodoItem("Call Joe", false)]
}
}
export class TodoItem {
action;
done;
constructor(action, done) {
this.action = action;
this.done = done;
}
}
The class keyword is used to define types that can be instantiated with the new keyword to create objects that have well-defined data and behavior.
The export keyword relates to JavaScript modules. When using modules, each TypeScript or JavaScript file is considered to be a self-contained unit of functionality, and the export keyword is used to identity data or types that you want to use elsewhere in the application. JavaScript modules are used to manage the dependencies that arise between files in a project and avoid having to manually manage a complex set of script elements in the HTML file.
Creating a Template
A way to
display the data values in the model to the user. In Angular, this is done using a template, which is a fragment of HTML that contains instructions that are performed by Angular
.
Including a data value in a template is done using double braces—
{{ and }}—and Angular evaluates whatever you put between the double braces to get the value to display.
The
{{ and }} characters are an example of a
data binding, which means that they create a
relationship between the template and a data value.
<h3 class="bg-primary p-a-1">{{getName()}}'s To Do List</h3>
the data binding tells Angular to invoke a function called getName() and use the result as the contents of the h3 element.
Creating a Component
An Angular component is responsible for managing a template and providing it with the data and logic it needs.
At the moment, I have a data model that contains a user property with the name to display, and I have a template that displays the name by invoking a getName property. What I need is a component to act as the bridge between them.
data model <- component -> template
import { Component } from "@angular/core";
import { Model } from "./model";
@Component({
selector: "todo-app",
templateUrl: "app/app.component.html"
})
export class AppComponent {
model = new Model(); //property
getName() { //function
return this.model.user;
}
}
The import keyword is the counterpart to the export keyword.
The first import statement is used in the listing to
load the @angular/core module, which contains the key Angular functionality, including support for components. When working with modules, the import statement specifies the types that are imported between curly braces. In this case, the import statement is used to load the Component type from the module. The @angular/core module
contains many classes that have been packaged together so that the browser can load them all in a single JavaScript file.
The second import statement is used to
load the Model class from a file in the project. The target for this kind of import starts with ./, which indicates that the module is defined relative to the current file. Notice that neither import statement includes a file extension. This is because the relationship between the target of an import statement and the file that is loaded by the browser is managed by a module loader.
@Component decorator
which provides metadata about a class. As its name suggests,
it tells Angular that this is a component. The decorator provides configuration information through its properties, which in the case of @Component includes properties called selector and templateUrl.
selector property specifies a CSS selector that matches the HTML element to which the component will be applied: in this case,
todo-app element, which added to the
index.html file. When an Angular application starts, Angular scans the HTML in the current document and looks for elements that correspond to components. It will find the todo-app element and know that it should be placed under the control of this component.
templateUrl property is used to tell Angular how to find the component’s template, which is the app.component.html file in the app folder for this component.
When a new instance of the AppComponent class is created, the model property will be set to a new instance of the Model class. The getName function returns the value of the user property defined by the Model object.
Putting the Application Together
There are two types of module used in Angular development.
A JavaScript module is a file that contains JavaScript functionality that is used through the import keyword.
The other type of module is an Angular module, which is used to describe an application or a group of related features. Every application has a root module,
which provides Angular with the information that it needs to start the application called app.module.ts, which is the conventional file name for the root module.
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
The purpose of the Angular module is to provide configuration information through the properties defined by the @NgModule decorator.
21 page
Creating a Two-Way Data Binding
At the moment, the template contains only one-way data bindings, which means they are used to display a data value but do nothing to change it. Angular also supports two-way data bindings, which can be used to display a data value and update it, too. Two-way bindings are used with HTML form elements.
The
ngModel template expression creates a two-way binding between a data value and a form element.
Filtering Items
Adding Items
Event Binding
