AngularJS A Brief IntroductionKYJSUG March 2013
What is AngularJS?Client Side Browser App FrameworkSponsored by GoogleOpen Sourcehttp://angularjs.org/
ViewHTML CentricDeclarativeDirectives Write your own tagsTemplating
ControllerProvides the interaction point between thescoped Model and theResources/Services provided by the framework  via ...
ModelData Binding  ModelScope  $scope
Other topicsRouting  Tames management of single page apps     Often involving Partial ViewsTesting  Testacular
ResourcesSeed project with base layout  https://github.com/angular/angular-seedTutorials, Videos and Docs  http://angularj...
Example App HTML<html><head> <title>Demo</title></head><body ng-app ng-controller="AttendeeCtrl">  <h2>Attendees</h2>  <di...
Example App Controller JSuse strict;/* Controllers */function AttendeeCtrl($scope) {    // Some sample data    $scope.atte...
Upcoming SlideShare
Loading in …5
×

An Intro to AngularJS

941 views

Published on

An intro to AngularJS basics, and using it to build a simple attendees list manager. Delivered to KYJSUG on Mar 28 2013 by Aaron Arnett.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
941
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

An Intro to AngularJS

  1. 1. AngularJS A Brief IntroductionKYJSUG March 2013
  2. 2. What is AngularJS?Client Side Browser App FrameworkSponsored by GoogleOpen Sourcehttp://angularjs.org/
  3. 3. ViewHTML CentricDeclarativeDirectives Write your own tagsTemplating
  4. 4. ControllerProvides the interaction point between thescoped Model and theResources/Services provided by the framework via Dependency Injection (DI)
  5. 5. ModelData Binding ModelScope $scope
  6. 6. Other topicsRouting Tames management of single page apps Often involving Partial ViewsTesting Testacular
  7. 7. ResourcesSeed project with base layout https://github.com/angular/angular-seedTutorials, Videos and Docs http://angularjs.org/ - Learn http://egghead.io
  8. 8. Example App HTML<html><head> <title>Demo</title></head><body ng-app ng-controller="AttendeeCtrl"> <h2>Attendees</h2> <div> <span>{{attendees.length}} in Attendance</span> <ul> <li ng-repeat="attendee in attendees"> {{attendee.name}} </li> </ul> <form ng-submit="addAttendee()"> <input type="text" size="30" ng-model="attendeeName" placeholder="add new name here"> <input type="submit" value="add"> </form> </div> <script src="lib/angular/angular.js"></script> <script src="js/controllers.js"></script></body></html>
  9. 9. Example App Controller JSuse strict;/* Controllers */function AttendeeCtrl($scope) { // Some sample data $scope.attendees = [ {name:Ronald}, {name:Aaron}]; $scope.addAttendee = function() { $scope.attendees.push({name:$scope.attendeeName}); $scope.attendeeName = ; };}

×