AngularJS basics презентация
Содержание
- 2. Agile practitioner Agile practitioner Trainer Public speaker Extensive AngularJS user
- 3. Agenda Intro View and controller Directives and filters Two-way data binding
- 4. Intro Framework overview. Main concepts. Bootstrapping.
- 6. MVC First introduced in 1979 by Trygve Reenskaug. Splits the presentation
- 7. Inversion of Control
- 8. Bootstrapping Template
- 9. View and controller Controllers. Templates. Scopes.
- 10. Angular view <html ng-app="phonecatApp"> … <body ng-controller="PhoneListCtrl"> <ul> <li
- 12. Angular controller Template
- 13. Directives and filters Directives. ngRepeat. Filters.
- 14. Look and feel <div ng-switch-when="forked"> <div class="span1 type"><i ng-class="event.icon"></i></div> <div class="span11">
- 15. Forms of directives Preferred Element: <ng-include></ng-include> Argument: <input ng-model="data"></input> also Class:
- 16. ngRepeat <ul> <li ng-repeat="friend in friends"> [{{$index + 1}}] {{friend.name}}
- 17. Filter <ul> <li ng-repeat="friend in friends | filter:'query' "> [{{$index
- 18. Standard filters currency date filter json limitTo
- 19. Practice #1
- 20. Task – goo.gl/grrTPW Create an angular application (bootstrap with ng-app). Create
- 21. Two-way data binding ngModel
- 22. ngModel <input ng-model="model.prop"></input>
- 23. Practice #2
- 24. Task – goo.gl/CoqXPy Update the application so that the filtering params
- 25. Event handlers Calling events from the view
- 26. Event handlers Template
- 27. RESTful services and $resource HTTP and RESTful services. Injecting services.
- 29. Injecting services angular.module('myApp') .service('myService', function($resource) { ... }) .controller('MyController',
- 30. Practice #3
- 31. Task – goo.gl/75hgJq Update the application so that it gets the
- 32. Yeoman Yeoman tool. Scaffolding. yo.
- 33. Yeomen Warders aka Beefeaters
- 35. Scaffolding is a technique, in which a specification is used to
- 36. Scaffolding tools examples
- 37. yo npm install –g yo generator-angular
- 38. yo angular AngularJS generators
- 41. Practice #4
- 42. Task – goo.gl/yOC4Vx Create an application using yo AngularJS generator. Migrate
- 43. Configuring services Providers. Application phases.
- 44. Providers are used for services configuration.
- 45. Two execution phases
- 46. Example of a provider usage angular.module('myApp', []) .config(function($filterProvider) { $filterProvider.register('myFilter',
- 47. Routing Multiple views. $routeProvider. $routeParams.
- 49. $routeProvider $routeProvider .when('/phones', { templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl' })
- 50. $routeParams // Given: // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // Then
- 51. Practice #5
- 52. Task – goo.gl/nriURP Next to each repo entry in the list
- 53. http://kirbarn.blogpost.com [email protected] @kirbarn
- 54. References http://docs.angularjs.org/tutorial/ http://www.angularjs.org http://chabster.blogspot.com/2008/02/mvp-and-mvc-part-1.html
- 55. Скачать презентацию
![Example of a provider usage
angular.module('myApp', [])
.config(function($filterProvider) {](/documents_3/5efc873f32b7d571119575f274de0013/img45.jpg "Example of a provider usage
angular.module('myApp', [])
.config(function($filterProvider) {")
Слайды и текст этой презентации
Слайд 1
Описание слайда:
AngularJS basics
Introduction to the popular framework
Слайд 2
Описание слайда:
Agile practitioner
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
Описание слайда:
Слайд 6
Описание слайда:
MVC
First introduced in 1979 by Trygve Reenskaug.
Splits the presentation from the logic and the user input.
Слайд 7
Описание слайда:
Inversion of Control
Слайд 8
Описание слайда:
Bootstrapping
Template
Слайд 9
Описание слайда:
View and controller
Controllers. Templates. Scopes.
Слайд 10
Описание слайда:
Angular view
<html ng-app="phonecatApp">
…
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
Слайд 11
Описание слайда:
Слайд 12
Описание слайда:
Angular controller
Template
Слайд 13
Описание слайда:
Directives and filters
Directives. ngRepeat. Filters.
Слайд 14
Описание слайда:
Look and feel
<div ng-switch-when="forked">
<div class="span1 type"><i ng-class="event.icon"></i></div>
<div class="span11">
<plunker-inline-user user="event.user"></plunker-inline-user>
created <plunker-inline-plunk plunk="event.child">
{{event.child.id}}
</plunker-inline-plunk>
by forking this plunk <abbr timeago="event.date"></abbr>.
</div>
</div>
Слайд 15
Описание слайда:
Forms of directives
Preferred
Element: <ng-include></ng-include>
Argument: <input ng-model="data"></input>
also
Class: <span class="ng-bind: {expression};"></span>
Comment: <!-- directive: ng-include -->
Слайд 16
Описание слайда:
ngRepeat
<ul>
<li ng-repeat="friend in friends">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}}.
</li>
</ul>
Слайд 17
Описание слайда:
Filter
<ul>
<li ng-repeat="friend in friends | filter:'query' ">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}}.
</li>
</ul>
Слайд 18
Описание слайда:
Standard filters
currency
date
filter
json
limitTo
Слайд 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
<input ng-model="model.prop"></input>
Слайд 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
Слайд 27
Описание слайда:
RESTful services and $resource
HTTP and RESTful services. Injecting services.
Слайд 28
Описание слайда:
Слайд 29
Описание слайда:
Injecting services
angular.module('myApp')
.service('myService', function($resource) {
...
})
.controller('MyController', function($scope, myService) {
...
});
Слайд 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
Описание слайда:
Слайд 35
Описание слайда:
Scaffolding is a technique, in which a specification is used to generate source code.
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
Описание слайда:
Слайд 40
Описание слайда:
Слайд 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
Описание слайда:
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
Описание слайда:
Слайд 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.
Слайд 54
Описание слайда:
References
http://docs.angularjs.org/tutorial/
http://www.angularjs.org
http://chabster.blogspot.com/2008/02/mvp-and-mvc-part-1.html
Скачать презентацию на тему AngularJS basics можно ниже:
