From IT Skills
Jump to: navigation, search

Shaping up with Angular.js




uses TypeScript

problems on mobile[edit]

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

back button[edit]

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)"


в релиз вышла шестая версия с интеграцией webpack 4


without cli[edit]


  • npm install -g @angular/cli

You develop apps in the context of an Angular workspace. A workspace contains the files for one or more projects. A project is the set of files that comprise an app... When you generate an app (ng generate application my-other-app), the CLI adds folders under projects/


iOS: 2 most recent major versions - BAD!!!, iOS versions#9 is needed

Property binding[edit]

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]

vendor prefixes to your #Style object


Value providers and Factory providers


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

Advantages and Disadvantages of Model Driven Forms[edit]

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]

Reactive forms[edit]

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]


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
  • routes to have:
        { path: '', redirectTo: '<default>', pathMatch: 'full' },
        { path: '**', component: a404component },


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?

Pipe Async[edit]

use the async pipe in the template and bind to the promise directly

вы обычно должны в определенный момент отписываться, чтобы освободить память

Dynamic DOM[edit]

Typical application[edit]

has app.service.ts that holds many services injected


App view[edit]


  • @angularclass/hmr

dependency for @angularclass/hmr but has error that corrected here: use NGRX state management (similar to redux)

Deployment view[edit]

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?

Pages in category "Angular"

The following 8 pages are in this category, out of 8 total.