AngularJs

Not for Medical Care
The author uses several software packages and programming languages to develop FPnotebook content
For convenience, a dozen pages in FPNotebook are dedicated to quick notes on content creation

Use a starter project
1. Angular-2 CLI (command line interface)
  1. https://github.com/angular/angular-cli
2. Angular quickstart
  1. https://github.com/angular/quickstart
IDE Setup
1. See VS Code (includes TS tasks, snippets)
Further setup from the command prompt
1. Delete the .git directory if cloned from quickstart or similar
2. Git init, git add -A (or .), and git commit -m (as well as git push to a repository)
3. Npm install
4. Typescript will be compiled when Running the launch task in VS Code
  1. Alternatively "Tsc" to compile the typescript files

Add the Augury plug-in (previously Batarang)
1. Allows visualization and navigation of angular components within Google Chrome
Chrome developer tools
1. Find the id of the object of interest in the UI Elements window (e.g. $0)
2. Typing the identifier (e.g. $0) in the console window will return the object and allow for drilling down
3. Modify the contents of the object using ng.probe($0).componentInstance.PROPERTY = NEW_VALUE
  1. Changes will take effect with ng.probe($0)._debugInfo._view.changeDetectorRef.detectChanges()
Other debugging tools
1. debugger;
  1. Place within code, and a break will occur at this point
  2. If tsconfig.json is set to use "sourceMap: true", then debugger will display the source typescript code
2. Json pipe: {{item | json}}
  1. Outputs the model item to the UI in readable json format
3. Logging
  1. Consider npm installing the angular2-logger
References
1. https://www.pluralsight.com/guides/debugging-angular-2-applications