Click here to load reader
Upload
tyler-lesperance
View
127
Download
4
Embed Size (px)
DESCRIPTION
Introduction to AngularJS presentation given at the September Gulf Coast Dot Net Users Group meeting. Goes over basics in AngularJS such as app setup, controllers, filters, dependency injection, data binding, and directives. Code is on github: https://github.com/tylerama/IntroToAngular
Citation preview
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?