AngularJS basics презентация

Июнь 18, 2021

Содержание

2. Agile practitioner Trainer Public speaker Extensive AngularJS user
3. Agenda Intro View and controller Directives and filters Two-way data binding Event handlers RESTful services and
4. Intro Framework overview. Main concepts. Bootstrapping.
5. MVC IoC container Plain JS models All-in-One Modular design Testing bundled Directives
6. MVC First introduced in 1979 by Trygve Reenskaug. Splits the presentation from the logic and the
7. Inversion of Control Service Dependency Service Injector Dependency
8. Bootstrapping TEMPLATE … … CODE angular.module('myApp', []);
9. View and controller Controllers. Templates. Scopes.
10. Angular view … {{phone.name}} {{phone.snippet}}
11. Controller View Model Scope Scope – the glue between model, view, and controller.
12. Angular controller TEMPLATE {{data}} CODE angular.module('myApp') .controller('MyController', function($scope) { $scope.data = {}; });
13. Directives and filters Directives. ngRepeat. Filters.
14. Look and feel created {{event.child.id}} by forking this plunk .
15. Forms of directives Preferred Element: Argument: also Class: Comment:
16. ngRepeat [{{$index + 1}}] {{friend.name}} who is {{friend.age}}.
17. Filter [{{$index + 1}}] {{friend.name}} who is {{friend.age}}.
18. Standard filters currency date filter json limitTo uppercase number orderBy lowercase
19. Practice #1
20. Task – goo.gl/grrTPW Create an angular application (bootstrap with ng-app). Create a controller and a template.
21. Two-way data binding ngModel
22. ngModel
23. Practice #2
24. Task – goo.gl/CoqXPy Update the application so that the filtering params can be set on the
25. Event handlers Calling events from the view
26. Event handlers TEMPLATE CODE angular.module('myApp') .controller('MyController', function($scope) { $scope.do = function() { }; });
27. RESTful services and $resource HTTP and RESTful services. Injecting services.
28. REST level HTTP level Client Server $resource (ngResource) RESTful resource $http XHR HTTP server
29. angular.module('myApp') .service('myService', function($resource) { ... }) .controller('MyController', function($scope, myService) { ... }); Injecting services ngRoute
30. Practice #3
31. Task – goo.gl/75hgJq Update the application so that it gets the list of repos via the
32. Yeoman Yeoman tool. Scaffolding. yo.
33. Yeomen Warders aka Beefeaters
34. yo Scaffolding Grunt Task runner Bower Dependency management
35. Scaffolding is a technique, in which a specification is used to generate source code.
36. Scaffolding tools examples
37. yo npm install –g yo generator-angular
38. yo angular AngularJS generators
39. Angular generators angular:route angular (aka angular:app) angular:controller (service, directive, …)
40. Your app LiveReload Minification (HTML, CSS, JS, ngmin, …)
41. Practice #4
42. Task – goo.gl/yOC4Vx Create an application using yo AngularJS generator. Migrate the existing code into this
43. Configuring services Providers. Application phases.
44. Providers are used for services configuration.
45. Config Run Two execution phases
46. Example of a provider usage angular.module('myApp', []) .config(function($filterProvider) { $filterProvider.register('myFilter', MyFilter); });
47. Routing Multiple views. $routeProvider. $routeParams.
48. partials/phone-list.html /phones $route (ngRoute) … … Page
49. $routeProvider $routeProvider .when('/phones', { templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl' }) .otherwise({ redirectTo: '/phones' });
50. $routeParams // Given: // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // Then $routeParams ==> { chapterId: 1,
51. Practice #5
52. Task – goo.gl/nriURP Next to each repo entry in the list add the “Details” link. Clicking
53. http://kirbarn.blogpost.com kiryl.baranoshnik@gmail.com @kirbarn
55. Скачать презентацию

Слайд 2

Agile practitioner
Trainer
Public speaker
Extensive AngularJS user

Слайд 3

Agenda
Intro
View and controller
Directives and filters
Two-way data binding
Event handlers
RESTful services and $resource
Yeoman
Routing

Слайд 4

Intro
Framework overview. Main concepts. Bootstrapping.

Слайд 5

MVC
IoC container
Plain JS models
All-in-One
Modular design
Testing bundled
Directives

Слайд 6

MVC
First introduced in 1979 by Trygve Reenskaug.
Splits the presentation from the

logic and the user input.

Controller

View

Model

Слайд 7

Inversion of Control
Service
Dependency
Service
Injector
Dependency

Слайд 8

Bootstrapping
TEMPLATE

…

…

CODE
angular.module('myApp', []);

Слайд 9

View and controller
Controllers. Templates. Scopes.

Слайд 10

Angular view

…

Слайд 11

Controller
View
Model
Scope
Scope – the glue between model, view, and controller.

Слайд 12

Angular controller
TEMPLATE

{{data}}

CODE
angular.module('myApp')
.controller('MyController',
function($scope) {
$scope.data = {};
});

Слайд 13

Directives and filters
Directives. ngRepeat. Filters.

Слайд 14

Look and feel

user="event.user">
created
{{event.child.id}}

by forking this plunk .

Слайд 15

Forms of directives
Preferred
Element:
Argument:
also
Class:
Comment:

Слайд 16

ngRepeat

[{{$index + 1}}] {{friend.name}} who

is {{friend.age}}.

Слайд 17

Filter

[{{$index +

1}}] {{friend.name}} who is {{friend.age}}.

Слайд 18

Standard filters
currency
date
filter
json
limitTo
uppercase
number
orderBy
lowercase

Слайд 19

Practice
#1

Слайд 20

Task – goo.gl/grrTPW
Create an angular application (bootstrap with ng-app).
Create a controller

and a template.
Initialize the list of repos in the controller.
Display the data on the view as a list of panels where the following is displayed:
Repo’s full name that is a link to the repo,
Repo owner’s login ID and avatar,
Repo’s description.
Output only 10 repos that come first alphabetically, order by full name ascending.

Слайд 21

Two-way data binding
ngModel

Слайд 22

ngModel

Слайд 23

Practice
#2

Слайд 24

Task – goo.gl/CoqXPy
Update the application so that the filtering params can

be set on the page via inputs.
Default values should populate the inputs on load:
Filter: empty,
Sort by name: asc,
Limit: 10.
Each time any of the values changes, the displayed list updates accordingly.

Слайд 25

Event handlers
Calling events from the view

Слайд 26

Event handlers
TEMPLATE

CODE
angular.module('myApp')
.controller('MyController',
function($scope) {
$scope.do =

function() { };
});

Слайд 27

RESTful services and $resource
HTTP and RESTful services. Injecting services.

Слайд 28

REST level
HTTP level
Client
Server
$resource
(ngResource)
RESTful resource
$http
XHR
HTTP server

Слайд 29

angular.module('myApp')
.service('myService', function($resource) {
...
})
.controller('MyController', function($scope, myService) {
...
});
Injecting

services

ngRoute

Слайд 30

Practice
#3

Слайд 31

Task – goo.gl/75hgJq
Update the application so that it gets the list

of repos via the Github search API.
Add a panel with the search param that will allow to narrow the search request by:
Maximum repo size,
Minimum number of forks,
Minimum number of stars.
Add the “Search” button that will query the data based on the specified parameters.
Create a separate service named “Repository” for this and inject in the controller.
Using $resource get the following related data and add to each repo view:
Languages,
Contributors names and avatars.

Слайд 32

Yeoman
Yeoman tool. Scaffolding. yo.

Слайд 33

Yeomen Warders
aka Beefeaters

Слайд 34

yo
Scaffolding
Grunt
Task runner
Bower
Dependency
management

Слайд 35

Scaffolding is a technique, in which a specification is used to

generate source code.

Слайд 36

Scaffolding tools examples

Слайд 37

yo
npm install –g yo generator-angular

Слайд 38

yo angular
AngularJS generators

Слайд 39

Angular generators
angular:route
angular
(aka angular:app)
angular:controller (service, directive, …)

Слайд 40

Your app
LiveReload
Minification
(HTML, CSS,
JS, ngmin, …)

Слайд 41

Practice
#4

Слайд 42

Task – goo.gl/yOC4Vx
Create an application using yo AngularJS generator.
Migrate the existing

code into this application using route and service generators. Use existing MainCtrl and main.html for your code.
Make sure the application runs on the Node JS server with the generated config.

Слайд 43

Configuring services
Providers. Application phases.

Слайд 44

Providers are used for services configuration.

Слайд 45

Config
Run
Two execution phases

Слайд 46

Example of a provider usage
angular.module('myApp', [])
.config(function($filterProvider) {
$filterProvider.register('myFilter', MyFilter);
});

Слайд 47

Routing
Multiple views. $routeProvider. $routeParams.

Слайд 48

partials/phone-list.html
/phones
$route
(ngRoute)

…

…

Page

Слайд 49

$routeProvider
$routeProvider
.when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
})
.otherwise({
redirectTo: '/phones'

});

