Se crea app.js
(function () {
var app = angular.module('pokedex', []);
app.controller('PokemonController', function () {
this.pokemon = {
id: "001",
name: "Bulbasaur",
species: "Seed Pokémon",
type: [ "Grass", "Poison" ],
height: "2′4″ (0.71m)",
weight: "15.2 lbs (6.9 kg)",
abilities: [ "Overgrow", "Chlorophyll"]
};
});
})();
SE DEFINE EL MODULO pokedex
<!DOCTYPE html>
<html ng-app="pokedex">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pokédex</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-controller="PokemonController as pkmCtrl">
<h1>{{pkmCtrl.pokemon.name}} #{{pkmCtrl.pokemon.id}}</h1>
<h2>{{pkmCtrl.pokemon.species}}</h2>
<img src="img/{{pkmCtrl.pokemon.name | lowercase}}.jpg">
<h2>Pokédex</h2>
<ul>
<li><strong>Type</strong> {{pkmCtrl.pokemon.type.join(', ')}}</li>
<li><strong>Height</strong> {{pkmCtrl.pokemon.height}}</li>
<li><strong>Weight</strong> {{pkmCtrl.pokemon.weight}}</li>
<li><strong>Abilities</strong> {{pkmCtrl.pokemon.abilities.join(', ')}}</li>
</ul>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario