angularjs - page - router angular navigationend
Cómo configurar una página de inicio en un proyecto iónico. (7)
Lo siento si esta es una pregunta estúpida. Todavía soy bastante nuevo en esto. Tengo una comprensión básica de cómo funciona la navegación con js angulares, pero no puedo averiguar cómo configurar una página de inicio. Quiero configurar mi página de inicio de sesión como mi página de inicio. La URL muestra que la página de inicio de sesión está abierta (" http://localhost:8100/#/template/login ") pero solo muestra un encabezado en blanco que sospecho es de índice (ion-nav-bar).
gracias.
index.html
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you''d like).
-->
<ion-nav-view class="slide-left-right"></ion-nav-view>
</body>
</html>
login.html
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<h1>lalalalala</h1>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>
app.js
angular.module(''starter'', [''ionic'', ''starter.controllers'', ''starter.services''])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state''s controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state(''tab'', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state(''tab.login'', {
url: ''/login'',
views: {
''login'': {
templateUrl: ''templates/login.html'',
controller: ''loginCtrl''
}
}
})
.state(''tab.dash'', {
url: ''/dash'',
views: {
''tab-dash'': {
templateUrl: ''templates/tab-dash.html'',
controller: ''DashCtrl''
}
}
})
.state(''tab.projects'', {
url: ''/projects'',
views: {
''tab-projects'': {
templateUrl: ''templates/tab-projects.html'',
controller: ''projectsCtrl''
}
}
})
.state(''tab.projects-detail'', {
url: ''/projects/:projectsId'',
views: {
''tab-projects'': {
templateUrl: ''templates/projects-detail.html'',
controller: ''projectsDetailCtrl''
}
}
})
.state(''tab.account'', {
url: ''/account'',
views: {
''tab-account'': {
templateUrl: ''templates/tab-account.html'',
controller: ''AccountCtrl''
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(''login'');
});
controllers.js
angular.module(''starter.controllers'', [])
.controller(''loginCtrl'', function($scope) {})
.controller(''DashCtrl'', function($scope) {})
.controller(''projectsCtrl'', function($scope, Chats) {
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
}
})
.controller(''ChatDetailCtrl'', function($scope, $stateParams, Chats) {
$scope.chat = Chats.get($stateParams.chatId);
})
.controller(''AccountCtrl'', function($scope) {
$scope.settings = {
enableFriends: true
};
});
Cambie su app.js a
.state(''login'', {
url: ''/login'',
controller: ''LoginCtrl'',
templateUrl: ''templates/login.html''
})
y $urlRouterProvider.otherwise(''/login'');
Si coloca su login.html en la carpeta correcta, entonces no habrá ningún problema.
Debe darle un nombre a su <ion-nav-view> en su plantilla index.html .
por ejemplo, <ion-nav-view name="viewContent"></ion-nav-view>
Luego, en sus rutas, usted especifica en qué parte de su aplicación desea que se represente su plantilla, por ejemplo:
.state(''login'', {
url: ''/login'',
views: {
''viewContent'': {
templateUrl: ''templates/login.html'',
controller: ''loginCtrl''
}
}
})
esto representará templates/login.html en el área de viewContent . Es por eso que el enrutador de UI es tan flexible, porque puede decirle exactamente qué partes deben reemplazarse al enrutar.
Si no necesita esa flexibilidad, simplemente escriba sus rutas sin la parte de views y agregue controller y templateUrl directamente a cada estado.
también su reserva probablemente debería ser $urlRouterProvider.otherwise(''/login'');
Hay un archivo config.xml. Ábrelo y verás la opción ''Página de inicio''. Luego ingrese cualquier página que desee comenzar.
He estado poniendo comentarios con respecto a su código, así que permítame formular una respuesta con algunos pasos que le gustaría seguir.
1:
Tiene un lío una vez que declara sus controladores, intente seguir una guía como this , al menos declare sus controladores / servicios / directivas de la misma manera, LoginCtrl y no loginCtrl y las otras cosas sin mayúscula como primera letra . Es solo un consejo mi amigo.
2:
.state(''tab.login'', {
url: ''/login'',
views: {
''login'': {
templateUrl: ''templates/login.html'',
controller: ''loginCtrl''
}
}
})
Aquí hay algo que necesita verificar, el nombre de su vista, tiene que login pero
<ion-view view-title="Login" name="login-view">
...
</ion-view>
así que cámbielo solo para login . Y haz lo mismo en tu ruta abstract .
Me gusta esto
<ion-view view-title="Login" name="login">
Y esto tan importante.
$urlRouterProvider.otherwise(''/login'');
que va al final del $stateProvider . De lo otherwise método siempre se redireccionará a /login en caso de que se haya encontrado alguna otra ruta
Si desea evaluar un éxito al iniciar sesión para mostrar ciertas vistas, no debe estar en el mismo estado.
Esto debería ser cierto:
.state(''login'',{
url: "/login",
views : {
''menuContent'' : {
templateUrl : "login.html",
controller : "LoginCtrl"
}
}
})
$urlRouterProvider.otherwise("/login");
Siga el pedido como consejo o guía sobre cómo escribir su app.js
<script id="login.html" type="text/ng-template">
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<h1>lalalalala</h1>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>
</script>
Supongo que los problemas están en su ruta por defecto:
$urlRouterProvider.otherwise(''/tab/login'');
Lo has definido dependiendo de la pestaña abastract:
$stateProvider
// setup an abstract state for the tabs directive
.state(''tab'', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
y este es su nombre de usuario:
.state(''tab.login'', {
url: ''/login'',
views: {
''login'': {
templateUrl: ''templates/login.html'',
controller: ''loginCtrl''
}
}
})
el nombre del estado es tab.login lo que significa que hereda de la pestaña .
por lo que su raíz es / tab / login .
este debe ser tu tabs.html :
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Login" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/login">
<ion-nav-view name="login"></ion-nav-view>
</ion-tab>
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
</ion-tabs>
Como puedes ver tu nombre de ion-nav-view:
<ion-nav-view name="login"></ion-nav-view>
debe coincidir con el definido en su estado:
.state(''tab.login'', {
url: ''/login'',
views: {
''login'': {
templateUrl: ''login.html'',
controller: ''loginCtrl''
}
}
})
No es necesario que establezca el nombre de la vista aquí ( login.html ):
<ion-view view-title="Login" name="login-view">
Otra cosa que he notado, usa el mismo nombre para dos vistas diferentes: tab-projects :
.state(''tab.projects'', {
url: ''/projects'',
views: {
''tab-projects'': {
templateUrl: ''templates/tab-projects.html'',
controller: ''projectsCtrl''
}
}
})
.state(''tab.projects-detail'', {
url: ''/projects/:projectsId'',
views: {
''tab-projects'': {
templateUrl: ''templates/projects-detail.html'',
controller: ''projectsDetailCtrl''
}
}
})
Otra cosa tiene más que ver con las convenciones. Si usa para los nombres de sus vistas que comienzan con la pestaña , probablemente debería hacer lo mismo para el inicio de sesión .
Aquí hay un plunker con algunos de sus códigos.
Tuve un problema similar ... simplemente abra su archivo app.js ... luego, en la parte inferior, encontrará $urlRouterProvider.otherwise(''/app/tabs''); así, por ejemplo, si la página que se está cargando actualmente es "pestañas", simplemente cambie las pestañas de valor a su nombre de página preferido para que esa página se cargue como la primera página predeterminada.