Shaping up with Angular.js

Version[edit | edit source]

browser-support

2[edit | edit source]

uses TypeScript

• Angular animations are built on top of the standard Web Animations API... a polyfill is required for iOS versions#7.1+
• Category:HtmlCss_guide#<template> requires iOS versions#7

problems on mobile[edit | edit source]

• in Ripple angular2-polyfills.js.canPatchViaPropertyDescriptor() returns false but seems to return true
  • in KitKat works good

back button[edit | edit source]

problems in angular routing

• window.history.back()
  • in Ripple returns but do not refresh page
  • in KitKat "Error: Uncaught (in promise): ObjectUnsubscribedError at resolvePromise (angular2-polyfills.js:602:32)"

Property binding[edit | edit source]

In Angular 1.x two-way data binding was the default way of binding. However ... Angular 2 does not have two-way data binding by default, instead it uses events to notify Model that something is changed

which directive will be updated first: Parent or Child?.. In Angular 2, you know that Parent will always be updated before Child, and we also know that a property cannot be updated more than once... Angular tries to make sure that the setter you define for you component only updates the view state of this component or its children, and not the application model.

Style object[edit | edit source]

vendor prefixes to your #Style object

dependency-injection[edit | edit source]

Value providers and Factory providers

Forms[edit | edit source]

• touched or untouched
• valid or invalid
• pristine or dirty

Advantages and Disadvantages of Model Driven Forms[edit | edit source]

We can now unit test the form validation logic !.. The ControlGroup and Control classes provide an API that allows to build UIs using a completely different programming style known as Functional Reactive Programming... its possible to subscribe to the form stream of values using the Observable API

Using FormBuilder[edit | edit source]

Reactive forms[edit | edit source]

Reactive forms are synchronous. Template-driven forms are asynchronous. It's a difference that matters. In reactive forms, you create the entire form control tree in code. You can immediately update a value or drill down through the descendents of the parent form because all controls are always available. Template-driven forms delegate creation of their form controls to directives. To avoid "changed after checked" errors, these directives take more than one cycle to build the entire control tree. That means you must wait a tick before manipulating any of the controls from within the component class.

Dynamic forms[edit | edit source]

Router[edit | edit source]

By default, the router reuses a component instance when it re-navigates to the same component type without visiting a different component first. The parameters can change between each re-use.

• BaseHrefWebpackPlugin may be better than APP_BASE_HREF

• navigating from browser should be coordinated with historyApiFallback or apache configuration

• routes to have:

      { path: '', redirectTo: '<default>', pathMatch: 'full' },
      { path: '**', component: a404component },
  

Directives[edit | edit source]

whenever we make directives available to our view, they will get attached to any element that matches their selector

There are three kinds of directives in Angular:

• Components—directives with a template.
• Structural directives—change the DOM layout by adding and removing DOM elements.
• Attribute directives—change the appearance or behavior of an element, component, or another directive.

You can apply many attribute directives to one host element. You can only apply one structural directive to a host element. The reason is simplicity. Structural directives can do complex things with the host element and its descendents. When two directives lay claim to the same host element, which one takes precedence?

Dynamic DOM[edit | edit source]

http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468

Typical application[edit | edit source]

has app.service.ts that holds many services injected

Deployment view[edit | edit source]

uses Core-js, Zone.js, Rxjs

eliminate the need for jQuery, if possible...Angular's jqLite should be able to do a lot

How to prepare release version with SystemJS and Gulp?