Book Image

TypeScript Blueprints

By : Ivo Gabe de Wolff
Book Image

TypeScript Blueprints

By: Ivo Gabe de Wolff

Overview of this book

TypeScript is the future of JavaScript. Having been designed for the development of large applications, it is now being widely incorporated in cutting-edge projects such as Angular 2. Adopting TypeScript results in more robust software - software that is more scalable and performant. It's scale and performance that lies at the heart of every project that features in this book. The lessons learned throughout this book will arm you with everything you need to build some truly amazing projects. You'll build a complete single page app with Angular 2, create a neat mobile app using NativeScript, and even build a Pac Man game with TypeScript. As if fun wasn't enough, you'll also find out how to migrate your legacy codebase from JavaScript to TypeScript. This book isn't just for developers who want to learn - it's for developers who want to develop. So dive in and get started on these TypeScript projects.
Table of Contents (16 chapters)
TypeScript Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Writing the client side


Just like the weather widget, we will write the client side of the note application with Angular 2. When the application starts, it will try to download the list of notes. If the user is not logged in, we will get an Unauthorized error (status code 401) and show the login form. Otherwise, we can show the menu with all notes, a logout button, and a button to create a new note. When clicking on a note, that note is downloaded and the user can edit it in the note editor. If the user clicks on the new button, the user can write the new note in the (same) note editor.

The server uses a cookie to manage the session, so we do not have to do that manually on the client side.

We start with almost the same HTML file saved as static/index.html:

<!DOCTYPE HTML> 
<html> 
  <head> 
    <title>My Notes</title> 
    <link rel="stylesheet" href="style.css" /> 
  </head> 
  <body> 
    <div id="wrapper...