Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only €10,99/month after trial. Cancel anytime.

    Learn Angular: Build a Todo App
    Learn Angular: Build a Todo App
    Learn Angular: Build a Todo App
    Ebook278 pages1 hour

    Learn Angular: Build a Todo App

    By Jurgen van de Moere

    ()

    Read preview

    About this ebook

    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.

    LanguageEnglish
    PublisherSitePoint
    Release dateJun 15, 2018
    ISBN9781492068235
    Learn Angular: Build a Todo App
    Author

    Jurgen van de Moere

    Front-end Architect at The Force - specializing in JavaScript and AngularJS. Developer Expert at Google. Gymnast. Dad. Family man. Creator of Angular Express.

    Related to Learn Angular

    Related ebooks

    Programming For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      DJANGO Create A Database-driven Website

      Jun 4, 2019

      The Django web framework was named after the famous guitarist Django Reinhardt and was first created by web developers at a small newspaper in Kansas. The main goals of Django is to enable fast development of complex websites with database needs. It

      7 min read

    • Article

      FLASK Web Frameworks

      Jun 4, 2019

      The main focus of Python has always been to get you cracking on with your coding – the language was never made for web programming. However, this has just made it more interesting to extend the language for the web, or to create an interface to web-b

      9 min read

    • Article

      Code An Admin Back-end In Django

      Dec 13, 2022

      Credit: www.djangoproject.com OUR EXPERT Matt Holder has been a fan of the open source methodology for over two decades and uses Linux and other tools where possible. More featurepacked source code for this project can be downloaded from https://

      6 min read

    • Article

      Usability

      Oct 19, 2021

      Usability
      3 min read

    • Article

      Metrics & Visuals In Go

      Nov 17, 2020

      Mihalis Tsoukalos is a DataOps engineer and a technical writer. He’s the author of Go Systems Programming and Mastering Go, 2nd edition. The subject of this tutorial is two-fold. First, it’s about creating a Go application that exports metrics to P

      7 min read

    • Article

      Common Errors

      Aug 27, 2019

      If you receive a ‘Script not found’ error, this probably means that you don’t have the mod scripts installed in your Minecraft directory. Check that you’ve replaced .minecraft with the one from McPiFoMo; this should include mcpipy, which will be full

      1 min read

    • Article

      Lint Hub

      Jul 27, 2021

      Pylint – a comprehensive linter that focuses on standards compliance and error detection. It’s likely built into your favourite IDE. Pycodestyle (formerly known as PEP8) – focuses on validating code formatting PEPs, has some overlap with Pylint. Pyfl

      1 min read

    • Article

      Build An Embedded Temperature Sensor

      Jan 11, 2022

      While reviewing the Pimoroni Display HAT Mini (see page 43) we created a quick project to demonstrate how easy this screen is to work with, and how useful the QW/ST connector is. The project uses an AHT20 temperature sensor to collect data, which is

      3 min read

    • Article

      In Brief

      Jun 1, 2021

      Mu is a code editor for many forms of Python. We can write standard Python 3 code, create web apps and write code for microcontrollers such as the new Raspberry Pi Pico. Mu is designed for new users and does away with complicated IDEs in favour of a

      1 min read

    • Article

      Your First Code

      Jul 31, 2019

      Your First Code
      1 min read

    • Article

      What Is The Future Of Game Streaming Now That Stadia Is Dead?

      Oct 31, 2022

      Once hyped as being ‘the future of gaming’, the Google Stadia game streaming service was officially, just three years after launch and before even making it to Australian shores. When game streaming first launched we did have some apprehension about

      2 min read

    • Article

      HotPicks

      Jul 27, 2021

      HotPicks
      12 min read

    • Article

      Demystifying Artificial Intelligence

      Oct 18, 2019

      artificial intelligence (AI) has had a significant global impact by changing the way enterprises, markets and consumers define efficiency and innovation. Financial markets typically feature large volumes of noisy and dynamic data while utilising high

      3 min read

    • Article

      Why Python?

      Apr 7, 2020

      Python is an interpreted, high-level, general-purpose programming language that was first released in 1991 by its creator, Guido van Rossum. Very similar in programming construct to how BASIC (Beginners All-purpose Sybollic Instruction Code) was used

      1 min read

    • Article

      Support And Community

      May 31, 2022

      Support And Community
      1 min read

    • Article

      Access Your Mac Anywhere

      Nov 8, 2022

      Access Your Mac Anywhere
      2 min read

    • Article

      Create Your Own Virtual Classroom

      Mar 8, 2022

      Credit: https://moodle.org David Rutland believes it’s impossible for a person to be either be overdressed or overeducated. People who know him agree that he is neither. Education, education, education. If you were around in 1997, you probably rememb

      10 min read

    • Article

      Set Up Your First Database

      Aug 25, 2020

      Set Up Your First Database
      1 min read

    Related categories

    Reviews for Learn Angular

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Learn Angular - Jurgen van de Moere

      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:

      A Perfect Summer's Day

      It was a lovely day for a walk in the park.

      The birds were singing and the kids were all back at school.

      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:

      Angular CLI: The Finished Todo Application

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

      Angular CLI: Application Architecture of Finished Todo Application

      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.21

      node: 6.1.0

      os: 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.ts

      src/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, we can now run:

      $ ng test

      This executes the Karma test runner and run all our unit tests. This should output:

      [karma]: No captured browser, open http://localhost:9876/

      [karma]: Karma v1.2.0 server started at http://localhost:9876/

      [launcher]: Launching browser Chrome with unlimited concurrency

      [launcher]: Starting browser Chrome

      [Chrome 54.0.2840 (Mac OS X 10.12.0)]: Connected on socket /#ALCo3r1JmW2bvt_fAAAA with id 84083656

      Chrome 54.0.2840 (Mac OS X 10.12.0): Executed 5 of 5 SUCCESS (0.159 secs / 0.154 secs)

      Example Code

      If your unit tests are failing, you can compare your code to the working code on GitHub

      Now that we have a

      Enjoying the preview?
      Page 1 of 1