Learning Angular


List of tools and resources to get you started with learning Angular

refer to links from these to lists (pls ensure the links are for the latest version lots of stale content on the net)





Style-Language & Best Practices.



Angular QuickStart



Tour of Heroes


Angular CLI

Nothing like reading thru actual repo

https://cli.angular.io  Use Angular CLI to quickly scaffold your applications and get your apps setup with the best practices.

Small yet effective Tutorial.

[add relevant resource links and pluralsight video tutorials that cover each of the following topics

Try Even NativeScript with Angular





Universal Rendering

Webpack bundling

Web services


TypeScript Handbook 









Personal Opinion – Strongly against using any design/UI libraries as angular elements rather than style sheets with custom created components unless its a private/small project.

  • Created by Vinci

Angular2 vs Angular1.3



1.  Angular2 performance

Be default, Angular2 performance will be good. Still you can improve the angular2 performance of your application using following ways

A.     HTTP/2

i.         Use HTTP/2 to load assets parallel from server which increases performance up to 30-50%.
ii.         Reference: http://www.zackarychapple.guru/angular2/2016/05/31/tour-of-heroes-http2.html

B.     Use gulp-inline-ng2-template

i.         Inline angular2 HTML and CSS files to JavaScript and Typescript files
ii.         Reference: https://github.com/angular/angular/issues/4328
iii.         https://github.com/ludohenin/gulp-inline-ng2-template
2.  Angular 1.3 vs 2
A.     Angular2 written in Typescript and meets the ECMASCRIPT 6 specifications.
B.     Angular2 is entirely component based. Controllers and $scope no longer used. Components are directives with a template.
C.     Form validations are easier in angular2
D.     Angular2 support for native mobile – iOS and Android
E.     Angular2 support for server side rendering. Angular2 provides more choices of languages. You can use any of the language from ES5, ES6, TypeScript or Dart to write Angular 2 code.
F.     Improved testability in angular2.

G.     Support to migrate from angular1.x to 2 using ng-upgrade.

References: http://blog.angular-university.io/introduction-to-angular2-the-main-goals/

Apart from Angular2 features like performance, mobility, testability etc. We can see the major differences in syntaxes for angular 1.x and angular 2 versions. Few major changes are listed below.

Angular 1.3

Angular 2

Plan JavaScript ES6 Specification
Not built with mobile support Built with mobile support
Easy to setup and Difficult to create directives, controller files manually. Simple to setup and use it using angular-cli
Controllers and scope to maintain logic Components with minimal syntax
Bootstrapping using ng-app Made a simpler bootstrap
Structural directives like ng-repeat, ng-if been changed. *ngFor, *ngIf syntax changed.
You cannot use HTML DOM element properties and events in angular 1.x. Instead we have to use ng-href, ng-src, ng-show etc. You can use directly HTML DOM element properties and events in angular2.
Services are defined in 5 ways like factory, service, provider, constant and values We will use Injectable here
$scope plays major role here which could be harmful in some ways. No scope in angular2.
Dependency Injection achieve via controllers DI achieves via constructor in classes
Form validations are difficult to apply Its very easy with in-built syntaxes.
No Server Side Rendering Server Side Rendering is possible

Reference: http://www.talkingdotnet.com/difference-between-angular-1-x-and-angular-2/

3.  how to Upgrade from angular 1.3 to angular2

Here is an example of what an Angular 1 project upgrade to Angular 2 may look like.

  1. Include the Angular 2 and ng-upgrade libraries with your existing application
  2. Pick a component which you would like to migrate
  3. Edit an Angular 1 directive’s template to conform to Angular 2 syntax
  4. Convert the directive’s controller/linking function into Angular 2 syntax/semantics
  5. Use ng-upgrade to export the directive (now a Component) as an Angular 1 component (this is needed if you wish to call the new Angular 2 component from an Angular 1 template)
  6. Pick a service which you would like to migrate
  7. Most services should require minimal to no change.
  8. Configure the service in Angular 2
  9. (optionally) re-export the service into Angular 1 using ng-upgrade if it’s still used by other parts of your Angular 1 code.
  10. Repeat doing step #2 and #3 in an order convenient for your application development
  11. Once no more services/components need to be converted drop the top level Angular 1 bootstrap and replace with Angular 2 bootstrap.

How ever,

  • The new Angular 2 router is being backported to Angular 1, and will allow the same application to have both Angular 1 and Angular 2 routes
  • It will be possible to mix Angular 1 and Angular 2 components in the same application
  • It will be possible to inject services across framework versions
  • Data binding will work across versions as the two change detection mechanisms will be integrated.

References: http://blog.angular-university.io/introduction-to-angular2-the-main-goals/



4.  why Angular 2?

A.     Annotations

AtScript provides tools for associating metadata with functions. This facilitates the construction of object instances by providing the required information to the DI library (which will check for associated metadata when calling a function or creating an instance of a class). It will be also easy to override parameter data by supplying an Inject annotation.

B.     Child Injectors

A child injector inherits all the services of its parent with the capability of overriding them at the child level. According to requirement, different types of objects can be called out and automatically overridden in various scopes.

C.     Instance Scope

The improved DI library will feature instance scope control, which will become even more powerful when used with child injectors and your own scope identifiers.


D.     Dynamic Loading

This is a feature which is missing from the current version of Angular. It will be addressed by Angular 2.0, which will let developers add new directives or controllers on the fly.

E.     Templating

In Angular 2.0, the template compilation process will be asynchronous. As the code is based on the ES6 module spec, the module loader will load dependencies by simply referencing them in the component definition.

F.     Directives

In Angular 2.0 there will be three kinds of directives: Component Directives, Decorator Directives, Template Directives

G.     Routing

The router in Angular 2.0 has been reworked to be simple, yet extensible. It will include the following basic features:

  1. Simple JSON-based Route Config
  2. Optional Convention over Configuration
  3. Static, Parameterized and Splat Route Patterns
  4. URL Resolver
  5. Query String Support
  6. Use Push State or Hashchange
  7. Navigation Model (For Generating a Navigation UI)
  8. Document Title Updates
  9. 404 Route Handling
  10. Location Service
  11. History Manipulation

H.    Child Router

The child router will convert each component of the application into a smaller application by providing it with its own router. It will help encapsulate entire feature sets of an application.

I.      Screen Activator

This will give developers finer control over the navigation lifecycle, via a set of can* callbacks:

canActivate – Allow/Prevent navigating to the new controller.

activate – Respond to successful navigation to the new controller.

canDeactivate – Allow/Prevent navigation away from the old controller.

deactivate – Respond to successful navigation away from the old controller.

These callbacks will allow the developer to return Boolean values, a Promise for that value, or a Navigation Command (for a lower level control).

J.       Logging

Angular 2.0 will contain a logging service called diary.js—a super useful feature which measures where time is spent in your application (thus enabling you to identify bottlenecks in your own code).

Reference: https://www.sitepoint.com/whats-new-in-angularjs-2/

5.  Angular Security



Router example: