my code is working fine. but when i click on login button it changes the state as shown in the pic, it is changing its url but not opening that page.any help how can i redirect to next page?
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
login.html
<ion-view view-title="login">
<ion-header-bar>
<h1 class="title">Login</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeLogin()">Close</button>
</div>
</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.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</div>
</form>
</ion-content>
</ion-view>
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'templates/login.html',
controller: 'AppCtrl'
})
.state('app.menu', {
url: '/home',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
' menuContent': {
templateUrl: 'templates/search.html'
}
}
})
});
Controllers.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $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();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
$state.go('app.search');
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
You made the search state being a child state of the app state (which displays your login).
So it will first display the template with the login, and this template does not include anything to help the other state being shown.
I think you want your states to be :
login with url /login
app with url /app and abstract
And then app.search with url /search.
Then in your url bar you will see /app/search and it will be the right URL and right state you are looking for.
Related
The documentation seems a little sparse on this particular case, however I'm working off of the "Multiple Views About Page" section of this tutorial, which is supported by this SO post.
I'm trying to convert one of my pages to a parent state that renders each tab as child states. The syntax below doesn't throw an error, however only the tab headers are rendering, none of the content. I've set breakpoints in the init functions in the child controllers and nothing fires, and I'm not getting any errors back in the console. I've also created a breakpoint in the $stateChangeError callback and am getting nothing in there as well.
parent state
<div class="container">
<h2> <i class="fa fa-user"></i> Click to Call Settings for {{user.fullName}}</h2>
<uib-tabset active="active" id="usersettings">
<uib-tab index="0" heading="SIP Settings">
<div ui-view="sipSettings"></div>
</uib-tab>
<uib-tab index="1" heading="Favorites">
<div ui-view="favorites"></div>
</uib-tab>
</uib-tabset>
</div>>
favoritesPartial.html (edited for the sake of space)
<form name="favoritesForm">
<div ng-repeat="favorite in pbxFavorites" id="favoritesContainer">
</div>
</form>
<div class="form-footer">
<button type="button" class="btn btn-white" ng-click="$root.goBack()">Go Back</button>
<button type="submit" class="btn btn-primary" ng-click="saveFavorites()">Save Favorites</button>
</div>
sipSettingsPartial.html (edited for the sake of space)
<form name="sipSettingsForm">
<div class="row">
<div class="form-footer">
<button type="button" class="btn btn-white" ng-click="$root.goBack()">Go Back</button>
<button type="submit" class="btn btn-primary" ng-click="savePbxSettings()">Save Settings</button>
</div>
</form>
state provider
.state('clickToCall', {
url: '/clickToCall',
templateUrl: 'app/components/clickToCall/clickToCall.html',
controller: 'ClickToCallController',
controllerAs: 'vm',
parent: 'app',
authenticate: true,
resolvePolicy: {when:'LAZY', async: 'WAIT'},
resolve:{
security:['$q', '$rootScope', 'parentResolves', 'routeErrors', function($q, $rootScope, parentResolves, routeErrors){
if($rootScope.isLoggedIn()){
return $q.resolve();
} else {
return $q.reject(routeErrors.NO_ACCESS);
}
}]
},
params:{
'user':''
},
view:{
'sipSettings#clickToCall': {
templateUrl: 'app/components/clickToCall/sipSettingsPartial.html',
controller: 'SipSettingsController'
},
'favorites#clickToCall':{
templateUrl: 'app/components/clickToCall/favoritesPartial.html',
controller: 'FavoritesController'
}
}
})
folder structure
screen shot
Stupid typo...... named the section view instead of views, also left the templateUrl in the parent state. The following config works:
.state('clickToCall', {
url: '/clickToCall',
controller: 'ClickToCallController',
controllerAs: 'vm',
parent: 'app',
authenticate: true,
resolvePolicy: {when:'LAZY', async: 'WAIT'},
resolve:{
security:['$q', '$rootScope', 'parentResolves', 'routeErrors', function($q, $rootScope, parentResolves, routeErrors){
if($rootScope.isFirmAdmin2 || $rootScope.isCloud9){
return $q.resolve();
} else {
return $q.reject(routeErrors.NO_ACCESS);
}
}]
},
params:{
'user':''
},
views:{
'':{
templateUrl: 'app/components/clickToCall/clickToCall.html'
},
'sipSettings#clickToCall': {
templateUrl: 'app/components/clickToCall/sipSettingsPartial.html',
controller: 'SipSettingsController'
},
'favorites#clickToCall':{
templateUrl: 'app/components/clickToCall/favoritesPartial.html',
controller: 'FavoritesController'
}
}
})
First of all, I'm sorry for a long question, but it just has to be like that. Unfortunately...
I have a couple of templates and a couple of routing logic, all linked in separate files. For some reason the template I want to load (which depends on the region selected), doesn't load its region template. It loads, if I click it second time. Please note I have tried ever solution from this topic:
Reloading current state - refresh data
Nothing worked for me.
I have managed to resolve one (another region) of them by placing "{reload:true}" inline in the html code, like this:
<a data-ui-sref="uk-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>
Now I did the same for another template and it is not working. This is my html:
<div class="btn us-btn" data-ng-controller="carCtrlUs">
<script type="text/ng-template" id="careersTplUs.html">
<div class="closer">
<span class="close-me" data-ng-click="ok()">X</span>
</div>
<uib-accordion close-others="true">
<div uib-accordion-group class="modal-body modone panel-default pull-right" is-open="false">
<uib-accordion-heading>
<p class="car-heading">Sales Department <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</p>
</uib-accordion-heading>
<ul>
<li><a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a></li>
<li><a data-ui-sref="us-crm" data-ui-sref-opts="{reload:true}">Client Relationship Manager</a></li>
</ul>
</div>
<div class="modal-body modtwo panel-default pull-right" uib-accordion-group is-open="false">
<uib-accordion-heading>
<p class="car-heading">Marketing Department <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</p>
</uib-accordion-heading>
<ul>
<li><a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Web Developer</a></li>
<li><a data-ui-sref="us-crm" data-ui-sref-opts="{reload:true}">Marketing Coordinator</a></li>
</ul>
</div>
</uib-accordion>
<div class="show-me" ui-view></div>
</script>
<button class="btn" ng-click="open()" data-ui-sref="us-intro">United States</button>
</div>
app.js:
var app = angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ui.router']);
controller, for this template:
app.controller('carCtrlUs', function($scope, $http, $uibModal) {
$http.get('json/jobs-us.json').then(function(response) {
$scope.placeholder = response.data.default;
$scope.specs = response.data.specs;
$scope.open = function() {
var modalContent = $uibModal.open({
templateUrl: 'careersTplUs.html',
controller : 'modalContentCtrlUs',
controllerAs: '$ctrl',
size: 'lg',
backdropClass: 'backdropOver',
openedClass: 'modal-opened',
resolve: {
items: function() { return $scope.specs; },
items2: function() { return $scope.placeholder;}
}
})
console.log($scope.placeholder);
console.log($scope.specs);
console.log($scope.specs.web-dev);
}
});
});
app.controller('modalContentCtrlUs', function($scope, $uibModalInstance, items, items2) {
$scope.specs = items;
$scope.placeholder = items2;
$scope.ok = function() {
$uibModalInstance.close();
}
});
factory.js:
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("us-intro", {
url:"/intro",
templateUrl: "templates/us/start.html"
})
$stateProvider
.state("us-web", {
url: "/web-developer/",
templateUrl: "templates/us/web-developer.html",
})
.state("us-crm", {
url: "/crm/",
templateUrl: "templates/us/crm.html"
})
/*next .state*/
}]);
Template:
<div ng-repeat="(k, v) in specs.webdev">
<h3>{{::v["job-title"]}}</h3>
<p>{{::v["job-body"]}}</p>
United States Apply Here:
<p>{{::v["job-apply"]}}</p>
</div>
As you can see I'm using ui-bootstrap (modal and accordion, since it is all in a modal window).
What can I do to make it refresh instantly? I'm stuck for days on this and it is frustrating... What am I doing wrong here?
EDIT: Please note that I know "::" is for one-way data binding. I've tried without it and the result is the same. I can probably resolve this by placing the data in question in the .json file, but that would really be an ugly hack.
<div ng-repeat="(k, v) in specs.webdev">
<h3>{{::v["job-title"]}}</h3>
<p>{{::v["job-body"]}}</p>
United States Apply Here:
<p>{{::v["job-apply"]}}</p>
</div>
The "::" avoid data binding to reduce digest cycle. Try to remove them.
<a data-ui-sref="uk-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>
// it should be
<a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>
I have solved this..What I wanted to do is to make the "URL" the same. I have changed the url to manifest the region by the region code, so it is working now.
For example:
UK:
$stateProvider
.state("de-web", {
url: "/web-developer-de",
templateUrl: "templates/de/web-developer.html",
})
.state("de-crm", {
url: "/crm-de",
templateUrl: "templates/de/crm.html"
})
Italy:
$stateProvider
.state("it-web", {
url: "/web-developer-it",
templateUrl: "templates/it/web-developer.html",
})
.state("it-crm", {
url: "/crm-it",
templateUrl: "templates/it/crm.html"
})
United States:
$stateProvider
.state("us-web", {
url: "/web-developer-us",
templateUrl: "templates/de/web-developer.html",
})
.state("us-crm", {
url: "/crm-us",
templateUrl: "templates/de/crm.html"
})
Although this works, I'm not happy. How can it be achieved that the templates are being loaded into the same url?
I've pretty much used the top solution from UI-Router multiple named views not working with my angular app, but my ui-view does not seem to be updating, but rather just disappearing altogether. There must be some really small detail I'm missing that I've been stuck on for a long time...
I have an index.html page, with a [div ui-view=""] that is replaced on the home state. This ui-view (frontpage.html) has another [div ui-view="search-result"] which I'm hoping gets updated (change text to "successful template replacement") from a state change, but when the state changes, the entire [div ui-view=""] from index.html disappears instead when the search button is clicked.
All relevant script tags are included in my index.html.
index.html:
<body ng-app="...">
<div class="container">
<div ui-view=""></div>
</div>
app.js:
angular.module('...', [ 'ui.router','ui.bootstrap']).
config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('main', {
url: "/",
templateUrl: "/app/states/frontpage/frontpage.html"
})
.state('search', {
url : "/search/:query",
views: {
'search-result#search': {
template: 'successful template replacement'
}
}
}).run(function(){});
frontpage.html:
<div class="row" ng-controller="MainController">
some stuff here
<div class="col-xs-9">
<input type="text" class="inline" ng-model="searchText" placeholder="Search..."></input>
<button class="btn btn-default inline" type="button" ng-click="search()">Search</button>
<div ui-view="search-result"></div>
</div>
</div>
mainCtrl.js
angular.module('...')
.controller('MainController', ['$scope','$state', function($scope,$state) {
$scope.searchText;
$scope.search = function(){
console.log('going to state search with searchText: ' + $scope.searchText);
$state.go('search',{query:$scope.searchText});
}
}]);
In case that 'search' state should go to template of the 'main' ... it must be its child (check the parent: 'main')
.state('main', {
url: "/",
templateUrl: "/app/states/frontpage/frontpage.html"
})
.state('search', {
parent: 'main', // parent is main, named view will find its target
url : "/search/:query",
views: {
'search-result#search': {
template: 'successful template replacement'
}
}
}
I am new to Ionic and AugularJS and I am having a problem opening up a modal box upon click on a checkbox/radio button on the third option for hashtag search in the settings page. I have included an ng-controller and ng-click to take action. I looked in the debugger and it displayed an error:
GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms]
I know that 404 Not Found means it didn't find the templateUrl but every nav page I have is in the index.html and they work fine except hashtag-modal.html in the app.js file. Why isn't it working and how do I resolve this issue?
app.js
// Navigation pages
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'index.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
})
.state('settings', {
url: '/settings',
templateUrl: 'settings.html'
})
.state('hashtag-modal', {
url: '/hashtag-modal',
templateUrl: 'hashtag-modal',
controller: 'hashtag-modalCtrl'
})
$urlRouterProvider.otherwise("/index"); // if no url found, go back to index
})
// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope)
{
$scope.hashtagValue = 'Search'; // default value
$scope.hashtag = function()
{
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
};
}]);
// hashtag search modal
app.controller('hashtag-modalCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});
index.html
<!-- SETTINGS -->
<script id="settings.html" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="Settings" hide-back-button="false">
<ion-content class="padding">
<!-- The content of the page -->
<p>Check one of the options below to set how you wish to categorize and view your Instagram photos.
</p>
<div class="settings-list">
<label class="item item-radio">
<input type="radio" name="settings-group" value="recent">
<div class="item-content">
Recent
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="settings-group" value="popular">
<div class="item-content">
Most Popular
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();modal.show();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</ion-content>
</ion-view>
</script>
<!-- HASHTAG SEARCH MODAL -->
<script id="hashtag-modal.html" type="text/ng-template">
<ion-modal-view hide-back-button="false">
<ion-header-bar>
<h1 class="title">Hashtag Search</h1>
</ion-header-bar>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</ion-content>
</ion-modal-view>
</script>
Revised app.js
I added an $ionicModal to the hashtagController but it is said Error: $ionicModal is undefined. Where else is it undefined?
// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope, $ionicModal)
{
$scope.hashtagValue = 'Search'; // default value
$scope.hashtag = function()
{
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
}
}]);
Revised label
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
ionic modal has nothing to do with routes.
You just load a static html template from server, and that same html is shown in ionic modal with all the bindings.
Instead of declaring a seperate controller, move it inside the same controller :
app.controller('hashtagController', ['$scope', function($scope, $ionicModal) {
$scope.hashtag = function() {
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
};
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
$scope.$on('modal.hidden', function() {
// Execute action
});
$scope.$on('modal.removed', function() {
// Execute action
});
}
Then in your HTML :
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
Ionic has a nice codepen example showing how to open a modal with an ng-click
http://codepen.io/ionic/pen/gblny
Main.jsp
<html>
<body ng-app="myApp">
<div class="navbar">
View Orders
<a href="/logout" ng-show="$scope.isUserLoggedIn"> Logout </label>
<a href="/login" ng-show="!$scope.isUserLoggedIn"> Login </label>
</div>
<div ng-view></div>
</body>
</html>
Controllers
var myApp = angular.module('myApp', ['ngRoute']);
...
// route for the default home page
.when('/', {
templateUrl : function($node, tattrs) {
return "resources/html/home.html";
},
controller : 'mainController'
})
// route for the order page
.when('/order', {
templateUrl : function($node, tattrs) {
return "resources/html/order.html";
},
controller : 'orderController'
})
....
myApp.controller('mainController', function($scope, $http) {
....
$scope.isUserLoggedIn = true; //or false
.....
Question:
The $scope.isUserLoggedIn is having no effect on Login/Logout hrefs. The scope is probably not accessible on the main app page (i.e in the navbar in the ng-app page).
I want to show hide the Login/Logout button conditionally. Any ideas?
You are missing assigning controller to div
No need to use $scope there, just use
<div class="navbar" ng-controller="mainController">
View Orders
<a href="/logout" ng-show="isUserLoggedIn"> Logout </label>
<a href="/login" ng-show="!isUserLoggedIn"> Login </label>
</div>