Angular JS deep dive
•Télécharger en tant que PPTX, PDF•
1 j'aime•1,515 vues
Ivan Varga deep dives to Angluar JS framework.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (10)
Similaire à Angular JS deep dive
Similaire à Angular JS deep dive (20)
Plus de Axilis
Plus de Axilis (19)
Dernier
Dernier (20)
Angular JS deep dive
- 1. AngularJS SUPERHEROIC JAVASCRIPT MVW FRAMEWORK
- 3. What is it? Really big JavaScript file JavaScript MVC framework (or MVW) HTML syntax extensions <html> <script src=“angular.js“></script> <script src=“app.js“></script> <body ng-app=“myApp" ng-controller=“myController"> <h1>Sta se jede</h1> <table> <tr ng-repeat=“rest in restaurants"> <td>{{rest.name}}</td> <td>{{rest.score}}</td> </tr> </table> </body> <html> angular.module(‘myApp', []). controller(‘myController‘, function($scope) { $scope.restaurants = [ {name:”Sparka”,score:”4/5” }, {name:”NijeSparka”,score:”3/5” }]; });
- 4. What is your app made of? ◦ Templates ◦ Expressions ◦ Controllers ◦ Model/Scope ◦ Modules ◦ Services ◦ Directives ◦ Filters
- 5. Templates HTML extended with directives and expressions. Angular “compiler” renderers DOM aka ”View” for Template. ng-app minimum for angular to work. <html> <script src=“angular.js“></script> <script src=“app.js“></script> <body ng-app=“myApp" ng-controller=“myController"> <h1>Sta se jede</h1> <table> <tr ng-repeat=“rest in restaurants"> <td>{{rest.name}}</td> <td>{{rest.score}}</td> </tr> </table> </body> <html>
- 6. Controller and $scope Controller is model/scope constructor Model != $scope $scope is an execution context for expressions $scope functions: ◦ $watch ◦ $apply
- 7. Modules Reusable container of app features. Info about all other modules that this module depends on. Angular injector is responsible for construction and lookup of dependencies.
- 8. Services View independent logic Built in: ◦ $http ◦ $location ◦ $timeout ◦ $filter ◦ $q ◦ …
- 9. Directives HTML extensions in templates Adding special behavior to custom elements attributes or classes Built in: ◦ ng-app ◦ ng-controller ◦ ng-click ◦ ng-model ◦ ng-show ◦ …
- 10. Filters Value formatters Can be used in templates, controllers or services Custom filters {{ 12 | currency }} //12$
- 11. Performance Lots of watchers can lag the ui (more then 2000) Every expression {{}}, every directive is new watcher ng-repeat instances new template/scope for each item bindonce in 1.3
- 12. Alternatives? Knockout.js/Backbone.js/Ember.js/React.js Metric AngularJS Backbone.js Ember.js Stars on Github 27.2k 18.8k 11k Third-Party Modules 800 ngmodules 236 backplugs 21 emberaddons StackOverflow Questions 49.5k 15.9k 11.2k YouTube Results ~75k ~16k ~6k GitHub Contributors 928 230 393 Chrome Extension Users 150k 7k 38.3k
- 14. Angular 2.0 <div ng-controller="SantaTodoController"> <input type="text" ng-model="newTodoTitle"> <button ng-click="addTodo()">+</button> <tab-container> <tab-pane title="Tobias"> <div ng-repeat="todo in todosOf('tobias')"> <input type="checkbox“ ng-model="todo.done"> {{todo.title}} <button ng-click="deleteTodo(todo)"> X </button> </div> </tab-pane> <div> <input type=“text” [value]=“newTodoTitle”> <button (click)=“addTodo()”>+</buton> <tab-container> <tab-pane title=“Good kids”> <div [ng-repeat|todo]=“todosOf('good')”> <input type=“checkbox” [checked]="todo.done"> {{todo.title}} <button (click)="deleteTodo(todo)"> X </button> </div> </tab-pane>
- 15. Angular 2.0 Angular 2.0 next year Angular 1.X will be supported for a year and half after 2.0 comes out. RIP controllers/$scope, directives, modules. controllers + template => web components. directives => component, template, decorative components. $scope => component. modules => ES6 modules. component, services: annotated ES 6 class. Web components (Polymer). ES6 (traceur).
Notes de l'éditeur
- Sluzbena dokumentacija Module dependencies Directives Filteri
- Template+controller Animate Resource Route
- Druga predavanja
- Index_1.html
- Index_2.html
- Index_3.html Dependency info
- Index_4.html
- Sort by Filter limit Conferencedashboard
- Toni/React.js
- Definirati module dependcies
- Nezna se jos kad ce izaci nije gotovo Svi osim jednog lika rade na Angularu 2.0