Practice Management Book

http://www.fpnotebook.com/

AngularJs

Aka: AngularJs
  1. 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
  2. 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
  3. 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"

You are currently viewing the original 'fpnotebook.com\legacy' version of this website. Internet Explorer 8.0 and older will automatically be redirected to this legacy version.

If you are using a modern web browser, you may instead navigate to the newer desktop version of fpnotebook. Another, mobile version is also available which should function on both newer and older web browsers.

Please Contact Me as you run across problems with any of these versions on the website.

Navigation Tree