Angular Js

carregando...
levante a mão!
<angular-js ng-talk="meet2brains"/>
HTML
<html>
<form> <title>
<tr>
<ul>
<span> <option>
<td>
<input>
<a>
<br> <em> <table>
<script>
<strong> <legend>
<div>
<select> <button>
<textarea>
<html> <video>
<header>
<form> <title>
<tr> <canvas>
<ul>
<span> <option>
<td> <audio>
<input>
<a>
<br> <em> <section>
<script> <table>
<meter>
<strong> <legend>
<div> <menu>
<select> <button> <hgroup>
<textarea> <progress>
<ng-view> <ng-switch>
<html> <video>
<header>
<form> <title>
<tr> <canvas>
<ul>
<span> <option>
<td> <audio>
<input>
<a>
<br> <em> <section>
<script> <table>
<meter>
<strong> <legend>
<div> <menu>
<select> <button> <hgroup>
<textarea> <progress>
<minha-tag> ng-model=""
<body ng-app>
platéia
<input ng-model="nome">
<p>Olá, {{nome}}!</p> Olá, platéia!

<script href="angular.js"/>
</body>
<body ng-app>
<p>Olá, {{nome}}!</p>
</body>
<body ng-app>
</body>
<body ng-app>
</body>
mas... e o CONTROLLER?
function SorteadorController($scope) {
$scope.numero = 0;
$scope.sortearNumero = function () {
$scope.numero =
Math.floor(Math.random() * 100);
};
sorteador-controller.js
<body ng-app>
<div ng-controller="SorteadorController">
<button ng-click="sortearNumero()">
fazer sorteio!
</button>
<p>O número sorteado foi: {{numero}}</p>
</div>
<script href="sorteador-controller.js"/>
</body>
<body ng-app>
fazer sorteio!
</button>
</div>
</body>
<body ng-app>
fazer sorteio!
</button>
</div>
</body>
<body ng-app>
fazer sorteio!
</button>
</div>
</body>
MVC
MVC
$scope.model = {
id: 1,
nome: 'Farfinhos',
idade: 18
};
MVC
<ul>
<li ng-repeat="usuario in usuarios">

{{usuario.id}} - {{usuario.nome}}
</li>
</ul>
MVC
function Controller($scope) {
$scope.model = { ... };
$scope.handlerClick =
function () { ... };
}
APP
APP Controller
Serviço
APP Controller
Serviço
APP Controller
<view>
Serviço
APP Controller
<view>
filters
Como usar isso tudo para montar uma
aplicação single-page?
cria-se uma aplicação...
window.appTalk = angular.module('appTalk', []);
window.appTalk = angular.module('appTalk', []);
<div ng-app="appTalk">
...
</div>
cria-se controllers...
window.appTalk
.controller('SobreController', [
'$scope',
function ($scope){
... código do controller ...
}
]);
cria-se serviços...
window.appTalk
.service('ServicoNecessario',
function (){
this.funcionalidade = function ()
{...};
... código do serviço ...
});
cria-se templates...
<div>
Detalhes sobre {{nome}}: <br>
{{info}}
</div>
configura-se as rotas...
window.appTalk = angular
.module('appTalk', [])
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/sobre', {
templateUrl: 'sobre.html',
controller: 'SobreController'
})
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/home});
}]);
$routeProvider
.when('/sobre', {
})
.when('/home', {
})
}]);
$routeProvider
.when('/sobre', {
})
.when('/home', {
})
}]);
$routeProvider
.when('/sobre', {
})
.when('/home', {
})
}]);
e o DOM?
daqui pra frente,
a mágica desaparece
diretiva
Serviço
APP Controller
diretivas
<view>
filters
Serviço
APP Controller
diretivas scope
<view>
filters
Serviço
$injector
APP Controller
diretivas
<view>
filters
E - Elemento:
<my-directive></my-directive>
A - Atributo:
<div my-directive="exp"> </div>
C - Classe:
<div class="my-directive: exp;"></div>
M - Comentário:

<DOM>
<DOM>
COMPILE
<DOM>
COMPILE
LINK
<DOM>
COMPILE
LINK
window.appTalk.directive(
'directiveName', function factory(injectables) {
var definicaoDeDiretiva = {
priority: 0,
template: '<div></div>',
templateUrl: 'directive.html',
replace: false,
transclude: false,
restrict: 'A',
scope: false,
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink() { ... },
post: function postLink() { ... }
}
},
link: function postLink(scope, iElement, iAttrs) { ... }
};
return definicaoDeDiretiva;
});
leaky abstraction
Obrigado!
mas espere...
Henrique Netto
cursosdante
@gmail.com
Henrique Netto

Angular Js

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular Js

Uploaded by

Copyright:

Available Formats

carregando...

<p>Olá, {{nome}}!</p> Olá, platéia!

<p>O número sorteado foi: {{numero}}</p>

<p>O número sorteado foi: {{numero}}</p>

<p>O número sorteado foi: {{numero}}</p>

<p>O número sorteado foi: {{numero}}</p>

<li ng-repeat="usuario in usuarios">

... código do controller ...

... código do serviço ...

You might also like