Downloaded 10 times
![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” }]; });](https://image.slidesharecdn.com/angularjs-150615091436-lva1-app6892/75/Angular-JS-deep-dive-3-2048.jpg)
![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>](https://image.slidesharecdn.com/angularjs-150615091436-lva1-app6892/75/Angular-JS-deep-dive-14-2048.jpg)
Uploaded byAxilis
Angular JS deep dive
AngularJS is a JavaScript MVC framework that uses HTML syntax extensions to add dynamic behavior to web pages. It consists of templates, expressions, controllers, models/scopes, modules, services, and directives that allow developers to build single page applications. Angular compiles templates containing directives and expressions into a view. Controllers define the model/scope and are used in templates to access data and functions. Modules allow reusable features and services provide view-independent logic.
Angular JS deep dive
- 1. AngularJS SUPERHEROIC JAVASCRIPT MVWFRAMEWORK
- 3. What is it? Reallybig 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 yourapp made of? ◦ Templates ◦ Expressions ◦ Controllers ◦ Model/Scope ◦ Modules ◦ Services ◦ Directives ◦ Filters
- 5. Templates HTML extended withdirectives 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 Controlleris model/scope constructor Model != $scope $scope is an execution context for expressions $scope functions: ◦ $watch ◦ $apply
- 7. Modules Reusable container ofapp 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 Builtin: ◦ $http ◦ $location ◦ $timeout ◦ $filter ◦ $q ◦ …
- 9. Directives HTML extensions intemplates 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 beused in templates, controllers or services Custom filters {{ 12 | currency }} //12$
- 11. Performance Lots of watcherscan 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.jsEmber.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
- 13.
- 14. Angular 2.0 <div ng-controller="SantaTodoController"> <inputtype="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.0next 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).
Editor's Notes
- #3 Sluzbena dokumentacija Module dependencies Directives Filteri
- #4 Template+controller Animate Resource Route
- #5 Druga predavanja
- #6 Index_1.html
- #7 Index_2.html
- #8 Index_3.html Dependency info
- #9 Index_4.html
- #11 Sort by Filter limit Conferencedashboard
- #13 Toni/React.js
- #14 Definirati module dependcies
- #15 Nezna se jos kad ce izaci nije gotovo Svi osim jednog lika rade na Angularu 2.0