Angular 2.0 learnings

This contains links and project related to my learning of Angular 2.0.

Building a new Angular2.0 app
I followed this youtube vid and built a basic to do app. See the plunker here for what I built. Its interesting because its a good guide and written in es5 not typescript.

But I think its out of date (using alpha angular js library and component syntax seems to have evolved) so next I'll follow the quickstart guide on angulars site.

...and here's my implementation of angulars quickStart implementation (still ES5). I included a basic DI of a service which is used.
It works but I know there's more elegant ways to accomplish DI.

Next up, I built the Tour of Heroes tutorial on the angular 2.0 site. Its here in my github. The tutorial on the angular2 site does not include routing but John Papas github implementation does. So next is to add some routing to this app.




Strategies for upgrading existing apps
Some useful links I came across for dealing with 1.x apps:



Useful angular 2.0 learning links:



Key points

  • A Decorator is a function that adds metadata to a class, its members (properties, methods) and function arguments. 
    • Implemented in typescript and proposed for ES7. 
    • e.g. @Component, @Input, @RouteConfig
    • position immediately above the thing it decorates

Typescript
I built the Tour of Heroes tutorial using typescript (you could also use es5 or es6). For some dev orgs it will be some matter of debate if they will use es6 or typescript. Angularjs 2 is written in typescript, most tutorials, examples will likewise so adoptions will be easier.
Here are my key notes about typescript.

  • is a superset of es6, adds some new types, annotations, interfaces
  • allows you to annotate variables and functions with type parameters "Type annotations in TypeScript are lightweight ways to record the intended contract of the function or variable"
  • types: boolean, number, string, array, enum, any, void
    • enum, any and void are new to typescript; any represents any type
  • Interfaces; typescript supports defining an Interface e.g. interface Person { first: string } and you can then expect that as a param into a function. As long as the object passed has those properties then its accepted: "In TypeScript, two types are compatible if their internal structure is compatible." ie "duck typing" 
    • can declare properties and functions both
    • can declare interfaces for classes but also functions, arrays, objects
    • e.g. I could define an interface for an array and then define a variable of that interface type
    • classes can implement interfaces (just like java) where the interface could define properties/functions the class must implement; but only the public api of the class (not private)
    • interfaces can extend interfaces and use multiple inheritence
    • classes can implement multiple interfaces
  • functions: typescript can check
    • if params should should not be passed
    • if params are of correct type e.g. string vs int
  • classes;
    • can add property annotations to indicate public (default) or private properties as well as parameters
    • accessing private props illegally results in error
    • can "implements" one or more interfaces (as well as ES6 extend)





Comments

Popular posts from this blog

deep dive into Material UI TextField built by mui

angular js protractor e2e cheatsheet

react-router v6.4+ loaders, actions, forms and more