Si ayer veíamos como funcionaba el routing con AngularJS, hoy vamos a ver como aplicar la misma idea en Phonegap con Ionic (que recordemos, trabaja sobre Angular), pero trabajando con estados.
Angular, de hecho, dispone también de directivas para gestionar estados a través del módulo ui-router, con “$urlRouterProvider”, “$stateProvider”. Ionic sencillamente trabaja encima de estas, aplicando una capa extra de funcionalidades.
Primeros pasos
Creamos un proyecto desde cero, y en nuestro caso añadiremos la plataforma Android:
$ ionic start ionic-nav-project blank
$ cd ionic-nav-project
$ ionic platform android
$ ionic build android
Directiva < ion-nav-view>
De forma similar a Angular con < ui-router>, debemos indicar en index.html donde queremos que se produzca la navegación, para lo que usaremos la directiva < ion-nav-view>
El < ion-nav-view> es nuestro container, la directiva que el router de Ionic buscará para insertar en ella los templates. Entre otras cosas, soporta herencia y vistas nominales.
Está construido sobre la directiva de Angular < ui-router>, proporcionando además animaciones, histórico, etc.
Llamaremos a nuestra aplicación “navApp”, por lo que un index.html básico quedaría:
index.html:
<!DOCTYPE html>
<html ng-app="navApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Nav App</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body>
<ion-nav-view></ion-nav-view>
</body>
</html>
Definición de rutas y estados en JS
En Angular, ahora utilizaríamos $urlRouteProvider y $stateProvider para definir los templates que se incrustarían en la vista en función de las urls.
El funcionamiento con Ionic es similar, con la diferencia de que aquí el módulo que cargamos es el de Ionic, que monta su propia máquina de estados interna para poder determinar, con facilidad, en que vista estamos, de dónde venimos y a dónde podemos ir. Para ello utiliza los providers:
- $stateProvider: Nos permite declarar estados, que irán vinculados a una url, y que contendrán un template, o una url a un template.
- $urlRouteProvider: Se utiliza internamente cada vez que se especifica una url en la configuración de estados. Tiene la responsabilidad de observar $location, y en caso de que esta cambie, analiza una serie de reglas una por una hasta que encuentra una coincidencia.
Veamos como definiríamos un estado, y como usaríamos $urlRouterProvider para establecer la ruta por defecto.
app.js:
var app = angular.module('navApp', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home', {
url: '/',
template: '<p>Welcome to Nav App home page!</p>'
})
})
Otra opción, más habitual para el estado, es en lugar de incrustar el código del template, definir una url a un template:
$stateProvider.state('home', {
url: '/',
templateUrl: 'home.html'
})
DETALLE I: Si el estado contiene una URL a un template, Angular buscará primero en $templateCache, y en caso de no encontrar el template, hará una petición al servidor y lo guardará en la misma.
DETALLE II: Podemos utilizar la etiqueta type=”text/ng-template” y el id con el nombre de la página para que el template sea añadido a la cache, y evitemos tener que hacer el request.
Navegación con Tabs
Veamos como podemos aplicar ahora estos conceptos de navegación.
Layout
Creamos un layout con un par de Tabs:
index.html:
<!DOCTYPE html>
<html ng-app="navApp">
<head><!-- ... --></head>
<body>
<ion-nav-bar class="bar-positive">
</ion-nav-bar>
<ion-tabs class="tabs-positive">
<ion-tab icon="ion-home" ui-sref="home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-information" ui-sref="info">
<ion-nav-view name="info"></ion-nav-view>
</ion-tab>
</ion-tabs>
</body>
</html>
Explicando el código:
- < ion-nav-bar>: Hemos añadido una barra de navegación, donde se mostrará el título de nuestra vista.
- < ion-tabs>: Estamos utilizando la directiva ion-tabs de Ionic, que nos permite crear un conjunto de tabs a través de la directiva:
- < ion-tab>: Esta directiva crea un content, únicamente existente cuando dicho tab está activo. Además cada Tab tiene su propio histórico de navegación.
- Dado que el content solo existe para su propio tab, es dentro del mismo donde insertamos la directiva < ion-nav-view>. Al haber más de una directivas de ion-nav-view, al mismo nivel jerárquico, tenemos que darles un nombre a cada una para evitarle conflictos al router, lo que hacemos con name=”nombreDeMiVista”.
- ui-sref: esta directiva es similar a un href, indicándonos el estado al que queremos que se produzca una transición.
Javascript
Obviamente, ahora necesitamos tener 2 estados, por lo que nuestro JS quedará:
app.js:
var app = angular.module('navApp', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: '/',
views: {
home: {
templateUrl: 'home.html'
}
}
});
$stateProvider.state('info', {
url: '/info',
views: {
info: {
templateUrl: 'info.html'
}
}
});
});
Cabe destacar que hemos añadido la clave views (un objeto con todas nuestras subvistas para dicho estado). Esto se debe al uso de vistas nominales en ion-nav-view.
Cuando añadimos una vista a nuestro array views, su contenido es equivalente al que habríamos tenido en el estado en caso de no utilizar vistas nominales, por lo que podremos añadir atributos como:
- template
- templateUrl
- controller
- etc
Templates
Por supuesto, tendremos que crear 2 templates, uno para home.html y otro para index.html.
Para ello, podemos añadirlas en index.html, al final del body como:
<script type="text/ng-template" id="home.html">
<ion-view title="Home">
<ion-content padding="true">
<h2>Home Page</h2>
<p>Here's the main route for the app.</p>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="info.html">
<ion-view title="Info">
<ion-content padding="true">
<h2>Info page</h2>
<p>Here you are some more info</p>
</ion-content>
</ion-view>
</script>
O bien, crearlas en archivos separados, como:
home.html:
<ion-view title="Home">
<ion-content padding="true">
<h2>Home Page</h2>
<p>Here's the main route for the app.</p>
</ion-content>
</ion-view>
info.html:
<ion-view title="Info">
<ion-content padding="true">
<h2>Info page</h2>
<p>Here you are some more info</p>
</ion-content>
</ion-view>
Personalmente me gusta más esta segunda aproximación por que permite separar mejor el contenido.
A continuación podemos ver el resultado actual de nuestra aplicación:
Estado de navegación en el tab
Ahora que disponemos de un par de tabs, vamos a ver como se gestiona el estado de navegación dentro de un mismo tab. Para ello, vamos a crear un nuevo tab que será un listado de películas. al hacer click en una película podremos ver su sinopsis, y tendremos un botón “atrás” en la barra de navegación para volver al listado de películas.
Un servicio para acceder a nuestras películas
Dado que no podemos compartir contenido de un controlador a otro al existir en contextos distintos (vistas distintas), compartiremos un servicio entre los controladores de la vista de listado de películas y la vista de detalle. Es decir, lo que vamos a hacer ahora es utilizar una factoría de Angular para crear una representación singleton de nuestras películas (servicio), que podrá ser leída y actualizada desde multiples puntos de acceso. Si no has trabajando anteriormente con servicios en Angular, es recomendable leer la documentación al respecto.
app.factory('FilmsService', function() {
var films = [
{ title: "Captain Phillips",
details: "In telling the story of Capt. Richard Phillips (Tom Hanks), " +
"whose cargo ship was boarded by Somali pirates in 2009, " +
"director Paul Greengrass doesn't stop at gripping docudrama. " +
"With Hanks digging deep into the origins of an everyman's courage, " +
"the film raises the bar on action thrillers."},
{ title: "American Hustle",
details: "Only that scrappy virtuoso David O. Russell could morph a film about " +
"the Abscam political scandals of the late 1970s into a rollicking, " +
"emotionally raw human drama. Russell regulars – Christian Bale and Amy Adams from The Fighter, " +
"Jennifer Lawrence and Bradley Cooper from Silver Linings Playbook – " +
"help him turn the toxic mess of life on the edge into an exhilarating gift."},
{ title: "Her",
details: "Director Spike Jonze (Being John Malkovich, Adaptation) creates movies that " +
"help us see the world in startlingly funny and touching new ways. And in Her, " +
"set in the near future, Theodore (a sublime, soulful Joaquin Phoenix) falls hard " +
"for his computer operating system (voiced with humor, heat and heart by Scarlett Johansson) " +
"and makes us believe it. This is personal filmmaking at its glorious, groundbreaking peak."},
{ title: "Before Midnight",
details: "Nothing happens as two lovers, Jesse (Ethan Hawke) and Celine (Julie Delpy), " +
"continue to climb the Mount Everest of their relationship. In this story's third part, " +
"after 1995's Before Sunrise and 2004's Before Sunset, director Richard Linklater and " +
"pitch-perfect co-writers Hawke and Delpy create the defining love story of a generation."},
{ title: "The Wolf of Wall Street",
details: "This three-hour bolt of polarizing brilliance from Martin Scorsese, with a killer script " +
"by The Sopranos' Terence Winter, details the true tale of Jordan Belfort " +
"(Leonardo DiCaprio flares like a five-alarm fire in full blaze), who lived hoggishly high on securities " +
"fraud in the 1990s. Jordan and his co-scumbags (Jonah Hill crushes it as his wingman)" +
" numb moral qualms with coke, 'ludes and hookers. Scorsese's high-wire act of bravura " +
"filmmaking is a lethally hilarious take on white-collar crime. No one dies, but Wall Street victims" +
" will scream bloody murder."}
];
return{
films: films,
getFilm: function(index) {
return films[index];
}
}
});
Básicamente lo que hemos hecho es crear en la factoría un array json con unos cuantos diccionarios {title,details} de películas, de modo que cuando se cree el singleton devuelva un objeto con dicho array, y un método getFilm que nos devolverá la película para una cierta posición del array.
Estados abstractos
Para poder disponer de vistas anidadas, o varias vistas dentro de nuestro tab, crearemos lo que se llama un controlador abstracto, por lo que reestructuraremos nuestro código de routing de la siguiente forma:
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: '/',
views: {
home: {
templateUrl: 'home.html'
}
}
});
$stateProvider.state('info', {
url: '/info',
views: {
info: {
templateUrl: 'info.html'
}
}
});
$stateProvider.state('films', {
abstract:true,
url: '/films',
views: {
films: {
template: '<ion-nav-view></ion-nav-view>'
}
}
});
$stateProvider.state('films.index', {
url: '',
templateUrl: 'films.html',
controller: 'FilmsCtrl'
});
$stateProvider.state('films.detail', {
url: '/:film',
templateUrl: 'film.html',
controller: 'FilmCtrl',
resolve: {
film: function($stateParams, FilmsService) {
return FilmsService.getFilm($stateParams.film)
}
}
});
});
Explicando el código:
- Como podemos ver, home e info los hemos dejado igual.
- Vista abstracta: Hemos creado un nuevo estado films, con la peculiaridad de declarar abstract:true, que además en la única vista que contiene define directamente un template < ion-nav-view>< /ion-nav-view>
- Vistas anidadas: Hemos creado 2 nuevos estados, films.index y films.detail, que serán los que se anidarán dentro del estado abstracto anterior, cada uno con su url (relativa a la de la vista abstracta), su template, y su controlador.
- url: ‘/:film’: “/myUrl/:param” es una forma de pasar un parámetro a la url, de modo que estaríamos aceptando urls del estilo “/myUrl/45”. En el caso que nos ocupa, pasaremos el valor de la variable film como parámetro. Es equivalente a url: ‘/{film}’
- resolve: Resolve es un objeto cuyas claves mapean valores que pueden ser inyectados en el controlador de nuestro estado. Funciona con valores o elementos diferidos, por lo que es especialmente útil para cargas de datos asíncronos (podríamos imaginar que nuestro servicio de películas en lugar de contener el JSON, lo carga de un servidor).
En este caso utilizamos el método resolve para crear una variable con el contenido del método getFilm de nuestro servicio, al que le hemos pasado gracias a $stateParams el índice de la película seleccionada (tendremos que pasarlo como parámetro en el template del listado de películas). Ahora, podremos utilizar esta variable desde nuestro controlador FilmCtrl.
DETALLE: Hacemos esto del resolve en lugar de llamar directamente FilmsService.getFilm($index) en el controlador FilmCtrl, por que así podemos asegurarnos de que cuando se llama al controlador, los datos ya están disponibles.
Esta forma de trabajar es especialmente útil cuando hacemos una petición al servidor por datos al cambiar una ruta.
Controladores
Nuestros controladores serán bien sencillos, con la particularidad de que el controlador FilmCtrl tomará como parámetro la variable film que hemos creado en el punto anterior. Como el controlador es lo último que se carga en el ciclo de Angular, la variable con el contenido de la película ya existirá.
Veamos el código, también en app.js:
app.controller('FilmsCtrl', function($scope, FilmsService) {
$scope.films = FilmsService.films;
});
app.controller('FilmCtrl', function($scope, film) {
$scope.film = film;
});
Templates
films.html
<ion-view title="Films">
<ion-content>
<ion-list>
<ion-item ng-repeat="film in films" class="item item-icon-right" ui-sref="films.detail({film: $index})">
<span>{{film.title}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
DETALLE: Como en los tabs, utilizamos ui-sref para indicar el estado al que se tiene que acceder, al pulsar sobre una película. No obstante, en este caso además le estamos pasando como argumento el índice de la iteración de ng-repeat en la que nos encontramos.
Esto es lo que, en la definición de dicho estado, recuperamos mediante $stateParams.
film.html
<ion-view title="Film">
<ion-content padding="true">
<h2>{{film.title}}</h2>
<span>{{film.details}}</span>
</ion-content>
</ion-view>
Botón atrás
Para que nuestra navegación dentro de las películas tenga sentido, nos falta un botón “atrás” en la barra de navegación, que incluiremos, dentro de la barra de navegacion en index.html, con la directiva ion-nav-back-button.
Además, añadimos también, como es lógico, el tab relativo a las películas.
Nuestro index.html se modifica conforme a:
<!DOCTYPE html>
<html ng-app="navApp">
<head><!-- ... --></head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-tabs class="tabs-positive">
<ion-tab icon="ion-home" ui-sref="home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-film-marker" ui-sref="films">
<ion-nav-view name="films"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-information" ui-sref="info">
<ion-nav-view name="info"></ion-nav-view>
</ion-tab>
</ion-tabs>
</body>
</html>
Resultados
Veamos como afectan al diseño los cambios que hemos hecho.
Podemos observar como el botón back de la barra superior, nos devuelve de nuevo, de forma automática, a la vista de la que procedíamos, es decir, el listado de películas.
Y con esto, queda concluido el tema.
Es todo por hoy.
¡Saludos!
Felicitaciones, excelente articulo.
¡¡Gracias!!
Excelente tutorial.
Una consulta ¿Como podria hacer los mismo pero en vez de tabs usar un side-menu?
¿me podrias ayudar?
https://www.facebook.com/profile.php?id=100006757273157
¡Gracias!
Si quieres hacer algo parecido con un side-menu, te recomiendo que mires la directiva ionSideMenus de ionic .
Verás que es muy sencillo implementar el side-menu, y una vez tienes los elementos del menu, puedes hacer la navegación del mismo modo que hasta ahora, mediante la directiva ui-sref.
Un saludo,
Excelente explicaciones, me gustaría que agreguen seguido a este tutorial como seria conectarse a una base de datos como recuperar datos y como hacer un login…
Gracias
¡Gracias!
Sería interesante hacer algún post sobre lo que indicas, me lo apunto para más adelante.
De momento, puedes ver como guardar datos de forma sencilla mediante localStorage en este post: http://blog.enriqueoriol.com/2014/08/phonegap-app-con-ionic-y-angularjs.html
Saludos,
Cordial saludo, excelente tutorial, pero creo que tengo un fallo de directorios, podrias poner como tienes el arbol de directorios y ficheros. Gracias de antemano.
¡¡Me has pillado de vacaciones!!
Gracias por el cumplido. Antes de nada, comentar que el tutorial es muy básico, por lo que todo el código Javascript va en app.js, y todos los templates están directamente en el directorio www.
Para tener las cosas un poco ordenadas, lo mejor sería crear una carpeta de templates (y luego, en app.js asegurarnos de que los paths a los templates incluyen dicha carpeta en la ruta). Y por supuesto, para una app más completa, empezaría a separar los JS y templates por vistas para tener el código más organizado (puedes ver un ejemplo aquí: PhoneGap & Ionic: Social auth con Google+).
En todo caso, respondiendo a tu pregunta, el árbol de directorios es el siguiente:
ionic-nav-project
/hooks
/platforms
/plugins
/scss
/www (este es el que te interesa)
/css
/img
/js
/app.js
/film.html
/films.html
/home.html
/index.html
/info.html
¿Soluciona esto tu error?
Saludos
Muchísimas gracias por el tutorial. Soy nueva en desarrollo con ionic y me ha venido genial para entender los estados y cambios de vista. El problema que tengo es que me funciona perfectamente en el navegador pero si lo lanzo en el emulador, en ionic view app o instalo el apk en el dispositivo solo veo la pantalla en blanco. No me carga el estado incial. He problado a meter el html de la página inicial en index.html y entonces sí muestra la página inicial pero al pulsar los botones tampoco cambia de vista. He leído consejos en otros foros pero no consigo hacerlo funcionar fuera del navegador. ¿Alguna idea de cómo solucionarlo?
¡Hola María!
Lo primero, para entender qué puede estar pasando, es que mires de debugar en el dispositivo (a través de chrome inspector), para ver si está fallando algo.
En todo caso, si dices que no carga el estado inicial, y que la navegación no funciona, podría ser algun problema con las vistas.
¿Estas cargando una URL por defecto, como en el ejemplo?
Eso es lo que hago en éste código con el $urlRouterProvider.otherwise('/'), donde se le está diciendo a la app que si no hay una url, por defecto cargue esta "/", que es justamente la URL que he asociado al estado "home" (ojo, este estado no puede ser abstracto).
var app = angular.module('navApp', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home', {
url: '/',
template: '< p>Welcome to Nav App home page!'
})
})
Sobretodo, mira la salida de consola, a ver que pistas te da. Ya me dirás como avanzas 😉
Saludos,
Buenas Enrique.
Primero de todo, enhorabuena por tan magnífico tutorial. Sencillo, ameno y muy fácil.
Tengo una duda (de concepto, básicamente).
Veo que podemos pintar los datos de la variable "films" de forma que obtenemos un listado con el que acceder al detalle de cada ficha. Mi duda es sobre la estructura para, por ejemplo poder clasificar primero las películas por países (o años, o lo que fuera), de forma que se generara un primer menú (lista de enlaces), que al pulsar mostrara otro listado (donde aparecieran las películas que se corresponden con ese primer filtro) para ya desde ahí poder llegar a la ficha de detalle como en este tutorial.
Gracias de antemano por tu tiempo y por compartir tu conocimiento.
Un saludo 😉
¡Hola Pedro!
Gracias por tu interés. Por lo que comentas, lo que necesitarías es ampliar la estructura de navegación, por un lado, así como manipular el modelo de datos y el servicio para incluir los filtros que quieres, es decir:
1 – Navegación: Deberías crear un nuevo estado ("films.search", por ejemplo) donde cargues un template con los filtros que el usuario puede elegir. Este estado, lo deberías asociar a la URL ' ' de la vista astracta films, moviendo el estado films.index a otra URL. De este modo, al seleccionar el tab de films, se cargará el subestado de búsqueda en lugar del de películas.
2 – Modelo de datos: En el servicio films donde creas el json con películas, deberás añadirles el campo "year", o los campos que quieras para filtrar.
3 – Servicio: En el servicio, deberás añadir un método para seleccionar el filtro, y modificar el método para listar las películas de forma que aplique el filtro seleccionado anteriormente. Esto en realidad lo puedes plantear de muchas maneras, pero de este modo guardas el estado del filtro en el servicio, lo que te permite liberar a las vistas de gestionar esta información. En este caso, la idea es que cuando selecciones un filtro desde la vista, este se guarde en el servicio de películas y la vista simplemente de paso a la siguiente vista (listado de películas), que ya se cargarán filtradas.
Un saludo, y no olvides compartirlo con tus contactos si te ha sido de ayuda 😉
Muy buen tutorial. Estoy empezando con ionic y me ha servido mucho. Lo único he tenido problemas al hacer vistas anidadas de tercer nivel, pej: films-films_actores-actor, lo he intentado hacer como la primera con un estado index, pero no me dejaba, luego en vez de una url:’ ‘, he puesto url:’index’ y me ha dejado. El tema de los estados abstractos no lo tengo muy claro.
Muchas gracias
Hola Raúl…
¡¡Me alegro de que te sirva!!
En cuanto a lo de los estados abstractos, la gracia es que te sirven para tener un layout (y controlador, si quieres) común a varias vistas que vas a ir reemplazando ahí dentro, en su ui-view o ion-nav-view.
¿Los problemas con la anidación de tercer nivel, pueden ser por que hayas olvidado meter un ui-view o ion-nav-view en el segundo primer nivel?
Te paso un ejemplo de anidación de segundo nivel: http://codepen.io/-kaik-/pen/oxeLvZ
¡¡Saludos!!
Muchas gracias…ya lo voy a checkear..
Hola, es la primera vez que veo tu blog y me ha parecido muy bueno, y me sigue sorprendiendo su contenido, comentaste en este post que puedes pedir una vista a un servidor, usualmente cuando programo una app las vistas las tengo del lado del cliente en mi carpeta views y desde hace tiempo me preguntaba si se pudiera hacer eso que comentas, entonces, puedo hacer un servicio en NodeJS que sirva vistas y yo desde un controlador en mi app pedirlas y que sean renderizadas en un ion-nav-view ?
Hola Enrique, espero te encuentres bien. Ante todo quiero felicitarte por tus tutoriales, son excelentes y me han servido mucho.
Tengo un problema en este punto. No puedo lograr enlazar una pagina lista con su detalle. Estoy programando sobre una base que se creo desde Creator de Ionic.
Este es el codigo de los controladores:
//lista
.controller(‘administraciNCtrl’, [‘$scope’, ‘$stateParams’,’obtenerPerfiles’, // The following is the constructor function for this page’s controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams,obtenerPerfiles) {
var initView = function(){
$scope.perfiles = obtenerPerfiles.query();
//console.log(‘Scope es:’,$scope);
}
$scope.$on(‘$ionicView.loaded’,function(){
initView();
});
}])
//detalle
.controller(‘profesionalDetailCtrl’, function ($scope, perfil) {
var initView = function(perfil){
$scope.perfil = perfil;
//console.log(‘Scope es:’,$scope);
}
$scope.$on(‘$ionicView.loaded’,function(){
initView();
});
})
——————————————————————————-
Factory:
.factory(‘obtenerPerfiles’, function($resource){
var getProfile = {};
getProfile.getPerfil = function(nombrePerfil){//aqui recibo el nombre perfil para mas adelante usar los datos pero mientras tanto tengo el json que genero de prueba.
var datos;
datos = {«nombre»: «yuyu»,»direccion»:»carrera 11″,»perfil»:»Administradorcita»};
return datos;
};
return $resource(‘bd/administracion.json’, {}, { query: {method:’GET’, isArray:true}});
});
————————————————————————-
Estados:
.state(‘cONSTRYELO2.administraciN’, {
url: ‘/page7’,
views: {
‘side-menu21’: {
templateUrl: ‘templates/administraciN.html’,
controller: ‘administraciNCtrl’
}
}
})
.state(‘cONSTRYELO2.profesionalDetail’, {
url: ‘/perfilDetalle/:nombrePerfil’,
views: {
‘side-menu21’: {
templateUrl: ‘templates/profesionalDetail.html’,
controller: ‘profesionalDetailCtrl’,
resolve:{
perfil: function($stateParams,obtenerPerfiles){
return obtenerPerfiles.getPerfil($stateParams.nombrePerfil);
}
}
}
}
})
———————————————————————————–
HTML:
Llevo un buen rato intentado linkear ambas paginas pero no he logrado. Hay algo que no estoy tomando en cuenta?
Muchas gracias por tu ayuda.