AngularJS in 60ish Minutes
26 likes16,471 views
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.
![<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](https://image.slidesharecdn.com/simplifyspadevelopmentwiththeangularjsjavascriptframework-130411140215-phpapp02/85/AngularJS-in-60ish-Minutes-14-320.jpg)
![<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](https://image.slidesharecdn.com/simplifyspadevelopmentwiththeangularjsjavascriptframework-130411140215-phpapp02/85/AngularJS-in-60ish-Minutes-21-320.jpg)
![var demoApp = angular.module('demoApp', []);
What's the
Array for?
var demoApp = angular.module('demoApp',
['helperModule']);
Module that demoApp
depends on
Creating a Module](https://image.slidesharecdn.com/simplifyspadevelopmentwiththeangularjsjavascriptframework-130411140215-phpapp02/85/AngularJS-in-60ish-Minutes-26-320.jpg)
![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](https://image.slidesharecdn.com/simplifyspadevelopmentwiththeangularjsjavascriptframework-130411140215-phpapp02/85/AngularJS-in-60ish-Minutes-27-320.jpg)
![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](https://image.slidesharecdn.com/simplifyspadevelopmentwiththeangularjsjavascriptframework-130411140215-phpapp02/85/AngularJS-in-60ish-Minutes-29-320.jpg)
![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](https://image.slidesharecdn.com/simplifyspadevelopmentwiththeangularjsjavascriptframework-130411140215-phpapp02/85/AngularJS-in-60ish-Minutes-31-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (13)
Similar to AngularJS in 60ish Minutes (20)
Recently uploaded (20)
AngularJS in 60ish Minutes
- 1. AngularJS in 60ish Minutes
- 3. Win a free copy of the video course! More details at: http://tinyurl.com/AngularJSJumpStart
- 5. Agenda AngularJS Features Getting Started Directives, Filters and Data Binding Views, Controllers and Scope Modules, Routes and Factories
- 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
- 10. ngularJS is a full-featured SPA framework Data Binding MVC Routing Templates ViewModel Views Controllers Dependency Injection Directives Testing Controllers jqLite Validation FactoriesHistory
- 11. Directives, Filters and Data Binding
- 12. What are Directives? They teach HTML new tricks!
- 13. <!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
- 14. <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
- 15. AngularJS Help for Directives
- 16. <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
- 17. AngularJS Help for Filters
- 18. Demo
- 20. View Controller$scope $scope is the "glue" (ViewModel) between a controller and a view View, Controllers and Scope
- 21. <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
- 22. Demo
- 25. ControllerFactoryDirective Routes Module Config Service Provider <html ng-app="moduleName"> Modules are Containers Value Filter
- 26. var demoApp = angular.module('demoApp', []); What's the Array for? var demoApp = angular.module('demoApp', ['helperModule']); Module that demoApp depends on Creating a Module
- 27. 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
- 28. The Role of Routes SPA Demo http://www.myspa.com View1 View2 View4 View3 /view2 /view3 /view4 /view1
- 29. 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
- 30. 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
- 31. 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
- 33. Demo
- 34. 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
- 36. Win a free copy of the video course! More details at: http://tinyurl.com/AngularJSJumpStart
- 37. Newsletter and FlipBoard Magazines http://weblogs.asp.net/dwahlin
Editor's Notes
- #6: First time I looked at it I felt like it was a little strange….but I could go with it.
- #7: As I researched more I came across some things that looked really strange and just didn't click with me.
- #8: 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.
- #9: But, I stuck with it, kept on researching and playing around with the samples,took a deep breath and….
- #10: 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!
- #11: 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.
- #12: And then at some point it hit me – this framework is really powerful!