AngularJS Workshop Notes April 2nd, 2015

  • Check if Karma is installed globally
    npm list -g --depth=0
  • The Master/Detail View paradigm is the most common real-world application for MV* frameworks
  • The organization of your code should show intent and be self-documenting…
    • node_modules
    • src (project files / root … includes index.html and favicon.ico)
      •  app
        • individual app
          • JS files for controllers, templates, etc.
        • main (main screen / ui)
        • common (shared across features)
          • models
          • services
      • assets
      • vendor (libraries)
    • test
  • Routes allow us to directly navigate to a specific state within our app.  ngRoute is fine for simple routing, but ui-router is exponentially more powerful, turning your app into a state machine
  • Instantiate app on HTML tag (bootstrapping) … <html ng-app=“myMainAppName”>
  • If you need something from your state to persist on route change then you need to inject it into your model or service
  • Services persist through the life-cycle of app.  Services are shared between routes.  Service … then inject into controller.
  • Use LocalStorage to save states in case of page refresh. (Angular Storage library)
  • Views are the DOM after it has been compiled by Angular
  • Services can control services. Services are essentially the Model. Services provide common functionality across your entire app.  Keep controllers skinny so your models can be fat.  You can start in a controller and then promote to a Model as needed. .factory() method is a way of creating a service.
  • Promises are like beepers at restaraunts.  They allow us to perform asynchronous operations.  Their the inverse of callbacks.  Three main methods for promises are .then, .catch, and .finally.  You can control promises with the $q service.
  • $http service … The $http service enables communication with remote servers over the HTTP protocol.  It has convenience methods that are modeled after the RESTful verbs (PUT, etc.). This is very convenient!  The $http service is built on top of the promise api.
  • Directives allow us to express custom functionality through custom HTML tags and attributes.  Directives essentially take semantic markup to a whole new level. It allows us to turn our HTML into a DSL (Domain Specific Language).  Directives are very powerful but can be overwhelming to learn.