AngularJS
a brief intro
Dave Ackerman
- UX Engineer at Modus Create
- Focused on HTML, CSS, JS = UX.
- Not a CS major.
- @dmackerman
Why Angular?
Quick Wins
Out of the box, Angular makes you productive.
Client Side MVC
- Model - Data that comes from your REST API. These are first class javascript objects.
- View - Just HTML, extended with Directives.
- Controller - Fetches/sets data on your $scope. Queries the API. Provides client side validation. Business logic.
2-Way Data Binding
Fundamental principal within Angular
// controller
$scope.name = "Dave"
$scope.setName = function() {
$scope.name = "John"
}
// view, no DOM manipulation
<p>{{name}}</p>
<button ng-click="setName()">Change name to John</button>
Client Side Routing
- Easy to use routing system.
- Handles wildcards.
$routeProvider .when('/cars', { templateUrl: 'views/cars.html', controller: 'MainCtrl' })
.when('/cars/:carId, {
...
})
.otherwise({ redirectTo: '/' });
Other Quick Wins
- Simple dependency injection.
-
Directives (custom declarative HTML extensions)
-
Services/Factories - extracting application logic.
-
Powerful filters for manipulating and displaying data.
-
Plays nice with Promises.
-
Super active, open source community.
- Entire framework is extremely unit test friendly.
You will write less code.
"Thinking in Angular"
say what?
jQuery
is imperative
<div id="loginButton" class="button login">Login</div>
Angular
is declarative
<sidebar-button action="login" />
Don't manipulate the DOM.
Manipulate your data instead.
Let Angular's data binding do the DOM work for you.
Controller
Imperative behavior
function MyCtrl ($scope) {
$scope.name = "Dave Ackerman";
$scope.setName = function(name) {
$scope.name = name;
}
}
Scope
The glue
$scope.name = "Dave Ackerman"
Scope
The glue
$scope.name = "Dave Ackerman"
View
Declarative
<div ng-controller="MyCtrl">
Hello, {{name}}
<button ng-click="setName('John')">Set name to John</button>
</div>
View
Declarative
Declarative
<div ng-controller="MyCtrl">
Hello, {{name}}
<button ng-click="setName('John')">Set name to John</button>
</div>
Extract repeatable
functionality and
data into Services.
(will demo)
Let's write some stuff.
- Get bootstrapped by understanding file structure.
- Use a built in Angular directive to display data.
- Add some basic functionality on top of this data.
- Understand Angular's basic routing system.
- Extract app data into a Factory.
- Write a very simple directive.
Resources
- egghead.io
- angular-ui
- sample angular app
- #angularjs on IRC (freenode)
Intro to AngularJS
By dmackerman
Intro to AngularJS
Small intro to AngularJS to accompany a code demo. Presented at the Montgomery County Java Users Group on October 16th in Rockville, MD.
- 1,580