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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s