AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014
0 likes958 views
Single Page Applications (SPAs) are all the rage now days but if you've built a true SPA you know that they can be fairly involved to create. There are typically a lot of moving parts and scripts ranging from history, to navigation, to data access. Have you thought through maintenance of the application down the road and how simple or complex it will be to make modifications as scripts change? In this session Dan Wahlin will introduce a solid introduction to the AngularJS SPA framework and demonstrate many of the built-in SPA features it provides. If you like to work with views, controllers, modules, plus tie into existing framework features without having to focus on all of the scripts under the cover then this is definitely a framework to check out!
![Creating a Module
What's the
Array for?
var
demoApp
=
angular.module('demoApp',
[]);
var
demoApp
=
angular.module('demoApp',
['helperModule']);
Module that demoApp
depends on](https://image.slidesharecdn.com/angularjsin60ishminutes-141003124535-phpapp01/85/AngularJS-in-60ish-Minutes-Dan-Wahlin-FalafelCON-2014-18-320.jpg)
![Creating a Controller in a Module
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](https://image.slidesharecdn.com/angularjsin60ishminutes-141003124535-phpapp01/85/AngularJS-in-60ish-Minutes-Dan-Wahlin-FalafelCON-2014-19-320.jpg)
![Defining Routes
var
demoApp
=
angular.module('demoApp',
['ngRoute']);
demoApp.config(function
($routeProvider)
{
$routeProvider
.when('/',
{
controller:
'CustomersController',
templateUrl:'customers.html'
})
.when('/orders',
{
controller:
'OrdersController',
templateUrl:'orders.html'
})
.otherwise({
redirectTo:
'/'
});
});
Define Module
Routes](https://image.slidesharecdn.com/angularjsin60ishminutes-141003124535-phpapp01/85/AngularJS-in-60ish-Minutes-Dan-Wahlin-FalafelCON-2014-22-320.jpg)
![The Role of Factories
var
demoApp
=
angular.module('demoApp',
[])
.factory('simpleFactory',
function
($http)
{
var
factory
=
{};
factory.getCustomers
=
function
()
{
return
$http.get(…);
};
return
factory;
})
.controller('SimpleController',
function
($scope,
simpleFactory)
{
=
simpleFactory.getCustomers().success(…);
});
Factory Injected](https://image.slidesharecdn.com/angularjsin60ishminutes-141003124535-phpapp01/85/AngularJS-in-60ish-Minutes-Dan-Wahlin-FalafelCON-2014-24-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (20)
![Fundamental JavaScript [UTC, March 2014]](https://cdn.slidesharecdn.com/ss_thumbnails/fundamentaljavascriptutcmarch2014-140305104047-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Similar to AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014 (20)
More from FalafelSoftware (13)
Recently uploaded (20)
AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014
- 1. AngularJS in 60ish Minutes Dan Wahlin
- 2. Dan Wahlin Blog h8p://weblogs.asp.net/dwahlin Twi8er @DanWahlin
- 3. Agenda • AngularJS Features • Ge4ng Started • Direc7ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
- 4. Single Page ApplicaDons SPAs allow different views to be loaded into a shell page SPA Demo http://www.myspa.com <div> </div>
- 5. Single Page ApplicaDon Views Views can be replaced with other views SPA Demo http://www.myspa.com <div> V i e w 1 </div>
- 6. Single Page ApplicaDon History SPAs maintain a history of views that have been displayed SPA Demo http://www.myspa.com <div> V i e w 2 </div>
- 7. The Challenge with SPAs • SPAs rely on many different technologies: • DOM manipula7on • History • Rou7ng • Ajax • Data Binding • More…
- 8. Agenda • AngularJS Features • Ge#ng Started • Direc7ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
- 9. Data Binding MVC Routing Templates Testing History Factories ngularJS is a full-featured SPA framework ViewModel Views Services Dependency Injection Directives Controllers jqLite Validation
- 10. Key Players in AngularJS Module Routes UI Logic/Data View $scope Controller Directives Factory Filters Service
- 11. What is Scope? View $scope Controller $scope is the "glue" (ViewModel) between a controller and a view
- 12. The Big Picture Module Config Routes View $scope Controller Directives *Factory
- 13. Agenda • AngularJS Features • Ge4ng Started • Direc/ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
- 14. <!DOCTYPE html> <html ng-‐app> <head> <title></title> </head> <body> <div class="container"> Name: <input type="text" ng-‐model="name" /> {{ name }} </div> <script src="js/angular.js"></script> </body> </html> Directive Directive Data Binding Expression Using 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. Agenda • AngularJS Features • Ge4ng Started • Direc7ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
- 17. Modules are Containers <html ng-‐app="moduleName"> Filter Controller Directive Factory Routes Module Config Service Provider Value
- 18. Creating a Module What's the Array for? var demoApp = angular.module('demoApp', []); var demoApp = angular.module('demoApp', ['helperModule']); Module that demoApp depends on
- 19. Creating a Controller in a Module 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
- 20. Agenda • AngularJS Features • Ge4ng Started • Direc7ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
- 21. The Role of Routes SPA Demo http://www.myspa.com /view2 View1 View2 /view3 /view4 /view1 View4 View3
- 22. Defining Routes var demoApp = angular.module('demoApp', ['ngRoute']); demoApp.config(function ($routeProvider) { $routeProvider .when('/', { controller: 'CustomersController', templateUrl:'customers.html' }) .when('/orders', { controller: 'OrdersController', templateUrl:'orders.html' }) .otherwise({ redirectTo: '/' }); }); Define Module Routes
- 23. Where do Views Go in a Page? Dynamically loaded views are injected into the shell page as a module loads: SPA Demo http://www.myspa.com <div ng-‐view></div> OR <ng-‐view></ng-‐view> View1
- 24. The Role of Factories var demoApp = angular.module('demoApp', []) .factory('simpleFactory', function ($http) { var factory = {}; factory.getCustomers = function () { return $http.get(…); }; return factory; }) .controller('SimpleController', function ($scope, simpleFactory) { = simpleFactory.getCustomers().success(…); }); Factory Injected
- 25. The Big Picture Module Config Routes View $scope Controller Directives *Factory
- 27. Find more ngularJS content at: Blog h8p://weblogs.asp.net/dwahlin Twi8er @DanWahlin
- 28. More details at: hNp://7nyurl.com/AngularJSJumpStart