2016-02-11 2 views
2

Мое приложение имеет два типа шаблонов. Первый используется на страницах «выведенных из системы», а второй используется на страницах «вошел в систему».Как перейти от одного шаблона к другому в Ionic

Ниже index.html, который используется со всеми «вышли из» страницы шаблона:

<!DOCTYPE html> 
<html ng-app="appLoggedOut"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title>Services 4 Uber</title> 

    <link href="lib/ionic/css/ionicons.min.css" rel="stylesheet" > 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <script src="js/loggedout/app.js"></script> 
    <script src="js/loggedout/controllers.js"></script> 
    <script src="js/loggedout/routes.js"></script> 
    <script src="js/loggedout/services.js"></script> 
    <script src="js/loggedout/directives.js"></script> 

    <link href="css/app.css" rel="stylesheet"> 

    </head> 
    <body> 
    <div> 
     <div class="spacer" style="width: 300px; height: 15px;"></div> 
     <ion-nav-view></ion-nav-view> 
    </div> 
    <div class="bar bar-footer bar-dark"> 
     Footer for Logged out pages 
    </div>  
    </body> 
</html> 

Мне нужно установить все мои «вошли в» страницы, чтобы показать заголовок и другой колонтитул. Таким образом, это похоже на то, что у меня есть другой index.html, используемый только для «зарегистрированных» страниц.

Ниже то, что я хочу, чтобы использовать все мои «авторизованы» страницы:

<!DOCTYPE html> 
<html ng-app="appLoggedIn"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title>Services 4 Uber</title> 

    <link href="lib/ionic/css/ionicons.min.css" rel="stylesheet" > 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <script src="js/loggedin/app.js"></script> 
    <script src="js/loggedin/controllers.js"></script> 
    <script src="js/loggedin/routes.js"></script> 
    <script src="js/loggedin/services.js"></script> 
    <script src="js/loggedin/directives.js"></script> 

    <link href="css/app.css" rel="stylesheet"> 

    </head> 
    <body ng-controller="homeCtrl"> 

    <div class="bar bar-header bar-light"> 
     Header used only in logged in pages 
    </div> 

    <div> 
     <ion-nav-view></ion-nav-view> 
    </div> 

    <div class="bar bar-footer bar-dark"> 
     Footer for logged in pages 
    </div>  

    </body> 
</html> 

Как я могу определить свои маршруты, чтобы перейти от моей страницы входа в систему (с помощью «вышли из» шаблон) для зарегистрированная страница (используя шаблон «вошел в систему»)?

Я хочу изменить всю страницу, а не просто загружать представление внутри тега "".

Спасибо.

+0

Я думаю, вы не понимаете, как работает ионный. Прошу прощения, но ваш подход не имеет никакого смысла. Вам просто нужно ** один ** 'index.html', и ваш контент будет отображаться' ionic/angularjs' в зависимости от ваших '' состояний '/ "шаблонов" ', например. вход в систему/выход из системы. Посмотрите на шаблоны на [ионной стартовой странице] (http://ionicframework.com/getting-started/) и попробуйте адаптировать его для вас ... – Beat

+0

Привет, я понял ионные работы. Мои сомнения просты. Мне нужно это: первая страница с index.html с использованием и шаблон с содержимым представления. В нем ссылка для перехода на вторую страницу. На этой второй странице мне нужно все по-другому. Я не хочу использовать index.html. Я хочу использовать другую страницу с тегами (другая главная страница) и другая страница шаблона с содержимым представления. Я не хочу перемещаться, используя только главную страницу index.html. Так понятно ? – Olivertech

ответ

1

Я только обсуждаю о том, как перемещаться из одного шаблона в другой. ионный, который использовал angularjs или javaScript. это следовать простой вызов государственного или URL-адрес и т.д.
например Каждый контроллер имеет маршрутизации и есть HTML страница

angular.module('starter.storeDetailsController', []) 
.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('storeDetails', { 
      url: '/user/:store', 
      abstract:true, 
      templateUrl: 'templates/store_detail.html', 
      controller: 'StoreDetailsCtrl' 
     }) 
}) 

.controller('StoreDetailsCtrl', ['$scope', '$ionicLoading', '$timeout', function($scope, $ionicLoading, $timeout) { 
    $scope.goToNextPage=function(){ 
     $state.go('home'); //here navigate from one template to another 
    } 
    }]) 

И еще одна страница

angular.module('starter.homeDetailsController', []) 
.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('home', { 
      url: '/home', 
      abstract:true, 
      templateUrl: 'templates/home.html', 
      controller: 'HomeCtrl' 
     }) 
}) 

    .controller('HomeCtrl', ['$scope', '$ionicLoading', '$timeout', function($scope, $ionicLoading, $timeout) { 
    console.log('Welcome'); 
}]) 

выше примера показывают два контроллера StoreDetailsCtrl и HomeCtrl и Я перехожу из StoreDetailsCtrl в HomeCtrl на домашней странице. это перемещение по javascript, но есть много способов навигации по странице.

в HTML-формате по href = #/url, а также используется ui-sref = "stateName" в ионной для навигации по странице.

+0

Привет Anurag. Да, это часть моей проблемы. Я уже реализовал это. Но мое сомнение имеет и другую роль. Страница назначения по-прежнему использует основной index.html. Я хочу перейти на вторую страницу, и этот использует другой тип index.html. Итак, в начале координат у меня есть индекс, html с ion-nav-view и страница шаблона с содержимым представления. В целевой странице страницы у меня есть другая главная страница с ion-nav-view с использованием других элементов управления и страницы шаблона с использованием этой второй главной страницы. Как это сделать ? – Olivertech

Смежные вопросы