@eliasdelcid wrote:
Please help me to understand how can i configure my app Urls. I am trying to do a simple app with a tab in the home page with three options and by default it load the second tab. I want to use a url for each tab option. I've tried and seen some tutorials but when i am trying it doesn't work. Please look a sample in code pen and help me to understand.
I want to use a template for home and it contains the tab, each tab option have their own template.
here is the code also:
INDEX.HTML
<html ng-app="myApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></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-bar class="bar-positive"> <ion-nav-back-button class="button-icon ion-arrow-left-c"> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> <script id="templates/home.html" type="text/ng-template"> <ion-tabs class="tabs-top tabs-background-positive tabs-color-light"> <ion-tab title="CATEGORIAS" shref="home.one"> <ion-nav-view name="home-one"></ion-nav-view> </ion-tab> <ion-tab title="HOY" ng-controller="PostsCtrl" shref="home.two"> <ion-nav-view name="home-two"></ion-nav-view> </ion-tab> <ion-tab title="FAVORITOS" shref="home.three"> <ion-nav-content name="home-three"></ion-nav-content> </ion-tab> </ion-tabs> </script> <script id="templates/one.html" type="text/ng-template"> <ion-view view-title="One TAB"> <ion-content> <h2>PRINCIPAL</h2> </ion-content> </ion-view> </script> <script id="templates/two.html" type="text/ng-template"> <ion-view view-title="Two TAB"> <ion-content> <h2>CATEGORIAS</h2> </ion-content> </ion-view> </script> <script id="templates/three.html" type="text/ng-template"> <ion-view view-title="Three TAB"> <ion-content> <h2>FAVORITOS</h2> </ion-content> </ion-view> </script> </body> </html>APP.JS
app = angular.module('myApp', ['ionic']); app.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '/', abstract: true, templateUrl: "templates/home.html", }) .state('home.one', { url: '/one', views: { 'home-one': { templateUrl: "templates/one.html", } } }) .state('home.two', { url: '/two', views: { 'home-two': { templateUrl: "templates/two.html", } } }) .state('home.three', { url: '/three', views: { 'home-three': { templateUrl: "templates/three.html", } } }) $urlRouterProvider.otherwise('/home/two') });(Sorry if my english isn't too good)
Posts: 1
Participants: 1