Learn Angular: Build a Todo App

Jurgen van de Moere

Description

Angular is not just a framework, but rather a platform that empowers developers to build applications for the web, mobile, and the desktop.

This book contains a complete tutorial on building a todo app with Angular. Along the way, we'll learn about installation and setup, component architecture, adding a REST backend, routing, authentication, and much more.

This book is for all front-end developers who want to become proficient with Angular and its related tools. You'll need to be familiar with HTML and CSS and have a reasonable level of understanding of JavaScript in order to follow the discussion.

Sujets

• Langages
• Computers
• Informatique
• JavaScript

Informations

• Publié par: SitePoint
• Date de parution: 15 juin 2018
• Nombre de lectures: 1
• EAN13: 9781492068235
• Langue: English

Extrait

Learn Angular: Build a Todo App
by Jurgen Van de Moere
Copyright © 2018 SitePoint Pty. Ltd.
Ebook ISBN: 978-0-6483315-7-5 Cover Design: Alex Walker
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.

Published by SitePoint Pty. Ltd.
48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: [e-mail]

About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, design, and more.

Preface
So, why Angular? Well, because it’s supported on various platforms (web, mobile, desktop native), it’s powerful, modern, has a nice ecosystem, and it’s just cool. Not convinced? Let's be a bit more eloquent, then: Angular presents you not only the tools but also design patterns to build your project in a maintainable way. When an Angular application is crafted properly, you don’t end up with a tangle of classes and methods that are hard to modify and even harder to test. The code is structured conveniently and you won’t need to spend much time in order to understand what is going on. It’s JavaScript, but better. Angular is built with TypeScript, which in turn relies on JS ES6. You don’t need to learn a totally new language, but you still receive features like static typing, interfaces, classes, namespaces, decorators etc. No need to reinvent the bicycle. With Angular, you already have lots of tools to start crafting the application right away. You have directives to give HTML elements dynamic behavior. You can power up the forms using FormControl and introduce various validation rules. You may easily send asynchronous HTTP requests of various types. You can set up routing with little hassle. And there are many more goodies that Angular can offer us! Components are decoupled. Angular strived to remove tight coupling between various components of the application. Injection happens in NodeJS-style and you may replace various components with ease. All DOM manipulation happens where it should happen. With Angular, you don’t tightly couple presentation and the application’s logic making your markup much cleaner and simpler. Testing is at the heart. Angular is meant to be thoroughly tested and it supports both unit and end-to-end testing with tools like Jasmine and Protractor. Angular is mobile and desktop-ready , meaning you have one framework for multiple platforms. Angular is actively maintained and has a large community and ecosystem. You can find lots of materials on this framework as well as many useful third-party tools.
So, we can say that Angular is not just a framework, but rather a platform that empowers developers to build applications for the web, mobile, and the desktop.
This book presents a complete project tutorial: building a todo app with Angular CLI. Along the way, you'll refactor the app to take advantage of some of Angular's best features.
Who Should Read This Book?
This book is for all front-end developers who wannt to get proficient with Angular and its related tools. You’ll need to be familiar with HTML and CSS and have a reasonable level of understanding of JavaScript in order to follow the discussion.

Conventions Used
Code Samples
Code in this book is displayed using a fixed-width font, like so:
<h1>A Perfect Summer's Day</h1><p>It was a lovely day for a walk in the park.The birds were singing and the kids were all back at school.</p>
Where existing code is required for context, rather than repeat all of it, ⋮ will be displayed:
function animate() { ⋮ new_variable = "Hello"; }
Some lines of code should be entered on one line, but we’ve had to wrap them because of page constraints. An ➥ indicates a line break that exists for formatting purposes only, and should be ignored:
URL.open("http://www.sitepoint.com/responsive-web-➥design-real-user-testing/?responsive1");
You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.
Tips, Notes, and Warnings

Hey, You!

Tips provide helpful little pointers.

Ahem, Excuse Me ...

Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.

Make Sure You Always ...

... pay attention to these important points.

