Skip to content

Instantly share code, notes, and snippets.

@roscopecoltran
Created September 15, 2018 07:30
Show Gist options
  • Save roscopecoltran/22ba69c7a1d081db720a699c29da5610 to your computer and use it in GitHub Desktop.
Save roscopecoltran/22ba69c7a1d081db720a699c29da5610 to your computer and use it in GitHub Desktop.
Angular-Cheat-Sheet

Angular.js basic concepts cheat sheet

What is the Scope ?

  • An execution context for expressions
  • An object which is a reference to the application model
  • It binds the view to the controller
  • Instanciated by the $rootScope
  • Scopes are arranged in hierarchical structure which mimic the DOM structure of the application
  • Scopes can watch expressions and propagate events.
  • It has the methods: $on, $emit, $broadcast, $apply, $applyAsync, $digest, $destroy, $new, $watch, $watchGroup, $watchCollection, $eval, $evalAsync

What is a Directive ?

  • Allow to manipulate the DOM in 4 possible ways (link, transclude function, $compile and controller)
  • There is 4 types: Element, Attribute, Class and Comment. But best practice is only to use the 2 firsts.
  • Can have an isolated Scope or not
  • If we need more than just manipulate the DOM, we can add a Controller to have some logic
  • Avec: link (arguments: scope, element, attrs, ctrl, transcludeFN of the DOM node)
  • Best practice: Don't use Controller, only use Directives with Controllers inside of them.

What is a Service ?

  • Is instanciated with .factory('NameOfTheService', function([Dependencies]) {[Code here]}); method
  • .factory() is not configurable
  • .constant() is configurable (declare a constant in your app like your server root URL for API calls)
  • Is a Singleton (design pattern) accessible by the Dependency Injection (DI)
  • Is used to organize and share code across the application

What is a Controller ?

  • Attached to a DOM element with the Directive ng-controller (see ngController on the Doc)
  • Used to augment the Scope of Angular
  • Allow to setup the inital state of the $scope object
  • Add behavior to the $scope object
  • Angular will instantiate a new Controller object, using the specified Controller's constructor function.
  • New child scope will be created and made available as an injectable parameter to the Controller's
  • If the controller has been attached using the "controller as" syntax then the controller instance will be assigned to a property on the new scope.

What is a Promise ?

  • Replace JS callbacks
  • Easier to use and to follow the code logic flow. Functions are cleaner.
  • 99% times used inside a Directive
  • Lib promise: Bluebird (recommanded with NodeJS)
  • $q is Angular's promise lib (fork of the "q" lib )
  • A function is said 'then-able' when can use '.then' method instead of callbacks
  • $resource & $http are Promises (used to retrive and send data to an API endpoint for exemple)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment