Presentation - mdanter/farm GitHub Wiki

##What we'll cover##

• Setup the app
• Controllers, Scopes, View binding
• Factories

##PROs:##

• It's FAST (Except for large amount of bindings)

• It brings QUALITY (Both in terms of code structure and robustness)

• puts a heavy emphasis on

• Separation of Concerns

  • HTML - STRUCTURE, UI
  • JS - BEHAVIOR, LOGIC
  • CSS - PRESENTATION

##AngularJS##

• returns things to where they belong in their natural forms
  • HTML? Build UI Declaratively!
  • CSS? Animations!
  • JavaScript? Use it the plain old way!

##What we'll cover##

• Setup the app
• Controllers, Scopes, View binding
• Factories (The service layer)
• Directives & Filters
• The App

##To get started:##

<div data-ng-app="app">
	<div data-ng-view=""></div>
</div>

##Setup the app##

• Define container for view templates

• Module Definition

• Modules encapsulate the app code into a namespace

• Dependency inject dependencies, by variable name.

• No Global Variables (but there are constants)

• Routing logic, controller per route, Templates

##Controllers##

• Controllers only prepare the model for the view and respond to events
• Controllers do NOT manipulate the DOM
• The $scope variable is where the view consumes variables from, best practice is to use ViewModel Pattern and Controller as syntax

###More nerd stuff###

• Controllers are re-created on every request
• Scopes are hierarchical
• There is only one $rootScope and every scope inherits from it.
• Some AngularJS constructs create a new scope, that inherit from the controller's $scope.
• Scope is a regular POJO. Your models are regular Javascript objects
• All AngularJS specific variables and functions start with $ to not get serialized

###Views & Binding###

• Data binding ({{}} and data-ng-model)
• Some attributes/elements also change HTML, such as: data-ng-repeat

##Factories##

• Are where the http get/post/put/delete calls go
• They have only one instance
• Promises $q - are Angular library like jQuery Deferred
• $http.get is almost equivalent to $.get

##Advanced Topics## To try after mastering the basics: directives, filters