Introducción a AngularJS

The Super-heroic JavaScript MVW
Marcos A. Reynoso (marcosareynoso@gmail.com)
Introducción a

Que es AngularJS ?
AngularJS es un framework javascript opensource
desarrollado por ingenieros de Google.
Un framework para crear aplicaciones web del lado del
cliente, ejecutándose con el conocido single-page
applications (aplicación de una sóla página) .
Extiende el tradicional HTML con etiquetas propias
(directivas)
Basado en MVC (Modelo-Vista-Controlador).

Hola Mundo con AngularJS
1. doctype html>
2. <html ng-app>
3. <head>
4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.
js"></scrip>
5. </head>
6. <body>
7. <div>
8. <label>Name:</label>
9. <input type="text" ng-model="yourName" placeholder="Enter a name here">
10. <hr>
11. <h1>Hello {{yourName}}!</h1>
12. </div>
13. </body><!
14. </html>

Acerca del funcionamiento
1. El browser carga el html y parsea este
dentro del DOM.
2. El browser carga la libreria de
angular.js
3. Angular espera por el evento
DOMContentLoaded.
4. Angular busca la directiva ng-app, la
cual define el alcance de la aplicación.
5. El módulo especificado en ng-app (si
hay alguno) es usado para configurar
el $injector.
6. El $injector se utiliza para crear el
servicio $compile, así como el
$rootScope.
7. El servicio $compile es usado para
compilar el DOM y linkearlo con el
$rootScope.

Acerca del funcionamiento
Compiler: recorre el DOM y recoger todas las
directivas. El resultado es una función linkeada.
Link: combinar las directivas con un Scope y
produce un live view. Cualquier cambio en el
modelo del Scope se reflejan en la vista, y
cualquier interacción del usuario con la vista se
reflejan en el modelo del Scope. Esto produce Two
Way Data Binding

Controllers / Scope
<body ng-controller="SpicyCtrl">
<button ng-click="chiliSpicy()">Chili</button>
<button ng-click="jalapenoSpicy()">Jalapeño</button>
<p>The food is {{spice}} spicy!</p>
</body>
function SpicyCtrl($scope) {
$scope.spice = 'very';
$scope.chiliSpicy = function() {
$scope.spice = 'chili';
}
$scope.jalapenoSpicy = function() {
$scope.spice = 'jalapeño';
}
}

Directives
Extienden HTML para estructurar la aplicación
● Declarativo
● Usa la información que tiene en el Scope
● Crea el DOM al vuelo.
<div>
<div ng-repeat=”user in users”>
<h3>{{user.name}}</h3>
<h3>{{user.descripcion}}</h3>
</div>
</div>
Este itera en una colección en el Scope y crea el DOM.

Custom Directives
app.directive('ngMyCustomDirective', function() {
return {
restrict: 'A',
template: '<div><h1>Esta es mi directiva</h1></div>'
}
});
Despues se puede usar :
<span ngMyCustomDirective></span>
restrict
‘A' - <span ng-myD></span>
'E' - <ng-myD></ng-myD>
'C' - <span class="ng-myD"></span>
'M’ -

Filters
Uso:
{{ expression | filter }}
{{ expression | filter1 | filter2 }}
Ejemplos:
4.678 | number:2
myArray | orderBy:'timestamp':true
Angularjs | uppercase

Custom Filters
<!doctype html>
<html ng-app="MyReverseModule">
<head>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<input ng-model="greeting" type="greeting"><br>
No filter: {{greeting}}<br>
Reverse: {{greeting|reverse}}<br>
Reverse + uppercase: {{greeting|reverse:true}}<br>
</div>
</body>
</html>
angular.module('MyReverseModule', []).
filter('reverse', function() {
return function(input, uppercase) {
var out = "";
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
// conditional based on optional argument
if (uppercase) {
out = out.toUpperCase();
}
return out;
}
});
function Ctrl($scope) {
$scope.greeting = 'hello';
}
index.html script.js

Services
function myController($loc, $log) {
this.firstMethod = function() {
// use $location service
$loc.setHash();
};
this.secondMethod = function() {
// use $log service
$log.info('...');
};
}
// which services to inject ?
myController.$inject = ['$location', '$log'];

$http Service
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

$http Service
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Metodos
● $http.get
● $http.head
● $http.post
● $http.put
● $http.delete
● $http.jsonp

$resource Service
angular.module('waWeatherService', [])
.factory('WeatherService', ['$resource', function ($resource) {
return $resource('http://api.openweathermap.org/data/2.5/:action',
{},
{
today: {
method: 'JSONP',
params: {
action: 'weather',
mode: 'json',
units: 'metric',
callback: 'JSON_CALLBACK'
}
}
}
);
}])

Custom Services
var app = angular.module('myApp', []);
app.factory('testFactory', function(){
return {
sayHello: function(text){
return "Factory says "Hello " + text + """;
},
sayGoodbye: function(text){
return "Factory says "Goodbye " + text + """;
}
}
});
function HelloCtrl($scope, testService, testFactory)
{
$scope.fromFactory = testFactory.sayHello("World");
}
Service /Controller HTML
<div ng-controller="HelloCtrl">
<p>{{fromFactory}}</p>
</div>
Salida
Factory says "Hello World"

Routing
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller:
PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);

Introducción a AngularJS

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (10)

Similaire à Introducción a AngularJS

Similaire à Introducción a AngularJS (20)

Dernier

Dernier (20)

Introducción a AngularJS