i'm trying to make an app where the first time you use it I save some information locally. My purpose is that when the next times a person open the app it will be shown another page.
The problem is that I don't know how to load a simple page (not a part like a template) from my controller function.
Here my html
<body ng-app="starter" ng-controller="MainCtrl">
<ion-content class="center" [....]
<button class="button button-calm button-full button-clear button-large" ng-click="saveAll(name, job)">
<span style="font-size: 1.4em;">start</span>
</button>
</ion-content>
</body>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: "/home",
controller: "HomeCtrl",
template: "<h1>Home page</h1>"
})
$urlRouterProvider.otherwise('/first')
})
.controller('MainCtrl', function($scope, $localstorage, $location) {
$scope.setName = function(name) {
if (name) {
$localstorage.set('name', name.toLowerCase());
console.log(name);
}
}
$scope.getName = function() {
alert($localstorage.get('name'));
}
$scope.setJob = function(job) {
if (name) {
$localstorage.set('job', job.toLowerCase());
console.log(job);
}
}
$scope.getJob = function() {
alert($localstorage.get('job'));
}
$scope.saveAll = function(name, job) {
if (name) {
$localstorage.set('name', name.toLowerCase());
console.log(name);
}
if (job) {
$localstorage.set('job', job.toLowerCase());
console.log(job);
}
if (name && job) {
$location.path("home");
}
}
})
You can navigate routes using:
$location.path('/home');
or:
$state.go('home');
So.. in your MainCtrl you could put something like this:
$scope.getName = function() {
return $localstorage.get('name');
};
$scope.getJob = function() {
return $localstorage.get('job');
};
var init = function(){
if($scope.getName() && $scope.getJob()){
$location.path('/home');
}
};
init();
UPDATE:
Ionic has ui-router installed by default. ui-router documentation.
Each route accept a templateUrl property. I don't know which is you folder structure so you need to change them to work correctly:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeCtrl',
templateUrl: 'home/home.html'
})
.state('first', {
url: '/first',
controller: 'FirstCtrl',
templateUrl: 'first/first.html'
})
.state('second', {
url: "/second",
controller: "SecondCtrl",
templateUrl: 'second/second.html'
});
$urlRouterProvider.otherwise('/first');
})
Related
I'm trying to make a Master-Detail module, but is not working. When I tap on the link that should go to the detail page, nothing happens, and in the console doesn't show any error. I'm working over a template created by Ionic Creator.
These are my controllers:
.controller('administraciNCtrl', ['$scope', '$stateParams','obtenerPerfiles', function ($scope, $stateParams,obtenerPerfiles) {
var initView = function(){
$scope.perfiles = obtenerPerfiles.query();
//console.log('Scope es:',$scope);
}
$scope.$on('$ionicView.loaded',function(){
initView();
});
}])
.controller('profesionalDetailCtrl', function ($scope, perfil) {
var initView = function(perfil){
$scope.perfil = perfil;
//console.log('Scope es:',$scope);
}
$scope.$on('$ionicView.loaded',function(){
initView();
});
})
This is the factory:
.factory('obtenerPerfiles', function($resource){
var getProfile = {};
getProfile.getPerfil = function(nombrePerfil){
/*I will use nombrePerfil later, first I wanna test it works*/
var datos;
datos = {"nombre": "yuyu","direccion":"carrera 11","perfil":"Administradorcita"};
return datos;
};
return $resource('bd/administracion.json', {}, { query: {method:'GET', isArray:true}});
});
This is the state:
.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);
}
}
}
}
})
And finally this is the HTML:
<ion-item class="item-icon-left item-icon-right" id="administraciN-list-item47" ui-sref="cONSTRYELO2.profesionalDetail({nombrePerfil:'{{perfil.nombre}}'})">
<i class="icon ion-android-globe"></i>3km
<span class="item-note">Ver más</span>
<i class="icon ion-android-add-circle"></i>
</ion-item>
This is happening only when login page is used as fallback. Same login page is working fine when main page is used as fallback. I'm very new to this framework and any help for fixing this would be much appreciated. Please feel free to ask if you need any other code for solving this. Thanks in advance!
Here is my config,
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html'
})
.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'AppCtrl'
}
},
authenticate: false
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html',
controller: 'mainCtrl'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html',
controller: 'mainCtrl'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.snapshot', {
url: '/snapshot',
views: {
'menuContent': {
templateUrl: 'templates/snapshot.html'
}
}
})
.state('app.callqueues', {
url: '/callqueues',
views: {
'menuContent': {
templateUrl: 'templates/callqueues.html'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
// $urlRouterProvider.otherwise('/app/search');
$urlRouterProvider.otherwise('/app/login');
});
This is my loginCtrl(login controller),
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $location, $http, $log, $state) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
// $ionicModal.fromTemplateUrl('templates/login.html', {
// scope: $scope
// }).then(function(modal) {
// $scope.modal = modal;
// });
// Triggered in the login modal to close it
// $scope.closeLogin = function() {
// $scope.modal.hide();
// };
// Open the login modal
// $scope.login = function() {
// $scope.modal.show();
// };
$scope.chartConfig = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Hello'
},
loading: false
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
var username = $scope.loginData.name;
var password = $scope.loginData.password;
console.log("username" + $scope.loginData.name);
if (username == "admin#as" && password == "admin") {
console.log("if part");
$location.path("#/app/search");
} else {
console.log("error");
// $("#errorpwd").css({"display":"block"});
// $scope.message = "Error";
// $scope.messagecolor = "alert alert-danger";
}
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
// $timeout(function() {
// $scope.closeLogin();
// }, 1000);
};
})
and finally this is my login html code,
<ion-view view-title="Login" name="login-view">
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">Login</h1>
<!--<button class="button button-clear button-primary icon-left ion-close-circled" ng-click="modal.hide()"></button>-->
</ion-header-bar>
<ion-content>
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.name">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<label class="item">
<button nav-clear class="button button-block button-positive" type="submit">Log in</button>
</label>
</div>
</form>
</ion-content>
You have not injected ui-router as a dependency to the module,
angular.module('starter.controllers', ['ui.router']);
also refer the js for the ui.router
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
I'm really lost. I use ui-route in my angular app and i'm trying to extend my base controller. My base controller (appCtrl) works but child controller (navigationCtrl) doesn't on URL app/welcome. Do you know why???
index.html
<body>
<div id="wrap">
<!-- View for login and login-choose -->
<div ui-view="login"></div>
<!-- View for app -->
<div ui-view="app"></div>
</div>
<!-- SCRIPTS -->
<script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./js/jasny-bootstrap.min.js"></script>
<script type="text/javascript" src="./js/angular.min.js"></script>
<script type="text/javascript" src="./js/angular-ui-router.min.js"></script>
<script type="text/javascript" src="./js/angular-touch.min.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
<script type="text/javascript" src="./js/app.navigation.js"></script>
</body>
app.js
var app = angular.module('tvm', ['ui.router', 'ngTouch']);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/");
// Set up the states
$stateProvider
.state('login', {
url: "/",
views: {
"login": { templateUrl: "./pages/login.html" }
}
})
.state('login-choose', {
url: "/login-choose",
views: {
"login": { templateUrl: "./pages/login-choose.html" }
}
})
.state('app', {
url: "/app",
views: {
"app": {
templateUrl: "app.html",
controller: 'appCtrl'
}
}
})
.state('app.welcome', {
url: "/welcome",
templateUrl: './pages/welcome.html'
})
.state('app.profile', {
url: "/profile",
templateUrl: './pages/profile.html'
});
// remove # from URL
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
app.controller('appCtrl', function($scope) {
$scope.parentMethod = function () {
alert('aaa');
};
});
app.navigation.js
app.controller('navigationCtrl', ['$scope', '$controller', function($scope, $controller) {
// extend app controller
angular.extend(this, $controller('appCtrl', {$scope: $scope}));
var nav = $('nav');
var content = $('#content, #bar');
var navWidth = nav.width() + 'px';
var navIcon = $('#bar .nav_icon .circle');
$scope.circleHover = function(e) {
navIcon.addClass('hover');
};
$scope.circleLeave = function(e) {
navIcon.removeClass('hover');
};
// open / close nav
$scope.toggleNav = function(e) {
if(nav.hasClass('visible'))
closeNav();
else
openNav();
};
// when swipe left to right open nav
$scope.openSwipeNav = function(e) {
openNav();
};
// close nav
$scope.closeNav = function(e) {
var elem = angular.element(e.target);
if( (nav.hasClass('visible')) && (!$(elem).is('#bar')) )
closeNav();
};
// when swipe right to left close nav
$scope.closeSwipeNav = function(e) {
closeNav();
};
var openNav = function() {
nav.animate({
left: 0
}, 400, function() {
$(this).addClass('visible');
});
content.animate({
left: navWidth
}, 400, function() {
$(this).removeClass('full');
});
navIcon.addClass('active');
};
var closeNav = function() {
nav.animate({
left: '-' + navWidth
}, 400, function() {
$(this).removeClass('visible');
});
content.animate({
left: 0
}, 400, function() {
$(this).addClass('full');
navIcon.removeClass('active');
navIcon.removeClass('hover');
});
};
}]);
You are providing the states in wrong way should use the below code. It may help you get out of your problem
// Set up the states
$stateProvider
.state('login', {
url: "/",
views: {
"login": { templateUrl: "./pages/login.html" }
}
})
.state('login-choose', {
url: "/login-choose",
views: {
"login": { templateUrl: "./pages/login-choose.html" }
}
})
.state('app', {
url: "/app",
templateUrl: "app.html" //no need to define the controller here. If this route is not usable else define the controller separately for both app and app.welcome
})
.state('app.welcome', {
url: "/welcome",
templateUrl: './pages/welcome.html',
controller: 'appCtrl' // need to mention the controller in which you wantto perform the functionality of app/welcome
})
.state('app.profile', {
url: "/profile",
templateUrl: './pages/profile.html'
});
Ok I managed to solve it by add angular.extend to base controller
app.controller('appCtrl', ['$scope', '$controller', function($scope, $controller) {
angular.extend(this, $controller('navigationCtrl', {$scope: $scope}));
}]);
And I call controller in my first state:
.state('app', {
url: "/app",
views: {
"app": {
templateUrl: "app.html",
controller: 'appCtrl'
}
}
})
Then it also fires navigationCtrl
the stateProvider of my app have a nested view (base.gallery -> base.gallery.detail) and if i click on a link inside my gallery it should show the detailview, but it doesn't...
the link looks good for me, but it only changes the url in the browser and it logs "get displayed" from the onEnter-function, but it doesn't display the template("modules/album/detail/view/detail.html") in my ui-view...
e.g.: for my link <a ui-sref="base.photos.detail(params(item.id))" class="list-item-link" href="/gallery/21/detail/457">
.state("base", {
abstract: true,
templateUrl: 'modules/base/views/base.html',
controller: function($scope, navigationData){
$scope.navigation.data = navigationData;
},
resolve:{
navigationData:function(navigationSvc){
var response = navigationSvc;
return response;
}
}
})
.state("base.categories", {
url: "/categories",
templateUrl: "modules/album/list/view/list.html",
controller: function($scope, data){
$scope.settings.data = data;
$scope.settings.type = "categories";
},
resolve:{
data:function(listSvc){
var response = listSvc.load("categories");
return response;
}
}
})
.state("base.category", {
url: "/category/:id",
templateUrl: "modules/album/list/view/list.html",
controller: function($scope, data){
$scope.settings.data = data;
$scope.settings.type = "galleries";
},
resolve:{
data:function($stateParams, listSvc){
var response = listSvc.load("category/"+$stateParams.id);
return response;
}
},
})
.state("base.gallery", {
url: "/gallery/:id",
templateUrl: "modules/album/list/view/list.html",
controller: function($scope, data, $stateParams){
$scope.settings.data = data;
$scope.settings.type = "photos";
},
resolve:{
data:function($stateParams, listSvc){
var response = listSvc.load("gallery/"+$stateParams.id);
return response;
}
}
})
.state("base.gallery.detail", {
url: "/detail/:photo_id",
templateUrl: "modules/album/detail/view/detail.html",
controller: function($scope, $stateParams){
console.log("doesn't get displayed ");
$scope.settings.type = "photo";
},
onEnter: function(){
console.log("get displayed");
}
})
html of my index where i load all my lists and i als want to display my detail view inside that ui-view...
...
<div class="content" ui-view></div>
...
html of my list view
<li class="list-item" ng-repeat="item in list.data">
<a ui-sref="{{state}}(params(item.id))" class="list-item-link">item.title</a>
</li>
UPDATE
k i got it ;) i need views and then use the # to target it in the same ui-view from my index.html
.state("base.gallery.detail", {
url: "/detail/:photo_id",
views:{
"#" : {
controller: function($scope, $stateParams, listSvc){
$scope.settings = {};
$scope.settings.type = "photos";
$scope.photo = listSvc.data[$stateParams.id_photo-1];
console.log($stateParams);
},
template: "<h2>detail</2><div>{{photo.title}}</div>"
}
});
I am building an app using Ionic Framework. I am trying to move to a new view/page.html, but when I click on the list it doesn't go to the new view/page. However the URL changes. Why am I having this issue and what is the problem?
This is the Html
<a class="item item-icon-left item-icon-right" ng-click="viewCarLog()">
<i class="icon ion-model-s"></i>
Car Log
<i class="icon ion-chevron-right ion-accessory"></i>
</a>
Here is the app.js
.state('app', {
abstract: true,
url: "/app",
templateUrl: "app/layout/menu-layout.html"
})
.state('app.home', {
url: "/home",
views: {
"tab-home": {
templateUrl: "app/home/home.html"
}
}
})
.state('app.settings', {
url: "/settings",
views: {
"tab-settings": {
templateUrl: "app/settings/settings.html"
}
}
})
.state('app.car-log', {
url: "/car",
templateUrl: "app/car/car-log.html",
controller: 'CarLogCtrl'
})
.state('app.location', {
url:"/location",
templateUrl: "app/location/location.html"
})
.state('login', {
url:"/login",
templateUrl: "app/login/login.html"
});
This is the Home controller that is trying to open a new view/page
(function() {
'use strict';
angular.module('myDrive').controller('HomeCtrl', ['$state', '$scope', HomeCtrl]);
function HomeCtrl($state, $scope) {
var vm = this;
// TODO:: Getting Data from Server (WEB API)
//
$scope.viewCarLog = function() {
$state.go("app.car-log");
};
};
})();
This is a CarLogCtrl. Currently empty as it functionality of this isn't yet implemented. Am I missing something in the controller to show the view?
(function() {
'use strict';
angular.module('myDrive').controller('CarLogCtrl', ['$state', '$scope', CarLogCtrl]);
function CarLogCtrl($state, $scope) {
var vm = this;
// TODO:: Do something
};
})();
Looking for a help, and tips and guidance for this.
Found an issue with not being able to open a view. What happened was that in app.js a state needs to have a view included to display the page.
The following made it work.
.state('app.car-log', {
url: "/car",
views: {
"tab-home": {
templateUrl: "app/car/car-log.html"
}
}
})
Please correct me if I am wrong. But this worked to fix the issue I had.