II. Technique: Angular 2 New Project

  1. 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
  2. IDE Setup
    1. See VS Code (includes TS tasks, snippets)
  3. 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

III. Technique: Debugging in Chrome

  1. Add the Augury plug-in (previously Batarang)
    1. Allows visualization and navigation of angular components within Google Chrome
  2. 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()
  3. 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
  4. References
    1. https://www.pluralsight.com/guides/front-end-javascript/debugging-angular-2-applications

IV. Technique: Angular-Bootstrap (old for angular 1)

  1. Website
    1. https://angular-ui.github.io/bootstrap/
  2. Preparation
    1. Use Angular 1.2.x versions (as of 4/26/2015)
    2. Angular-Bootstrap is the Bower package to install
    3. Add the ui-bootstrap-tpls.min.js file to the index.html
    4. Follow instructions for CSS modifications
    5. Follow instructions for adding "ui.bootstrap" to the angular module dependencies
  3. Restoring bootstrap.js functionality
    1. Navbar button functionality (collapsed and menu dropdowns)
      1. http://stackoverflow.com/questions/14741988/twitter-boostrap-navbar-with-angular-js-collapse-not-functioning#23918553
      2. Toggle button changes
        1. Remove data-toggle and data-target from the toggle button
        2. Add ng-init="isCollapsed" and ng-click="isCollapsed=!isCollapsed" to the toggle button
        3. Change the collapsed div to ng-class={collapse: isCollapsed}
      3. Dropdown buttons
        1. Add ng-class={open:ddBtn} ng-init="ddBtn=false" ng-click="ddBtn=!ddBtn"

Images: Related links to external sites (from Bing)

Related Studies (from Trip Database) Open in New Window