Слайд 50

$routeParams
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
// Then
$routeParams ==> { chapterId: 1,

sectionId: 2, search: 'moby' }

Слайд 51

Practice
#5

Слайд 52

Task – goo.gl/nriURP
Next to each repo entry in the list add

the “Details” link.
Clicking on “Details” will navigate to the repo’s details page using AngularJS routing.
The page should contain the following information:
The same data that is shown for the repo in the repos list, plus
The list of contributors logins.
The page should also contain the “Back” link which will navigate back to the list of repos.
Try not to use yo angular:route.

Слайд 53

AngularJS basics презентация

Содержание

Agile practitionerTrainerPublic speakerExtensive AngularJS user

AgendaIntroView and controllerDirectives and filtersTwo-way data bindingEvent handlersRESTful services and $resourceYeomanRouting

IntroFramework overview. Main concepts. Bootstrapping.

MVCIoC containerPlain JS modelsAll-in-OneModular designTesting bundledDirectives

MVCFirst introduced in 1979 by Trygve Reenskaug.Splits the presentation from the

Inversion of ControlServiceDependencyServiceInjectorDependency

BootstrappingTEMPLATE … …CODEangular.module('myApp', []);

View and controllerControllers. Templates. Scopes.

Angular view …

ControllerViewModelScopeScope – the glue between model, view, and controller.

