Angular JS deep dive
Download as PPTX, PDF1 like1,546 views
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.
![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/85/Angular-JS-deep-dive-3-320.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/85/Angular-JS-deep-dive-14-320.jpg)
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).
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