Production Builds

Angular Production Builds by “Tor” Helgevold (May, 2017)

Advertisements

A2 Tools & Task runners

Angular CLI: Speed up installing dependencies with Yarn by Yakov Fain (November, 2016)


Angular2 Webpack Starter (February 2016) An Angular 2 starter kit featuring Angular 2 (Router, Forms, Http, Services, Tests, E2E), Karma, Protractor, Jasmine, Istanbul, TypeScript, Typings, and Webpack by AngularClass.


libraries.io – Look for npm packages and other tools in here – it monitors 1,152,561 open source libraries across 29 different package managers (as of January, 2016)


Cory House: Why I Left Gulp and Grunt for npm Scripts (January 2016) and its Hacker News comments


Introduction to npm as a Build Tool – Pluralsight 1h 37m course


 

Keith Circel: Why we should stop using Grunt & Gulp (late 2014)

Keith Circel: How to Use npm as a Build Tool (late 2014)


Creating an Angular 2 build with Gulp, TSLINT AND DefinitleyTyped


Yakov Fain: Starting an Angular 2 project with TypeScript and JSPM


Yakov Fain’s Toolbox of the Angular 2 Developer


John Papa’s gulp-patterns


Generating AngularJS production files with Gulp (October, 2015)


Gulp vs Grunt. Why one? Why the Other? (January, 2015)


live-server – simple development (Javascript node) http server with live reload capability

angular2 notes

Starting an Angular 2 project by Yakov Fain – Updated for 2.0 Final Release  (September, 2016)


Angular2 5 Min Quickstart – Good simple reference for non-CLI scaffolding’/configuration that utilizes tsc, node, npm, commonjs,

Notes:

  • Each Angular2 component requires a single @Component annotation and at least one @View annotation.
  • The @Component annotation specifies when a component is instantiated, and which properties and hostListeners it binds to.
  • The @View` annotation specifies the HTML template to use, and lists the directives that are active within the template.
  • A component annotation describes details about the component. An annotation can be identified by its at-sign (@).
    • @Component – The @Component annotation defines the HTML tag for the component by specifying the component’s CSS selector. It “tells angular that this class is a component.” @Component() takes (one or more?) parameters, a _ComponentArg interface. All of the _ComponentArg properties are optional – which means you can pass in just one of them on @Component().
    • In 5MinuteQuickstart app this app we will pass in a selector JavaScript object:
      • @Component({selector:’todo-app’})
    • @View – This annotation defines the HTML that represents the component. The View will present the UI. The View can be an inline template, or, more likley an external template. To use an external template, specify a templateUrl property and give it the path to the HTML file.

Alex Eagle (Google angular2 team) – Getting started video quote

“@Component is an object that has properties like selector.”


From Pascal Precht – Dependency Injection (Updated 8.17.2015):

The DI in Angular 2 basically consists of three things:

  • Injector – The injector object that exposes APIs to us to create instances of dependencies.
  • Binding – A binding is like a recipe that tells the injector how to create an instance of a depedency. A binding needs a token that maps to a factory function that creates an object.
  • Dependency – A dependency is the type of which an object should be created.

Angular2 npm package (from angular2 git repo)


From Announcing TypeScript 1.5 – Jonathan Turner

Decorators allow you to attach metadata to classes and members, as well as update the functionality of what is being decorated.  As you can see above, Angular 2 uses Decorators to define the HTML selector and template on a class directly. We’re excited to see what else developers do with this feature.

Note: to use decorators in your projects, you’ll need to pass the –experimentalDecorators flag to the compiler.