ANGULAR 2 - first look by John Papa

Property Binding

HTTP Services: Observable and Subscribe

Async Pipe: How Components code is simplified by it

Async Pipe can return Promise (so you can use ".then(f())") instead of Observable if you want

Routes: Defining route in decorator @RouteConfig

Routes: Declaring Routing Directives in @Component

Routes: Use Routing in HTML

The main A2 imports

import { Component } from 'angular2/core';

import { HTTP_PROVIDERS } from 'angular2/http';

import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

import 'rxjs/Rx'; // load the full rxjs

Use Routing for Menu with its Content

ANGULAR 2 - a fantastic post about change detection (link)

http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

ANGUALRJS - force onCahnge event on init of select

http://stackoverflow.com/questions/24221464/how-can-i-make-ng-init-to-trigger-ng-change

http://stackoverflow.com/questions/30846190/ngchange-is-called-when-model-changed-programmatically

ANGULARJS - how dynamically set templateUrl to derective

emanuel.directive('hymn', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           // some ode
       },
       templateUrl: function(elem,attrs) {
           return attrs.templateUrl || 'some/path/default.html'
       }
   }
});

 <hymn template-url="contentUrl"><hymn>

http://stackoverflow.com/questions/21835471/angular-js-directive-dynamic-templateurl

ANGULAR 2 - domain models approaches & modeling data and state & presentation model

Modeling data and state in Angular application (a good explanation)
http://joelhooks.com/blog/2013/04/24/modeling-data-and-state-in-your-angularjs-application/

Domain models and dependency injection
https://auth0.com/blog/2015/09/17/angular-2-series-part-2-domain-models-and-dependency-injection/

Presentation model (in Angular this function lays on $scope)
http://martinfowler.com/eaaDev/PresentationModel.html

Code organization in large Angular and JavaScript applications
http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript

ANGULARJS 2 - Webinar video of Building Awesome Apps with Firebase and Angular 2

Building Awesome Apps with Firebase and Angular 2

https://www.youtube.com/watch?v=A1dpvZqoM_w

My notes:

Angular 2 Cool features:
https://github.com/angular/angularfire2
https://www.npmjs.com/package/angularfire2

In Angular 1 promises guaranteed that you will receive the response, but only once. Working with Firebase needs response working as STREAMS.

Zones + Change Detection
Zones - Asynchronous execution context. It let you know when the synchronous action are completed. Also Zones will allow to have continuous stack-trace of errors.
Change Detection - will take a look at what is changed and it knows what to do with it.

Pipes
It is like Filters in Angular 1, but now they can manage state.
You can take URL where is your data and pipe it, so that it could be used in your template. When data changes then your its value automatically changes in your template.

Observables
Promises will give you callback just one time. Observables will fire off as a continuous stream, it is like a promises but they continue to fire off.

Installation
npm install --save angularfire2
npm install --save angular-cli

ng new my-awesome-app
cd my-awesome-app
ng serve

1. Instantiate our Firebase URL
For instance AngularfireDemoApp is a component. Everything in Angular 2 is based on Components.

bootstrap(AngularfireDemoApp, [
   defaultFirebase('https://FB-URL.firebase.com'),
   FIREBASE_PROVIDERS
]);

2. Push data to Firebase

return PromiseObservable
    .create(this._fbRef.child('message').push({
        message,
        user
}));


Pipes - transform data as input a desired output

Statless pipes - transform data without remembering or detecting anything about it
Stateful pipes (async) - receive a Promise or Obsorvable as input, maintain a subscription to that

Stateful pipes (async) - example of use Async Pipes in html template:

'<div *ngFor="#message of messages | async"><div>'

sadfsadf

ANGULARJS - SVG example (link on Github)

https://github.com/teropa/metabubbles?platform=hootsuite

ANGULARJS - angular + breeze application with saving data into Local Storage

Angular application could save Work In Process files (WIP) in Local Storage. The Breeze framework is widely used for this purpose. John Papa gives good explanation how it works:
https://www.youtube.com/watch?v=JLij19xbefI

ANGULARJS - John Papa Angular style guide in pdf format

https://mayflower.de/wp-content/uploads/2015/11/AngularJS-Poster.pdf

JAVASCRIPT vs ANGULARJS - copy object by value, not by reference

In JavaScript copy of object is done by reference:
var newObj = Object.create(oldObj); //Modification in newObj would be reflected in oldObj.

JavaScript solution 1: Inline deep copying (if you know its structure)
var newObj = {
   name: source.name,
   type: source.type
}

JavaScript solution 2: Use JSON parse (it could be more slower)
var newObject = JSON.parse(JSON.stringify(oldObject));

Angular way:
var newObject = angular.copy(oldObject);

ANGULARJS - clean code patterns from John Papa

Tools:
WebStorm (prefered), Sublime, Visual Studio, Brackets, Atom

Repository:
https://github.com/johnpapa/ng-demos

Principles:
Separation of Concerns: 1 Component, 1 Role, 1 File
LIFT:
Locating our code is easy
Identifying code at a glance
Flat structure as long as we can
Try to stay DRY

ANGULARJS - Pluaralsight lessons on Angular from John Papa

In this lessons there is section about how to share common data across controllers.

https://www.pluralsight.com/courses/build-apps-angular-breeze-part2

ANGULARJS - Sharing Data in an Angular Controller or an Angular Service, by John Papa

http://www.johnpapa.net/sharing-data-in-an-angular-controller-or-an-angular-service/

ANGULARJS - AngularJS Popup Window Social Authentication Directive, login

http://angularjs.posthaven.com/angularjs-popup-window-social-authentication-directive
AngularJS Auth Facebook Login Directive full code in repo: 

https://github.com/sdeering/angularjs-auth-facebook-login-directive

ANGULARJS - Promises in AngularJS explained by pictures

Here is funny explanation of AngularJS promises, follow the link:
http://andyshora.com/promises-angularjs-explained-as-cartoon.html

GULP - how Gulp can work with Angular template cache

http://www.johnpapa.net/angular-and-gulp/

GULP - how to configure Gulp to use Sass instead of Less

In order to use Sass instead of Less with Gulp follow this instruction:
https://www.npmjs.com/package/gulp-ruby-sass

and here:
https://github.com/sindresorhus/gulp-ruby-sass

Here is the gulp task for Sass (instead of Less) in HotTowel generator for Angular project:

var sass = require('gulp-ruby-sass');

/** * Compile less to css * @return {Stream} */gulp.task('styles', ['clean-styles'], function() {
    /*log('Compiling Less --> CSS');
    return gulp        .src(config.less)        .pipe($.plumber()) // exit gracefully if something fails after this        .pipe($.less())//        .on('error', errorLogger) // more verbose and dupe output. requires emit.        .pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))        .pipe(gulp.dest(config.temp));*/
    log('Compiling Sass --> CSS');
    return sass(config.sass)
        .pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))
        .pipe(gulp.dest(config.temp));
});
gulp.task('sass:watch', function () {
    gulp.watch(config.sass, ['sass']);

});

ANGULAR - Angular style guide from John Papa

Angular style guide from John Papa (https://twitter.com/john_papa)
https://github.com/johnpapa/angular-styleguide

Angular course from John Papa:
https://www.pluralsight.com/courses/angularjs-patterns-clean-code

ANGULAR - generator-hottowel. Nice angular generator for Gulp (link)

https://github.com/johnpapa/generator-hottowel

PLAY - Play with Angular example

http://www.toptal.com/java/building-modern-web-applications-with-angularjs-and-play-framework
http://stackoverflow.com/questions/26883056/angular-route-vs-scala-play-framework-route