Watch Out!

Warnings highlight any gotchas that are likely to trip you up along the way.
Chapter 1: Getting the First Version of the App Up and Running
This book contains a series of chapters on building a todo app with Angular 2+. In each chapter, we'll refine our app, which will look like this:

By the end of this series, our application architecture will look like this:

The items that are marked with a red border are discussed in this chapter, while items that are not marked with a red border will be discussed in later chapters.
In this first chapter, you’ll learn how to: initialize your Todo application using Angular CLI create a Todo class to represent individual todos create a TodoDataService service to create, update and remove todos use the AppComponent component to display the user interface deploy your application to GitHub pages
So let’s get started!
Initialize Your Todo Application Using Angular CLI
One of the easiest ways to start a new Angular 2 application is to use Angular’s command-line interface (CLI).
To install Angular CLI, run:
$ npm install -g angular-cli
This will install the ng command globally on your system.
To verify whether your installation completed successfully, you can run:
$ ng version
This should display the version you’ve installed:
angular-cli: 1.0.0-beta.21node: 6.1.0os: darwin x64
Now that you have Angular CLI installed, you can use it to generate your Todo application:
$ ng new todo-app
This creates a new directory with all files you need to get started:
todo-app├── README.md├── angular-cli.json├── e2e│ ├── app.e2e-spec.ts│ ├── app.po.ts│ └── tsconfig.json├── karma.conf.js├── package.json├── protractor.conf.js├── src│ ├── app│ │ ├── app.component.css│ │ ├── app.component.html│ │ ├── app.component.spec.ts│ │ ├── app.component.ts│ │ ├── app.module.ts│ │ └── index.ts│ ├── assets│ ├── environments│ │ ├── environment.prod.ts│ │ └── environment.ts│ ├── favicon.ico│ ├── index.html│ ├── main.ts│ ├── polyfills.ts│ ├── styles.css│ ├── test.ts│ ├── tsconfig.json│ └── typings.d.ts└── tslint.json
If you’re not familiar with the Angular CLI yet, make sure you check out The Ultimate Angular CLI Reference .
You can now navigate to the new directory:
$ cd todo-app
Then start the Angular CLI development server:
$ ng serve
This will start a local development server that you can navigate to in your browser at http://localhost:4200/ .
The Angular CLI development server includes LiveReload support, so your browser automatically reloads the application when a source file changes.
How convenient is that!
Creating the Todo Class
Because Angular CLI generates TypeScript files, we can use a class to represent Todo items.
So let’s use Angular CLI to generate a Todo class for us:
$ ng generate class Todo --spec
This will create the following:
src/app/todo.spec.tssrc/app/todo.ts
Let’s open up src/app/todo.ts :
export class Todo {}
Next, add the logic we need:
export class Todo { id: number; title: string = ''; complete: boolean = false; constructor(values: Object = {}) { Object.assign(this, values); }}
In this Todo class definition, we specify that each Todo instance will have three properties: id : number, unique ID of the todo item title : string, title of the todo item complete : boolean, whether or not the todo item is complete
We also provide constructor logic that lets us specify property values during instantiation so we can easily create new Todo instances like this:
let todo = new Todo({ title: 'Read SitePoint article', complete: false});
While we’re at it, let’s add a unit test to make sure our constructor logic works as expected.
When generating the Todo class, we used the --spec option. This told Angular CLI to also generate src/app/todo.spec.ts for us with a basic unit test:
import {Todo} from './todo';describe('Todo', () => { it('should create an instance', () => { expect(new Todo()).toBeTruthy(); });});
Let’s add an additional unit test to make sure the constructor logic works as expected:
import {Todo} from './todo';describe('Todo', () => { it('should create an instance', () => { expect(new Todo()).toBeTruthy(); }); it('should accept values in the constructor', () => { let todo = new Todo({ title: 'hello', complete: true }); expect(todo.title).toEqual('hello'); expect(todo.complete).toEqual(true); });});
To verify whether our code works as expected