An Intro to AngularJS
•
2 gefällt mir•899 views
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.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Ähnlich wie An Intro to AngularJS
Ähnlich wie An Intro to AngularJS (20)
Mehr von Kentucky JavaScript Users Group
Mehr von Kentucky JavaScript Users Group (9)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
An Intro to AngularJS
- 1. AngularJS A Brief Introduction KYJSUG March 2013
- 2. What is AngularJS? Client Side Browser App Framework Sponsored by Google Open Source http://angularjs.org/
- 3. View HTML Centric Declarative Directives Write your own tags Templating
- 4. Controller Provides the interaction point between the scoped Model and the Resources/Services provided by the framework via Dependency Injection (DI)
- 5. Model Data Binding Model Scope $scope
- 6. Other topics Routing Tames management of single page apps Often involving Partial Views Testing Testacular
- 7. Resources Seed project with base layout https://github.com/angular/angular-seed Tutorials, 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 JS 'use 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 = ''; }; }