AngularJS in 60ish Minutes

18,199 views
18,246 views

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 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
24 Likes
Statistics
Notes
No Downloads
Views
Total views
18,199
On SlideShare
0
From Embeds
0
Number of Embeds
10,389
Actions
Shares
0
Downloads
0
Comments
1
Likes
24
Embeds 0
No embeds

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!
  • AngularJS in 60ish Minutes

    1. 1. AngularJS in 60ish Minutes
    2. 2. Dan Wahlin Blog http://weblogs.asp.net/dwahlin Twitter @DanWahlin
    3. 3. Win a free copy of the video course! More details at: http://tinyurl.com/AngularJSJumpStart
    4. 4. http://angularjs.org
    5. 5. Agenda  AngularJS Features  Getting Started  Directives, Filters and Data Binding  Views, Controllers and Scope  Modules, Routes and Factories
    6. 6. Getting Started
    7. 7. Single Page Application (SPA) SPA Demo http://www.myspa.com View View View View
    8. 8. The Challenge with SPAs DOM Manipulation History Routing Module Loading Data Binding Object Modeling Ajax/Promises Caching View Loading
    9. 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. 10. Directives, Filters and Data Binding
    11. 11. What are Directives? They teach HTML new tricks!
    12. 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. 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. 14. AngularJS Help for Directives
    15. 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. 16. AngularJS Help for Filters
    17. 17. Demo
    18. 18. Views, Controllers and Scope
    19. 19. View Controller$scope $scope is the "glue" (ViewModel) between a controller and a view View, Controllers and Scope
    20. 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. 21. Demo
    22. 22. Modules, Routes and Factories
    23. 23. View Controller *FactoryDirectives Routes Module Config $scope
    24. 24. ControllerFactoryDirective Routes Module Config Service Provider <html ng-app="moduleName"> Modules are Containers Value Filter
    25. 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. 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. 27. The Role of Routes SPA Demo http://www.myspa.com View1 View2 View4 View3 /view2 /view3 /view4 /view1
    28. 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. 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. 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. 31. View Controller *FactoryDirectives Routes Module Config $scope
    32. 32. Demo
    33. 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. 34. Sample Code http://tinyurl.com/AngularJSDemos http://tinyurl.com/CustomerMgr
    35. 35. Win a free copy of the video course! More details at: http://tinyurl.com/AngularJSJumpStart
    36. 36. Newsletter and FlipBoard Magazines http://weblogs.asp.net/dwahlin
    37. 37. Dan Wahlin Blog http://weblogs.asp.net/dwahlin Twitter @DanWahlin

    ×