Angular Template Syntax

Posted on 2017-11-13

Template reference variable is

often a reference to a DOM element within a html template.
often a reference to an Angular component
a directive
a web component

···
@Input() hero: Hero;
@Output() deleteRequest = new EventEmitter();
···

···
@Component({
inputs: [‘hero’],
outputs: [‘deleteRequest’],
})
···

Guide

Posted on 2017-09-07

Frontend

I have been asked that what are the resources I use to keep me up to date in the world of front end or even the world of dev.
I think medium.com is a awesome place that full of good and ‘up to date’ contents in the dev world.
Famous publication on medium.com like ‘freecodecamp’, ‘hackernoon’ all worth to check out.
Tags on medium.com like ‘Angular’, ‘Front End Development’, ‘Front End Web Development’, ‘Frontend’, ‘JavaScript’, ‘Web Development’ definitely worth to be followed.

Just saw this post yesterday, which is also useful.
https://hackernoon.com/the-best-youtube-channels-for-developers-4a08677f1ac1
I have learned a lot about frontend dev from the courses and videos provide by Wes Bos and Scott from LevelUpTuts.

Angular

https://blog.angular.io/
https://github.com/angular/angular/blob/master/CHANGELOG.md
Highly Recommended seperate your application into different ngModules which being ‘imported’ into the app.module.
NgModule Guide on angular.io describe what ngModule do, what are the different types of ngModule, what should be put into different types of ngModule.
http://angular.io/guide/ngmodule
Good example I found is the sample application on
http://angular.io/guide/router
(Also please do not create ‘one page’ component.
Make sure you do have a look at the design or wireframe of the screen, think about how to seperate the page to be small components.)

Angular Modules

We create Module first
Test, build, publish to our npm server.
Then create web application
npm install the module in the web application, import those modules into app.module.ts of the web application afterwards.
So we can reuse modules on different web applications.

Primeng + Ultima

We use primeng ui libaray
https://www.primefaces.org/primeng/#/
https://github.com/primefaces/primeng
Ultima CSS Theme
https://www.primefaces.org/ultima-ng/#/
Alternatives
https://www.angularjs4u.com/angularjs2/angular-2-admin-dashboards/
Also a few ui librares on
https://angular.io/resources

How to create a module:

Requisite knowledges:

Javascript/ECMAScript 5
ECMAScript 2015/6, ESM (babeljs.io), UMD
Typescript
@NgModule
Tooling: Systemjs, Webpack, Rollup
npm install and publish, npm scripts, package.json
AOT and Treeshaking,AOT vs JIT, tsc, ngc, @angular/compiler

We create Angular Module based on a PR of Angular/Angular on github.
PR: https://github.com/angular/angular/pull/16486
Guide: https://github.com/angular/angular/blob/fe1d5c9db10ad8d09decbc9bab7ae2b191dc5cf3/aio/content/guide/third-party-lib.md
Seed-project:
Please spend time to play around with this seed.

Change your local to use NPM server
run ‘npm config set registry’
run ‘npm config get registry’ to confirm.
cd your-module

rm -rf .svn # Linux or OS/X (bash)
rd .svn /S/Q # Windows

Change the README file to be the description your module.

Replace ‘quickstart-lib’ everywhere to be your-module’ in the project.
Rename ‘quickstart’ in package.json in the root folder to be module name.
Replace ‘LibModule’ everywhere to be the module name you want in the project.
delete lib.component.ts, lib.component.spec.ts, lib.component.html, lib.component.css files
delete import statment and entry of ‘LibComponent’ from module.ts and index.ts
(or rename all ‘lib.component’ to be the name of the file you created for your component, rename ‘LibComponent’ to be the class name of your component , and dont forgot to rename it inside of module.ts and index.ts )
delete lib.service.ts, lib.service.spec.ts files
delete import statement and entry of ‘LibService’ from module.ts and index.ts
run ‘npm install’ to download angular libraries and third party dependencies.
Adding more Angular or third party dependencies.
1). e.g. npm install @angular/forms@4.2.6 —save-dev (we currently lock all angular libraries to be version 4.2.6)

2). open package.json, copy the library entry you have installed inside of devdependencies to peerdependencies.
https://nodejs.org/en/blog/npm/peer-dependencies/
3). Adding entry inside of the ‘map’ property of your-module\trunk\src\demo\systemjs.config.js for the demo site to use.
For third party denpendency, need to add an entry inside of ‘packages’ property as well.
e.g.
thirdpartylibrary: { defaultExtension: 'js' },

which means import statements like

import { whatever } from 'thirdpartylibrary';

will find code files based on the ‘packages’ property settings inside of the location which based on the ‘map’ property settings of the systemjs.config.js.

To understand the configs inside of systemjs.config.js
https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

Now you can do angular dev work inside of lib folder. (Create sub ngModules, components, services, pipes and directives inside of lib folder)
We use the small Ng application inside of the demo folder to test the module you create.

If the step 5 works fine, the module you created already being imported into the demo application.
Feel free to use components, pipes and directives you created in the demo application for testing.

