GDG Atlanta - Angular.js Demo and Workshop

AngularJS Overview
Model View Whatever
Controllers are for data binding, filters and scope
Views become more closer integrated with the data
Learn to do things the ‘Angular’ way

Resources
Official Documentation isn’t so great
The Angular Cheat Sheet
Google Groups
JSFiddles

Demos
AngularJS Official Demos
Built With Angular Demos
Tutorialzine Demos

Setup
Indicate you are using angular with ng-app in a tag.
Load AngularJS from the web or download and use
one stored on your own server.
<!doctype html>
<html ng-app>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"<
/script>
</head>
<body>
<div ng-view="main"></div>
</body>
</html>

Simple App
ng-model is a model that provides data binding
Demo1
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>

Key Terms part I
Template: HTML with additional markup
Directives: extend HTML with custom attributes and elements
You can make your own directives
Model: the data that is shown to the user and with which the user
interacts
Scope: context where the model is stored so that controllers,
directives and expressions can access it
Expressions: access variables and functions from the scope
Compiler: parses the template and instantiates directives and
expressions

Key Terms part II: Son of Key Terms
Filter: formats the value of an expression for display to the user
View: what the user sees (the DOM)
Data Binding: sync data between the model and the view
Controller: the business logic behind views
Dependency Injection: Creates and wires objects / functions
Injector: dependency injection container
Module: configures the Injector
Service: reusable business logic independent of views

Workshop
Check out - github.com/drewry/angular-workshop
Goal is to create a very simple app using Angular for
front-end and Node for back-end
1. Create a method to grab from ‘/users’ and creates
an unordered list for each user
2. Check and update a user if the user has ‘attended’
3. Click a user’s profile which will load just that user
and load another view
4. Update a picture URL for the user and display it on
the different views as an image

GDG Atlanta - Angular.js Demo and Workshop

More Related Content

What's hot

Similar to GDG Atlanta - Angular.js Demo and Workshop

Recently uploaded

GDG Atlanta - Angular.js Demo and Workshop