Angular controllerTEMPLATE {{data}}CODEangular.module('myApp') .controller('MyController', function($scope) { $scope.data = {}; });

Directives and filtersDirectives. ngRepeat. Filters.

Look and feel

Forms of directivesPreferredElement: Argument: alsoClass: Comment:

ngRepeat [{{$index + 1}}] {{friend.name}} who

Filter [{{$index +

Standard filterscurrencydatefilterjsonlimitTouppercasenumberorderBylowercase

Practice#1

Task – goo.gl/grrTPWCreate an angular application (bootstrap with ng-app).Create a controller

Two-way data bindingngModel

ngModel

Practice#2

Task – goo.gl/CoqXPyUpdate the application so that the filtering params can

Event handlersCalling events from the view

Event handlersTEMPLATE CODEangular.module('myApp') .controller('MyController', function($scope) { $scope.do =

RESTful services and $resourceHTTP and RESTful services. Injecting services.

REST levelHTTP levelClientServer$resource(ngResource)RESTful resource$httpXHRHTTP server

angular.module('myApp') .service('myService', function($resource) { ... }).controller('MyController', function($scope, myService) { ... });Injecting

Practice#3

Task – goo.gl/75hgJqUpdate the application so that it gets the list

YeomanYeoman tool. Scaffolding. yo.

Yeomen Wardersaka Beefeaters

yoScaffoldingGruntTask runnerBowerDependencymanagement