run ‘npm start’ , Demo site will be served, time to test your work.
We use another small Ng application inside of the integration folder for testing the process from
1). build your module
2). generate build output inside ./dist folder
3). cd into integration, npm install the build output from ./dist folder to this integration testing site.
which is the same process for using the module you created on the web application.
4). run e2e test for both JIT and AOT.
(e2e testing scripts inside of ./integration/e2e/)

( 0. Dont forgot import your module into the integration site, using components, pipes and directives you created inside of integration site.)
Run “npm run integration” for triggering this processs.

Please read ‘scripts’ part of package.json in the root folder plus the ‘scripts’ part of package.json in the integration folder to understand.
More details can be found on the README.MD inside of integration folder.
Difference between ‘demo site’ and ‘integration site’

Demo site using the code inside of lib folder.
Integration site npm install the build output inside ./dist folder.
Guide for AOT
https://angular.io/guide/aot-compiler
https://angular.io/guide/metadata

run ‘npm run release’
1). npm version patch 1.0.0 -> 1.0.1
npm version minor 1.0.0 -> 1.1.0
npm version major 1.0.0 -> 2.0.0
2).&& npm run build -> node build.js -> build the module and package.json will be copied to ./dist/.
3). && node ./tools/cleanup.js -> delete the ‘scripts’ and ‘devdependencies’ of the package.json inside the ./dist/
4). && npm publish ./dist” -> publish everything inside ./dist/ as a npm/node package to npm server.

To confirm the package has been published to npm server, access ‘http://packages/‘

for authorization or authentiation issue of the npm server for ‘npm publish’
run ‘npm adduser’
type username and password.
devsolid-mumps
We dont checked in node_modules folder for modules.
Please ‘svn ignore’ the node_modules folder.
More details about svn, please ask Dmitriy.
We use angular-cli to create Ng Web Application.
run ‘npm install your-module@X.X.X —save’
We checked in all node_modules folder on SVN server just for Ng web application.

NPM Server

https://github.com/rlidwka/sinopia
https://github.com/verdaccio/verdaccio
proget
nexus

ngrx

https://auth0.com/blog/managing-state-in-angular-with-ngrx-store/

Performance Improvement

lazy loading module + preloading module + aot + treeshaking

PWA for web application running in mobile devices.

pwa check list
PWA - progress web app - google

Resources

https://github.com/AngularClass/awesome-angular

Style Guide

https://angular.io/guide/styleguide

Courses

https://www.udemy.com/user/maximilian-schwarzmuller/
https://www.udemy.com/user/moshfeghhamedani/

Tooling

emmet
Totally Tooling Tips(https://www.youtube.com/playlist?list=PLNYkxOF6rcIB3ci6nwNyLYNU6RDOU3YyL)

cmder(alias samples)

al=subl D:\cmder\config\user-aliases.cmd
clone=D: $t cd D:\MyProject\ $t md $1 $t cd $1 $t git clone https://github.com/$1/$2 $t cd $2 $t subl .
gs=git status
gsb=git status -sb
gaa=git add .
gcmsg=git commit -m "$*"

Javascript

douglas crockford youtube videos
you don’t know js

ES 6

http://exploringjs.com/es6/
https://es6.io/
https://babeljs.io/learn-es2015/
(es 6 = es 2015)
(es 7 = es 2016)
(es 8 = es 2017)

Typescript

https://www.typescriptlang.org/
(Typescript is not C# , Typescript is not Java, Typescript will be compiled to Javascript)

Microservices

Posted on 2017-08-03

Characteristics of Microservices

Componentization via services
replace independently, upgrade independently
Organized around business capabilities
team orgination thing
Products not Projects

Smart endoints and dumb pipes
pipe just for delivery message

SOA - ESB - route message , translate message
Microservices - pipe must be dumb, endpoint/application must be smart.

Decentralized Governance
Decentralized Data Management
no central group, miniimum connectivity

each service gets its own data storage and does not share that data directly with anybody else.

all sharing has to go throught the services that wrap the data

Infrastructure Automation
CI CD.
Design for failure
Chaos monkey

handle failure.

Evolutionary Design

Monolith	Microservice
Simplicity	Partial Deployment
Consistency	Availability
Inter-module refactoring	Preserve Modularity
	Multiple Platforms

Command Query Responsibility Segregation
Event souring

How to build a distributed Angular library

Posted on 2017-06-27

Angular PR: WIP - AIO: Third party library guide

Angular Library QuickStart

How to build Angular Component Libraries by Google Angular Team

Distributing an Angular Library - The Brief Guide

How to build and publish an Angular module

Visual Studio Code Shortcuts

Posted on 2017-03-01

The code formatting is available in VS Code through the following shortcuts:

On Windows Shift + Alt + F
On Mac Shift + Option + F
On Ubuntu Ctrl + Shift + I
Alternatively, you can find the shortcut, as well as other shortcuts, through the search functionality provided in the editor with Ctrl +Shift+ P (or Command + Shift + P on Mac), and then searching for format code.

https://aka.ms/codeit VS Code
https://aka.ms/jp-free Free Azure trial
https://aka.ms/vsc-node Node Extensions
https://aka.ms/ng-essentials Angular Essentials
https://aka.ms/jp-codeext Extension Marketplace

https://aka.ms/jp-code-mackeys Keyboard Shortcuts for macos
https://aka.ms/jp-code-winkeys Keyboard shortcuts for Windows

test