Unit 1 Notes from Yakov Fain online Angular training, spring 2016

Starting a new Angular project with npm – See slide 46


 

Systemjs – a Universal module loader

  • A ‘module’ is a file
  • Systemjs loads the main module and all its dependencies
  • Systemjs is a polyfill that loads  modules in ES6, UMD, AMD and Commonjs formats.
  • ES7 should include a system object for loading modules.
  • System.config (file or inline) configures the loader
  • System.import() loads modules
    • Example: System.import(‘app’)

 


 

npm – A package manager

  • There are several package managers: npm, jspm, bower…
  • npm comes with the installation of Node.js
  • npmjs.org repo has 200K+ packages
  • To install a package xyz in your project’s dir node_modules:
 npm install xyz
  • To install a package xyz globally:
 npm install xyz -g
  • Typically local installs are configured in the file package.json
  • For packages that you will likely use in many projects, install them globally by typing
    • npm install packageName – g

 

package.json – Used for creating reproduce-able builds!

  • To install package xyz to your project and add it to the dependencies section of package.json, type
    • npm xyz –save
  • To install package xyz and add it to the devDependencies section of the package.json file, type
    • npm xyz –save-dev
  • You can generate a package.json file for your project by typing
    • npm init -y
  • For Angular 2 projects, you will need to add the Angular 2 dependencies to the package.json file:
    • “dependencies”: {
      “es6-shim”: “0.33.13”,
      “es6-promise”: “^3.0.2”,
      “reflect-metadata”: “0.1.2”,
      “rxjs”: “5.0.0-beta.2”,
      “systemjs”: “0.19.22”,
      “zone.js”: “0.5.15”,
      “angular2”: “2.0.0-beta.7”
      },
  • Dependencies are downloaded to the node_modules directory by typing the following at the command line:
    • npm install
  • You will want to have the script tags’ src attributes in the html files’ <head> element reference the files that were downloaded into the node_modules directory when you ran ‘npm install’.

 

Component UI:

  • Component’s markup and styles – keep it inline if it is short or in a separate file if it is long.
  • Use backticks ‘`‘ instead of quote marks to write a multi-line templates within a component

 

Binding Overview

  • Used to keep view and underlying data in sync.
    • If the data changes, the UI changes automatically and…
    • UI changes result in changes to the data
  • UI elements can be bound to a component’s properties
  • Events can be bound to functions and expressions

 

Unidirectional binding – from code to template examples

  • <h1>Hello {{ name }}!></h1>
  • <span [hidden]=”isZipcodeValid”>Not valid</span> – NOTE that hidden is a DOM property and isZipcodeValid is a class variable.

 

Unidirectional binding – from template to code example

  • <button (click)=”placeBid”>Place Bid</button> – NOTE that click is a DOM event
  • <input (input)=”onInputEvent()” />  – NOTE that input is a DOM event
  • In addition to DOM events we can also bind to custom events: <price-quoter (last-price) =”priceQuoteHandler($event)></price-quoter> NOTE that last-price is the custom event.

 

Syntactical sugar to do something like two-way binding

Use [()]

Example: <input [(ngModel)] = “myComponentProperty”>


 

Odds and Ends from the unit1_consultation.mp4 video:

  • We use the angular 2 bootstrap function to load the component that represents the entry point of our SPA. We do this is a main.ts file. That is – it is all it does. We isolate the call to bootstrap here because it gives us flexibility. For example, in the future we create different version that, say, works in NativeScript.
  • Yakov refers to JavaScript hoisting . In JavaScript, a variable can be declared after it has been used. In other words; a variable can be used before it has been declared.
    Hoisting is JavaScript’s default behavior of moving declarations to the top.
  • Relative module names start with “./” or “../”. Rooted module names start with “/”, drive name or name of folder that is child of root.
  • In tsconfig.json – Setting the moduleResolution property’s value to  use the commonjs spec instructs tsc to look in the node_modules directory to resolve Non-relative/non-rooted module names.
  • If you use one of your components within another component’s template or templateUrl, you need to reference the ‘child’ component in the ‘parent”s @Component’s directives declaration. Example:

@Component({
selector: ‘auction-product-item’,
templateUrl: ‘app/components/product-item/product-item.html’,
directives: [StarsComonent]
])

  • {{}} Binding is known as interpolation in ES6. It is the easiest way to display a component’s property’s value in html. With interpolation, we put the property name in the view template, enclosed in double curly braces: {{myHero}} This is used to insert the value into any string.
  • [] Binding is used to bind a value to a component’s property.
  • Note that only the input properties of a component can be updated using property bindings. An input property needs to be included in the the component’s ‘inputs’ array OR declared on the component – the former being sugar for the latter. To illustrate that, both ‘rating’ and ‘rating2’ below will transpile to the same JavaScript:

@Component({
templateUrl: ‘app/components/stars/stars.html’,
styles: [` .starrating { color: #d17581; }`],
selector: ‘auction-stars’,
inputs: [‘rating‘, ‘count’]
})

export default class StarsComponent implements OnInit {
count: number = 5;
rating: number = 0;
stars: boolean[] = [];
@Input() rating2: number = 0;


 

Summary:

  • Typically the TypeScript compiler is configured in the tsconfig.json file
  • The npm install command downloadws all dependencies listed in package.json.
  • In the w4 exercise, we used SystemJS to load and compile the applicaiton.
  • In the w4 exercise, we used SystemJS’s System.import(‘main.ts’) to load the main TypeScript file (and dependencies – if there were any).

 

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

npm notes

  • John Papa’s Tips for Running Node and NPM on Windows
  • package.json – Specifics of npm’s package.json handling
  • From npm wiki entry :
    “As of Node.js version 0.6.3, npm is bundled and installed automatically with the environment.[2] npm runs through the command line and manages dependencies for an application. It also allows users to install Node.js applications that are available on the npm registry.”
  • By default, npm modules are retrieved over the Internet from the public package registry maintained on http://npmjs.org. Modules may be installed through npm install:
             npm install [modileName]
  • From stackoverflow – To see what is installed use:
    npm list (for packages local to directory)
    npm list -g (global)

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.