Introduction to

Tyler Lesperance - @tylerama9

What is MVC?

Is AngularJS MVC?

Setting up an App

Data Binding

Filtering

Dependency Injection

Directives

Resources

The end

Meet AngularJS

Meet AngularJS

Started by Google in 2009

Open source web application client side framework

Latest stable version is 1.2.24 (RC: 1.3.0)

1.3 dropping support for IE8

I love AngularJS

What is MVC?

Is AngularJS MVC?

Setting up an App

Data Binding

Filtering

Dependency Injection

Directives

Resources

The end

Meet AngularJS

What is MVC?Model- Data- Typically a JavaScript class or classes

View- HTML/DOM- What the user interacts with

Controller- JavaScript class that reacts to view interactions- Angular uses these a bit differently

What is MVC?

Is AngularJS MVC?

Setting up an App

Data Binding

Filtering

Dependency Injection

Directives

Resources

The end

Meet AngularJS

Is AngularJS MVC?Most would consider it MVVM

“Controllers” in Angular are more of a View Model

Contains the model and interactions for the current view

If a controller is not present in the view, the view does not have immediate access to the model

What is MVC?

Is AngularJS MVC?

Setting up an App

Data Binding

Filtering

Dependency Injection

Directives

Resources

The end

Meet AngularJS

Setting Up an AngularJS AppNO DEPENDENCIES!

Going to create a shopping list with one view and one controller

Let’s get into some code!

What is MVC?

Is AngularJS MVC?

Setting up an App

Data Binding

Filtering

Dependency Injection

Directives

Resources

The end

Meet AngularJS

Two-Way Data BindingModel and view are always in sync

Angular does this so well

More code! Yay!

What is MVC?

Is AngularJS MVC?

Setting up an App

Data Binding

Filtering

Dependency Injection

Directives

Resources

The end

Meet AngularJS

Using Angular Data FiltersAngular has built-in data filters

date filter is super useful

currency is good too

Super easy to make custom ones…but we won’t

What is MVC?

Is AngularJS MVC?

Setting up an App

Data Binding

Filtering

Dependency Injection

Directives

Resources

The end

Meet AngularJS

Dependency InjectionAngular has a bunch of modules (services) that you can use in your app

Each service must be injected into wherever you want to use it

$timeout is Angular’s wrapper for window.setTimeout()

Back to some code fun and games

What is MVC?

Is AngularJS MVC?

Setting up an App

Data Binding

Filtering

Dependency Injection

Directives

Resources

The end

Meet AngularJS

Directives?Angular’s primary vehicle for DOM manipulation

Initiated as a custom element, attribute, or comment

We’ve already seen some built into Angular - ngRepeat and ngShow

Just for fun, let’s make a custom directive

What is MVC?

Is AngularJS MVC?

Setting up an App

Data Binding

Filtering

Dependency Injection

Directives

Resources

The end

Meet AngularJS

Additional Resourceshttp://www.angularjs.org

Shaping Up With AngularJS at Code School

A Better Way To Learn AngularJS at Thinkster.io

John Papa

What is MVC?

Is AngularJS MVC?

Setting up an App

Data Binding

Filtering

Dependency Injection

Directives

Resources

The end

Meet AngularJS

Fin.

Thanks! Questions?