Download as PDF, PPTX
![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/75/AngularJS-in-60ish-Minutes-Dan-Wahlin-FalafelCON-2014-18-2048.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/75/AngularJS-in-60ish-Minutes-Dan-Wahlin-FalafelCON-2014-19-2048.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/75/AngularJS-in-60ish-Minutes-Dan-Wahlin-FalafelCON-2014-22-2048.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/75/AngularJS-in-60ish-Minutes-Dan-Wahlin-FalafelCON-2014-24-2048.jpg)
Uploaded byFalafelSoftware
AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014
This document provides an overview of AngularJS, focusing on its features, such as directives, filters, data binding, modules, controllers, routes, and factories, essential for building single-page applications (SPAs). It presents how to set up environments, manage routing, and utilize factories for service creation. Additionally, it includes code snippets demonstrating AngularJS functionalities and offers links to further resources for learning more about AngularJS.
More Related Content
![Fundamental JavaScript [UTC, March 2014]](https://cdn.slidesharecdn.com/ss_thumbnails/fundamentaljavascriptutcmarch2014-140305104047-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014
AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014
- 1. AngularJS in 60ishMinutes 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 ApplicaDonViews Views can be replaced with other views SPA Demo http://www.myspa.com <div> V i e w 1 </div>
- 6. Single Page ApplicaDonHistory 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 withSPAs • 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 MVCRouting Templates Testing History Factories ngularJS is a full-featured SPA framework ViewModel Views Services Dependency Injection Directives Controllers jqLite Validation
- 10. Key Players inAngularJS 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 Controllerin 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 ofRoutes 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 ViewsGo 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 ofFactories 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
- 26.
- 27. Find more ngularJScontent at: Blog h8p://weblogs.asp.net/dwahlin Twi8er @DanWahlin
- 28. More details at: hNp://7nyurl.com/AngularJSJumpStart