Uploaded 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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
721
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
29
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. AngularJS A Brief IntroductionKYJSUG March 2013
  • 2. What is AngularJS?Client Side Browser App FrameworkSponsored by GoogleOpen Sourcehttp://angularjs.org/
  • 3. ViewHTML CentricDeclarativeDirectives Write your own tagsTemplating
  • 4. ControllerProvides the interaction point between thescoped Model and theResources/Services provided by the framework via Dependency Injection (DI)
  • 5. ModelData Binding ModelScope $scope
  • 6. Other topicsRouting Tames management of single page apps Often involving Partial ViewsTesting Testacular
  • 7. ResourcesSeed project with base layout https://github.com/angular/angular-seedTutorials, Videos and Docs http://angularjs.org/ - Learn http://egghead.io
  • 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. 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 = ; };}