Embed Size (px)
Citation preview
AngularJSSUPERHEROIC JAVASCRIPT MVW FRAMEWORK
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” }];});
What is your app made of?◦ Templates◦ Expressions◦ Controllers◦ Model/Scope◦ Modules◦ Services◦ Directives◦ Filters
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>
Controller and $scope Controller is model/scope constructor
Model != $scope
$scope is an execution context for expressions
$scope functions:◦ $watch◦ $apply
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.
Services View independent logic
Built in:◦ $http◦ $location◦ $timeout◦ $filter◦ $q◦ …
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◦ …
FiltersValue formatters
Can be used in templates, controllers or services
Custom filters
{{ 12 | currency }} //12$
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
Alternatives?Knockout.js/Backbone.js/Ember.js/React.js
Metric AngularJS Backbone.js Ember.jsStars 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
Community http://ngmodules.org/
http://angular-ui.github.io/bootstrap/
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>
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).
