SICT

BTI425

Web Programming for Apps and Services

Notes Weekly Resources Graded work Policies Standards Professors & addendum Code examples

BTI425 Week 6 Notes

The theme for the remainder of the course is to cover the Angular platform.

This week, it’s all about getting started with Angular. Then, beginning next week, we’ll do a weekly deep dive into these important app dev topic areas:

  1. Components
  2. Routing
  3. Services
  4. Forms

After that, we’ll put together some apps.

Remember to frequently use the learning resources.


Topics

A number of them today:

Then, technical getting started topics:

The recent coverage of React introduced you to a new way to think about building a client-side web app. Now, we do it again in Angular.

To get started, read this introduction to Angular, and also follow its links to read or skim additional content.

Next, follow along as you get started with Angular. Learn how to install the developer bits, and generate a starter app. Then, start learning about its architecture. Follow the tutorials.

Then, we repeat or highlight some of the important topics and concepts from the getting started guide and tutorials.

= = = = =

Code examples

We have two code examples today:

  1. Animals - an Angular version of the multi-component React code example from week 4
  2. Customers - the end result of the in-class demonstration

= = = = =

The first in-depth topic set that we will study is components. Let’s get started now with this topic:

Angular Components Introduction: This document discusses Components in detail, including how to get started using components / creating components from scratch, using “templates” in components, and writing attribute/structural directives.

Angular Components Example: This document guides us through a simple example (“animals”), where we plan a view with multiple components from scratch. Then, download and study its code example from the GitHub repo.

In class this week, the professor will demonstrate a project that shows a particular strength of Angular - easy and robust updates in the user interface. Follow along in the notes, and try to build it yourself. Then, download and study its code example from the GitHub repo.

In the computer-lab class, the professor will introduce simple routing for an Angular app. Then, each student will get some experience creating an app by completing a non-graded hands-on exercise.