Quick intro to Angular.js

Agenda

• Directives, filters, and services
• Controllers, scopes and data binding
• Dependency injection

Directives

• Reuseable components that can manipulate the DOM
• Angular comes with a set of built-in directives such as ngBind, ngModel, and ngView
• Example: http://jsfiddle.net/johnlindquist/9Ymvt/1/

Filters

• Format data to the way it should be displayed to the user

• Can be used in templates, services, directives, and controllers

• Angular comes with a bunch of built-in filters too, including currency, date, and limitTo

• Example: http://jsfiddle.net/sjmcpherso/5WnTA/

Services

• This is where the actual business logic is
• Services can be created with any a number of methods such as .factory, .service, and .provider
• Services can be injected to other services, directives, and filters
• Angular comes with a lot of built-in services like $http, $location, and $interval

Controllers

• Gets a scope injected dynamically
• Works with models and updates the scope, based on user interactions from the view
• Example: http://jsfiddle.net/U3pVM/8364/

Scopes

• Scopes are objects that hold the models for an application
• They allow to execute expressions in a context
• Scopes are arranged in hierarchical structure that mimics the DOM structure
• Each scope inherits from a parent scope with all scopes inheriting from $rootScope

Data binding

• Angular keeps models updated by listening to DOM events and updating models accordingly
• Views display updated models by being notified every time a model changes
• Example: http://jsfiddle.net/hmyZB/

Dependency injection

• Services can be injected to other services, directives, and filters
• Use the .config phase to configure services before they are created
• Example: http://jsfiddle.net/thomporter/zjFp4/1/

The End

Questions?