Your SlideShare is downloading. ×
0
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJS in 60ish Minutes

16,992

Published on

This is a talk I gave the at the AngleBrackets/DevIntersection conference in April of 2014 that covers the AngularJS JavaScript framework (one of my favorite frameworks out there!). In this talk I …

This is a talk I gave the at the AngleBrackets/DevIntersection conference in April of 2014 that covers the AngularJS JavaScript framework (one of my favorite frameworks out there!). In this talk I discussed the challenges with Single Page Applications (SPA) and how AngularJS helps solve those challenges with built-in support for two-way data binding, directives and filters, controllers and more. I also discuss the relationship of modules to controllers, factories and services, and more.

Published in: Technology
1 Comment
22 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,992
On Slideshare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
0
Comments
1
Likes
22
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
  • First time I looked at it I felt like it was a little strange….but I could go with it.
  • As I researched more I came across some things that looked really strange and just didn't click with me.
  • I saw a lot of words that were confusing and after more research I started to get a little frustrated…kind of felt like this kid.
  • But, I stuck with it, kept on researching and playing around with the samples,took a deep breath and….
  • I chilled out, and once a few things started to click I started to realize that I could really take advantage of some great features!
  • Once you have that "light bulb moment" you realize how powerful and flexible AngularJS is. That's when it truly changes how you think about writing Single Page Applications (SPAs) and client-side applications in general.
  • And then at some point it hit me – this framework is really powerful!
  • Transcript

    • 1. AngularJS in 60ish Minutes
    • 2. Dan Wahlin Blog http://weblogs.asp.net/dwahlin Twitter @DanWahlin
    • 3. Win a free copy of the video course! More details at: http://tinyurl.com/AngularJSJumpStart
    • 4. http://angularjs.org
    • 5. Agenda  AngularJS Features  Getting Started  Directives, Filters and Data Binding  Views, Controllers and Scope  Modules, Routes and Factories
    • 6. Getting Started
    • 7. Single Page Application (SPA) SPA Demo http://www.myspa.com View View View View
    • 8. The Challenge with SPAs DOM Manipulation History Routing Module Loading Data Binding Object Modeling Ajax/Promises Caching View Loading
    • 9. ngularJS is a full-featured SPA framework Data Binding MVC Routing Templates ViewModel Views Controllers Dependency Injection Directives Testing Controllers jqLite Validation FactoriesHistory
    • 10. Directives, Filters and Data Binding
    • 11. What are Directives? They teach HTML new tricks!
    • 12. <!DOCTYPE html> <html ng-app> <head> <title></title> </head> <body> <div class="container"> Name: <input type="text" ng-model="name" /> {{ name }} </div> <script src="Scripts/angular.js"></script> </body> </html> Directive Directive Data Binding Expression Using Directives and Data Binding Syntax
    • 13. <html data-ng-app=""> ... <div class="container" data-ng-init="names=['Dave','Napur','Heedy','Shriva']"> <h3>Looping with the ng-repeat Directive</h3> <ul> <li data-ng-repeat="name in names">{{ name }}</li> </ul> </div> ... </html> Iterate through names Iterating with the ng-repeat Directive
    • 14. AngularJS Help for Directives
    • 15. <ul> <li data-ng-repeat="cust in customers | orderBy:'name'"> {{ cust.name | uppercase }} </li> </ul> Order customers by name property <input type="text" data-ng-model="nameText" /> <ul> <li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'"> {{ cust.name }} - {{ cust.city }}</li> </ul> Filter customers by model value Using Filters
    • 16. AngularJS Help for Filters
    • 17. Demo
    • 18. Views, Controllers and Scope
    • 19. View Controller$scope $scope is the "glue" (ViewModel) between a controller and a view View, Controllers and Scope
    • 20. <div class="container" data-ng-controller="SimpleController"> <h3>Adding a Simple Controller</h3> <ul> <li data-ng-repeat="cust in customers"> {{ cust.name }} - {{ cust.city }} </li> </ul> </div> <script> function SimpleController($scope) { $scope.customers = [ { name: 'Dave Jones', city: 'Phoenix' }, { name: 'Jamie Riley', city: 'Atlanta' }, { name: 'Heedy Wahlin', city: 'Chandler' }, { name: 'Thomas Winter', city: 'Seattle' } ]; } </script> Define the controller to use Basic controller $scope injected dynamically Access $scope Creating a View and Controller
    • 21. Demo
    • 22. Modules, Routes and Factories
    • 23. View Controller *FactoryDirectives Routes Module Config $scope
    • 24. ControllerFactoryDirective Routes Module Config Service Provider <html ng-app="moduleName"> Modules are Containers Value Filter
    • 25. var demoApp = angular.module('demoApp', []); What's the Array for? var demoApp = angular.module('demoApp', ['helperModule']); Module that demoApp depends on Creating a Module
    • 26. var demoApp = angular.module('demoApp', []); demoApp.controller('SimpleController', function ($scope) { $scope.customers = [ { name: 'Dave Jones', city: 'Phoenix' }, { name: 'Jamie Riley', city: 'Atlanta' }, { name: 'Heedy Wahlin', city: 'Chandler' }, { name: 'Thomas Winter', city: 'Seattle' } ]; }); Define a Module Define a Controller Creating a Controller in a Module
    • 27. The Role of Routes SPA Demo http://www.myspa.com View1 View2 View4 View3 /view2 /view3 /view4 /view1
    • 28. Defining Routes var demoApp = angular.module('demoApp', ['ngRoute']); demoApp.config(function ($routeProvider) { $routeProvider .when('/', { controller: 'SimpleController', templateUrl:'View1.html' }) .when('/partial2', { controller: 'SimpleController', templateUrl:'View2.html' }) .otherwise({ redirectTo: '/' }); }); Define Module Routes
    • 29. SPA Demo http://www.myspa.com Where do Views Go in a Page? Dynamically loaded views are injected into the shell page as a module loads: <div ng-view></div> <ng-view></ng-view> OR View1
    • 30. The Role of Factories var demoApp = angular.module('demoApp', []) .factory('simpleFactory', function () { var factory = {}; var customers = [ ... ]; factory.getCustomers = function () { return customers; }; return factory; }) .controller('SimpleController', function ($scope, simpleFactory) { $scope.customers = simpleFactory.getCustomers(); }); Factory injected into controller at runtime
    • 31. View Controller *FactoryDirectives Routes Module Config $scope
    • 32. Demo
    • 33. Summary  AngularJS provides a robust "SPA" framework for building robust client-centric applications  Key features:  Directives and filters  Two-way data binding  Views, Controllers, Scope  Modules and Routes
    • 34. Sample Code http://tinyurl.com/AngularJSDemos http://tinyurl.com/CustomerMgr
    • 35. Win a free copy of the video course! More details at: http://tinyurl.com/AngularJSJumpStart
    • 36. Newsletter and FlipBoard Magazines http://weblogs.asp.net/dwahlin
    • 37. Dan Wahlin Blog http://weblogs.asp.net/dwahlin Twitter @DanWahlin

    ×