AngularJs

Aka: AngularJs

advertisement

II. Precautions: Non-Medical

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

III. 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

IV. 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/debugging-angular-2-applications

V. 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)

These images are a random sampling from a Bing search on the term "AngularJs." Click on the image (or right click) to open the source website in a new browser window. Search Bing for all related images

Related Studies

Related Topics in Medical Informatics

advertisement