1º FEMUG - AM
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
@dejaneves
jaimeneves.com.br
Easy to organize your code
Template
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
$scope.phones = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
});<body ng-controller="PhoneListController">
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>Model
And Result
Book: Angularjs in Action
MyModule.directive('myCustomer', function() {
return {
restrict:'A',
template: 'Name: {{customer.name}} Address:{{customer.address}}'
};
});<div ng-controller="Controller">
<div my-customer></div>
</div>HTML Template
Simpler configuration than plain directives
Promote sane defaults and best practices
MyModule.
component('phoneList', {
template:
'<ul>' +
'<li ng-repeat="phone in $ctrl.phones">' +
'<span>{{phone.name}}</span>' +
'<p>{{phone.snippet}}</p>' +
'</li>' +
'</ul>',
controller: function PhoneListController() {
this.phones = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
}
});Data Binding in Classical Template Systems
Data Binding in Angular Templates
myApp.factory('clientId', function clientIdFactory() {
return 'a12345654321x';
});function factory(name, factoryFn, enforce) {
return provider(name, {
$get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
});
}
function service(name, constructor) {
return factory(name, ['$injector', function($injector) {
return $injector.instantiate(constructor);
}]);
}var Pessoa = function(nome, idade) {
return {
nome: nome,
idade: idade
}
}
var maria = Pessoa("Maria", 23);
maria.idade; // 23var Pessoa = function(nome, idade) {
this.nome = nome;
this.idade = idade;
}
var maria = new Pessoa("Maria", 23);
maria.idade; // 23