The document outlines the features and advantages of Angular 4, emphasizing its role as a successor to AngularJS for building modern web applications. It details the curriculum of a course designed to teach Angular, covering essential topics such as modules, components, routing, and state management, with a focus on practical application through real projects. The course aims to equip students with the skills to develop scalable and responsive frontend applications with best practices.

1. Why Angular?
Angular is the next big deal. Being the successor of the overwhelmingly
successful Angular.js framework it’s bound to shape the future of frontend
development in a similar way. The powerful features and capabilities of
Angular allow you to create complex, customizable, modern, responsive and user
friendly web applications.
Angular 4 simply is the latest version of the Angular framework and simply an
update to Angular 2.
Angular is faster than Angular 1 and offers a much more flexible and modular
development approach. After taking this course you’ll be able to fully take advantage
of all those features and start developing awesome applications immediately.
Due to the drastic differences between Angular 1 and Angular (=Angular 4) you
don’t need to know anything about Angular.js to be able to benefit from this course
and build your futures projects with Angular.
Get a very Deep understanding of how to create
Angular applications
This course will teach you all the fundamentals about modules, directives,
components, databinding, routing, HTTP access and much more! We will take a lot of
deep dives and each section is backed up with a real project. All examples showcase
the features Angular offers and how to apply them correctly.
 Specifically, you will learn: Which architecture Angular uses
 How to use TypeScript to write Angular applications
 All about directives and components, including the creation of custom
directives/ components
 How databinding works
 All about routing and handling navigation
 What Pipes are and how to use them
 How to access the Web (e.g. RESTful servers)
 What dependency injection is and how to use it
 How to use Modules in Angular
 How to optimize your (bigger) Angular Application
 We will build a major project in this course
and much more!

2. Detailed syllabus :
Angular Topic Outline
Our approximate class outline is shown here. We vary the agenda and order, and
reallocate the time among the topics, to meet student needs.
Versions Covered
Our Angular class is updated frequently, and primarily covers the current version of
Angular. There are only minor differences in application code between Angular 2, 4,
and 5.
 Introduction
 Angular Boot Camp
o Oasis Digital background
o Class objectives and roadmap
o Student experience and expectations
 Preparation
o Prerequisites review
o What is Angular?
o Why AngularJS became Angular
o Single page apps vs server-side web applications
o Why Angular?
o Where Angular fits
o Our focus, Angular for complex, rich, enterprise application development
 Starting with Angular
 JavaScript, TypeScript, Angular
o ES5
o ES2016
o ESnext
o TypeScript
 Simplest Angular application
o What about CSS?
o Development tooling for class use
 The TypeScript module system
o Dividing a program into modules / files
 Templates and bindings
o Template binding expressions
o Null coalescing / safe traversal
o Events and event bindings
 Components nesting and isolation
o In-browser inspector tooling
 Routing introduction
o Generations of Angular routing

3. o Routing to components
o Configuring the router
o HTML5 vs hash routes
 Building with Components
 Development tooling
o SystemJS, optionally with JSPM
o WebPack
o Angular CLI
o Build tooling at the start versus tooling in a mature enterprise project
 Starting a project with Angular CLI
 Component hierarchy and wireframing
 Essential built-in directives
o Branching with ngIf
o Iteration with ngFor
 Angular pipe introduction
o Using the built-in pipes
 Class and style bindings
o [class.x] bindings
o [style.y] bindings
o [ngClass] for more complex class selection
 Component styling
o Scoped CSS
o ViewEncapsulation
o Targeting the component itself
 Component data dinding
o Bind data "downward" with @Input()
o Use events to send data upward with @Output()
 Services, reactivity, and HTTP
 Dependency injection
o Injection introduction
o Why dependency injection?
o What can be injected?
o Explaining DI
 Creating services
o Injecting services into services
 Unit testing
o Unit testing at the command line (already discussed)
o Unit testing in the browser
 Reactive forms
o Standalone reactive controls
 Observable form values - an introduction to Observables
 The async pipe
o Asynchronous data - almost automatic
o Capturing the async pipe data?
 Loading data via HTTP

4. o Show async data via the async pipe
o Inject HTTP in to a service, not in to a component
o Setting request headers
o CORS discussion
 More unit testing
o Unit testing services
o Asyncronous testing
o Mocking HTTP responses
 Modules and Routing
 Multiple NgModules
o Inter-module dependencies
o entryComponents
 Route parameters
o Route-driven observable data loading
o Route guards - protecting routes
o Resolve - loading data during routing
 The smart/display component pattern
o Motivations
o Implementation
 ng-container
o Sentence example
o "Glossary of Useful Terms" example
o "Important Programming Languages" example
o Resources
 Custom pipes
 Data flow and state management
 Observable Composing and Chaining
o Interactive search with observability
o Filtered list via Observables
 Sharing data via binding
o Bindings to adjacent component data
o Bindings to data in a service
 Centralized state management with hierarchical DI
o State in observable in a service
 NgRx/store - Elm/Redux Architecture
o An industry-wide idea
o History
o Angular implementation
 Other Angular features - extra material for Q&A
 More with reactive forms
o Control groups
o FormBuilder
o ngSubmit

5.  Complex forms
o Custom validators
o Custom async validators
 Nested routing
 Lazy loading
o Routes as the unit of lazy loading
o Why?
o How?
o Preloading: eager lazy routes
 Complex routing
o Auxiliary routes
 Route Guards
o CanActivate
o CanDeactivate
 Other route guards
 Observable bindings
o Observables in more depth
o Observable error handling
 The component lifecycle
 Change detection strategies - and why it matters
o How change detection works
o Change detection modes
o Zone.JS
 Decorator directives
o Introduction
Examples
 NgContent (was transclusion)
o Multiple Ng-Content
 ngSwitch
 Sanitization - secure handling of user-provided data
 Component Inheritance
o Reusing code with a different template
 Multi-providers
 Upgrading, third-party code, examples, and legacy
features - extra material for Q&A
 Using Angular in ES5
 Upgrading from AngularJS 1.x
o ngUpgrade
o ngForward
o Where did 1.x features go?
o Loading data with retry
 Deeper with Observables
o Wrap an API in Observables
 Dynamic Reactive Forms
o Transclusion use case example
 ES2015 code

6. o History of JS
 TypeScript examples
o TypeScript decorators
 Promises - still available, still useful
 HTTP API access via promises
 Two-way binding with ngModel
o ngModel with more control types
 Template forms
This curriculum covers the basics well, and positions students to use Angular very
effectively. We update and vary the topics, or reallocate the time among the
topics.
What Will Student Learn?
oDevelop modern, complex, responsive and scalable web applications with
Angular 4
oFully understand the architecture behind an Angular 4 applications and
how to use it
oUse their gained, deep understanding of the Angular 4 fundamentals to
quickly establish themselves as frontend developers
oCreate single-page applications with on of the most modern JavaScript
frameworks out there
oBuild real client apps with Angular on your own
oTroubleshoot common compile-time and run-time errors
oWrite clean and maintainable code like a professional
oApply best practices when building Angular apps