Greg Lim - Beginning Angular 2 with Typescript

Beginning Angular 2 with Typescript Greg Lim Copyright 2017 Greg Lim All rights reserved. Copyright 2017 by Greg Lim All rights reserved. No part of this book may be reproduced in any form or by any electronic or mechanical means including information storage and retrieval systems, without permission in writing from the author. The only exception is by a reviewer, who may quote short excerpts in a review. First Edition: February 2017 Table of Contents Preface About this book Angular 2 is one of the leading frameworks to develop apps across all platforms. Reuse your code and build fast and high performing apps for any platform be it web, mobile web, native mobile and native desktop.

You use small manageable components to build a large powerful app. No more wasting time hunting for DOM nodes! In this book, we take you on a fun, hands-on and pragmatic journey to master Angular 2 from a web development point of view. You'll start building Angular 2 apps within minutes. Every section is written in a bite-sized manner and straight to the point as I dont want to waste your time (and most certainly mine) on the content you don't need. In the end, you will have what it takes to develop a real-life app. Requirements Basic familiarity with HTML, CSS, Javascript and object-oriented programming Contact and Code Examples Please address comments and questions concerning this book to .

Code examples can be also be obtained by contacting me at the same. Chapter 1: Introduction 1.1 What is Angular 2? Angular 2 is a framework for creating Single Page Applications (SPA). What is a Single Page Application? Most web applications are traditionally server side applications. The server holds the business logic, stores data, and renders the website to the client. When client clicks on a link, it sends a request to the server, and the server will handle this request and send back a response with html code which the browser will render and be viewed by the user. The problem here is that with this approach, the server receives a lot of requests.

For example, when we go to a website and click on its home page, we send a request for which the server has to respond. We click on the About page and it sends another request and the server responds. We click on Blog and it sends another request and again the server responds. The many requests and responds incurs a lot of time and resources spend on these tasks which lead to a slow feeling of web pages. But whereas the apps on your mobile phone or desktop feel very fast most of the time. Angular 2 wantsto bring this app like feeling to the browser where we do n t always have to load new pages each time there is an action from the user.

A user still clicks on various links in an SPA. However, this time, the client handles the requests on its own and will re-render the html page through Javascript so the server is totally left out here if its possible that no data from the server is needed. This is muchfaster as we do n t have to send any data over the internet, the client does n t have to wait for the response, and the server does n t have to render the response. Everything is done in the browser. Gmail is a good example of a SPA. There are of course times when we need to get or send data from/to the server and we will need to send a request to the server.

But these are restricted to initial loading and necessary server side operations like database operations. Besides these operations, we will not need to request from the server. And even if we do need it, we do it asynchronously, which means we still re-render the page instantly to the user and then wait for the new data to arrive and incorporate it and render the view again when the data arrives. This leads to a different set of requests. A typical request with a SPA page is the initially request to load the page when the user first visits the site. For the next request however, when we visit the About page, we will not need to send a request to the server.

Although we will need to send a request again when we visit the Blog page, we have already saved one request and a lot of time. And even when we do send requests, we still provide the instant reactive feeling to the user because we handle the response data asynchronously as we can instantly render the Blog page. In this book, I will teach you about Angular 2 from scratch in a step by step fashion. It doesnt matter whether you are familiar with Angular 1 or not because Angular 2 is an entirely new framework. I will not be touching on Angular 1 and how it is different from Angular 2 because not every reader of this book is familiar with Angular 1 and we do not want to distract you with the old way of development. We will be using Typescript, a superset of Javascript for Angular 2 development.

Angular uses Typescript because its types make it easy to catch many programming errors during compile time. In the course of this book, you will build an application where you can input search terms and receive the search results via Spotify RESTful api (fig. 1.1.2). figure 1.1.2 At the end, you will also build a real world application with full C.R.U.D. operations (fig. figure 1.1.3 These are the patterns you see on a lot of real world applications. figure 1.1.3 These are the patterns you see on a lot of real world applications.

In this book, you will learn how to implement these patterns with Angular 2. 1.2 Architecture Overview of Angular 2 Apps The four main building blocks of an Angular 2 app are modules, components, directives and services. Modules An Angular app is made up of separate modules which consist of closely related components of functionality. When we first begin creating our app, we will have only one module which is the root module AppModule. For small applications, the root module may be the only module. But most apps have multiple feature modules, each being groups of components that perform a role.

For example, a social media app will have a post module, message module, followers module and so on. Components As mentioned, an Angular module is made up of components. For example, if we want to build a store front module like what we see on Amazon, we can divide it into three components. The search bar component, sidebar component and products component. A component consists of an html template and a component class that has its own data and logic to control the html template. Components can also contain other components.

In products component where we display a list of products, we do so using multiple product components. Also, in each product component, we can have a rating component (fig. 1.2.1). fig. 1.2.1 The benefit of such an architecture helps us to breakup a large application into smaller manageable modules, which in turn consists of smaller manageable components. Plus, we can reuse components within the application or even in a different application.

For example, we can re-use the rating component in a different application. Below is an example of a component that displays a simple string. export class ProductComponent { averageRating = number; setRating(value){ } } A component is simply a plain Typescript class like any other class that has properties and methods. The properties hold the data for the view and the methods implement the behavior of a view, like what should happen if I click a button. Services A service is a class with a well defined specific function that your application needs. For example, logging, talking to backend servers (e.g.