A Gentle Introduction to AngularJS by John Ptacek at Skyline Technologies

Slide Note

AngularJS is presented by John Ptacek from Skyline Technologies in a simple and informative manner. Learn more about AngularJS basics, features, and applications for web development. Explore the fundamentals of this popular JavaScript framework through practical examples and insights shared by the author.

mccrimmon_e Follow

Uploaded on Mar 03, 2025 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.

Download Presentation

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.

E N D

Presentation Transcript

ANGULARJS A Gentle Introduction John Ptacek/@jptacek www.SkylineTechologies.com / www.jptacek.com jptacek@SkylineTechnologies.com

AGENDA AngularJS Overview Demos

OVERVIEW http://alicialiu.net/leveling-up-angular-talk/#/

ANGULARJS THE WHY Framework. NOT a Library -Contains everything you need for SPA Broken into components Controllers, view, models, services, etc MVC/MVVM Framework Two Way Data binding Enables test friendly code

ANGULARJS THE WHY NOT Performance - Framework not a library - Functions, not computed properties Directives Powerful, not always intuitive Documentation

DEMO 1 - INTRO/DATA BINDING Get AngularJS Ng-app, ng-model Magical {{}} Filters http://docs.angularjs.org/api/ng#filter

DEMO 2 - CONTROLLERS Ng-controller http://docs.angularjs.org/api/ng.$controller Magical $scope View model Object context

DEMO 3 REPEAT AND FILTER Directives HTML Dom markers (attributes, css class, etc) http://docs.angularjs.org/guide/directive Ng-repeat http://docs.angularjs.org/api/ng.directive:ngRepeat Ng-filter http://docs.angularjs.org/api/ng.filter:filter

DEMO 4 MORE REPEAT AND ORDER Order By http://docs.angularjs.org/api/ng.filter:orderBy Ng-repeat http://docs.angularjs.org/api/ng.directive:ngRepeat Ng-filter http://docs.angularjs.org/api/ng.filter:filter

DEMO 5 FUNCTIONS Custom Logic Custom Filter function

DEMO LOU A BRIEF INTERLUDE Binding Images And something really cool

DEMO 6 - DIRECTIVES Ng-show/ng-hide http://docs.angularjs.org/api/ng.directive:ngShow#! http://docs.angularjs.org/api/ng.directive:ngHide Ng-click http://docs.angularjs.org/api/ng.directive:ngClick Directives http://docs.angularjs.org/api/

DEMO 7 - SERVICES Encapsulate logic Linked together via Dependency injection http://docs.angularjs.org/guide/dev_guide.services.cr eating_services chemistryApp.factory('chemistryData', function($http, $log, $q) { return { getChemistryData: function() {} }); Promises - $q http://docs.angularjs.org/api/ng.$q