GDG Atlanta - Angular.js Demo and Workshop
Download as PPTX, PDF0 likes610 views
The document provides an overview of AngularJS, a framework focused on the Model-View-Whatever (MVW) architecture for building web applications. It covers key concepts such as templates, directives, models, scopes, and data binding, with a goal of creating a simple app using Angular for the front-end and Node for the back-end. Additionally, it includes resources for further learning and outlines workshop objectives, including user data handling and view management.
GDG Atlanta - Angular.js Demo and Workshop
- 2. AngularJS - MVW Framework
- 3. 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
- 4. Resources Official Documentation isn’t so great The Angular Cheat Sheet Google Groups JSFiddles
- 5. Demos AngularJS Official Demos Built With Angular Demos Tutorialzine Demos
- 6. 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>
- 7. 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>
- 8. 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
- 9. 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
- 10. 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