02 Angularjs: Framework Analysis

02 AngularJS
Framework Analysis
Public Code Repository
by
Sergey N. Bolshchikov
http://bolshchikov.net
sergey.bolshchikov@new-proimage.com
New ProImage, 2012
Outline
I.
II.
Introduction
Philosophy
Outline
I.
II.
Introduction
Philosophy
o
t
e
n
i
l
t
n
i
u
o
e
v
o
i
N td
s
u
J
y
a
d
Introduction
I want to build well structured and dynamic web application.
Header-Navigation Bar
click
Content Wrapper
click
Tree
Content
Footer
Introduction
Traditional solution:
< 37%
LOC
HTML
> 63% LOC

Javascript
Philosophy
Angular is what HTML could have been if it had been designed for
applications.
HTML is a great declarative language for static documents. It does not

contain much in the way of creating application.
Building web-applications is an exercise in what do I have to do, so that I

trick the browser in to do what I want.
That's why we have frameworks - set of utility functions and libraries for
DOM manipulation.
Angular takes another approach.
Angular teaches the browser new syntax.
Introduction
AngularJS solution:
< 59% LOC

HTML
> 41%
LOC
Java
script
Static HTML
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
</head>
<body>
<table class="table table-stripped">
<thead>
<tr>
<th>ID</th><th>Complete</th><th>Name</th><th>Deadline</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td><td>false</td><td>Do Groceries</td><td>01/08/12</td>
</tr>
<tr>
<td>1002</td><td>false</td><td>Barber the cat</td><td>01/08/12</td>
</tr>
</tbody>
</table>
</body>
</html>
See example live
Declarative HTML
<!doctype html>
<head>
</head>
<body>
<table class="table table-stripped" ng-controller="TodoCtrl">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr ng-repeat="todo in todos">
<td ng-click="setTrue(todo.id)">{{todo.id}}</td>
<td>{{todo.done}}</td>
<td>{{todo.name}}</td>
<td>{{todo.deadline}}</td>
</tr>
</tbody>
</table>
</body>
</html>
See example live
Declarative HTML
<!doctype html>
<head>
</head>
<body>
<thead>
<tr>
</tr>
</thead>
<tbody>
</tr>
</tbody>
</table>
</body>
</html>
Declarative HTML
<!doctype html>
<head>
</head>
<body>
<thead>
<tr>
</tr>
</thead>
<tbody>
</tr>
</tbody>
</table>
</body>
</html>
Declarative HTML
<!doctype html>
<head>
</head>
<body>
<thead>
<tr>
</tr>
</thead>
<tbody>
</tr>
</tbody>
</table>
</body>
</html>
Declarative HTML
<!doctype html>
<head>
</head>
<body>
<thead>
<tr>
</tr>
</thead>
<tbody>
</tr>
</tbody>
</table>
</body>
</html>
MVC
Angular says:
"There are many ways to structure the code for an
application.
For Angular apps, we encourage the use of the ModelView-Controller (MVC) design pattern to decouple the code
and to separate concerns.
With that in mind, let's use a little Angular and JavaScript to
add model, view, and controller components to our app."
Controller
a controller is a JavaScript function
It contains data
It specifies the behavior
It should contain only the business logic needed for a
single view.
Controller
function TodoCtrl(scope) {
scope.todos = [
{
'id': 1001,
'done': false,
'name': 'Do Groceries',
'deadline': new Date()
},
{
'id': 1002,
'done': false,
'name': 'Barber the cat',
}];
scope.setTrue = function(id) {
var el = (function(id){
for (var i=0; i<scope.todos.length; i++) {
if (scope.todos[i].id === id) {
return scope.todos[i]
}
}
})(id);
el.done = true;
}
}
TodoCtrl.$inject = ['$scope'];
Controller
scope.todos = [
{
'id': 1001,
'done': false,
},
{
'id': 1002,
'done': false,
}];
}
}
})(id);
el.done = true;
}
}
Controller
scope.todos = [
{
'id': 1001,
'done': false,
},
{
'id': 1002,
'done': false,
}];
}
}
})(id);
el.done = true;
}
}
Scope
an object that refers to the application model
(application itself)
an execution context for expressions like
{{ todo.name }}
Scopes are arranged in hierarchical structure which
mimic the DOM structure of the application
Scopes can watch expressions and propagate events
Scope
<html ng-app>
root
Scope
1001
false
Groceries
01/
08
1002
false
Barber
01/
08
<table ng-controller="TodoCtrl">
TodoCtrl
Scope
<td>{{todo.id}}</td>
</tr>
Repeater
Repeater
Scope
Scope
</table>
</html>
Template
Model
View
Controller
scope.todos = [
{
'id': 1001,
'done': false,
},
{
'id': 1002,
'done': false,
}];
}
}
})(id);
el.done = true;
}
}
Model: attrs of Scope

scope.todos = [
{
Model
'id': 1001,
'done': false,
},
{
'id': 1002,
'done': false,
}];
}
}
})(id);
el.done = true;
}
}
Template
<!doctype html>
<head>
</head>
<body>
<thead>
<tr>
</tr>
</thead>
<tbody>
</tr>
</tbody>
</table>
</body>
</html>
Data-binding and interaction
See live example
Routing
angular.module('myApp').
config(['$routeProvider' ,
function($routeProvider ) {
$routeProvider .when(
'/folder/:name' ,
{templateUrl : 'partials/folder.html' ,
controller : FolderCtrl
});
}])
Performance
Browser support: IE 8+, Chrome, FF, Safari, Opera
Framework size: 503KB
Application size: 756KB

02 Angularjs: Framework Analysis

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

02 Angularjs: Framework Analysis

Загружено:

Авторское право:

Доступные форматы

02 AngularJS

> 63% LOC

HTML is a great declarative language for static documents. It does not

Building web-applications is an exercise in what do I have to do, so that I

Angular takes another approach.

Angular teaches the browser new syntax.

< 59% LOC

See example live

See example live

<tr ng-repeat="todo in todos">

Model: attrs of Scope

Data-binding and interaction

See live example

Browser support: IE 8+, Chrome, FF, Safari, Opera

Framework size: 503KB

Application size: 756KB

Вам также может понравиться