An Intro to AngularJS
•
2 j'aime•899 vues
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.
Recommandé
Contenu connexe
Tendances
Similaire à An Intro to AngularJS
Similaire à An Intro to AngularJS (20)
Plus de Kentucky JavaScript Users Group
Plus de Kentucky JavaScript Users Group (9)
Dernier
Dernier (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 = ''; }; }