I have a viewA and corresponding ControllerA but on click of an image on viewA i have to navigate to another ViewB and corresponding ControllerB, in ViewB have some check boxes then have a button on viewB that takes us to ViewA, then again i want to click the image on ViewA and Navigate to ViewB and restore the checkBox values (Checked, Unchecked). I have stored the values of checkboxes to service variable.
<body ng-app='demo'>
<script type="text/ng-template" id="home.html">
<h1> viewA </h1>
<img src="src" />
</script>
<script type="text/ng-template" id="about.html">
<h1> viewB </h1>
<h4>Click me to see ViewA: <input id="myCheckBox" type="checkbox" ng-model="checked" ng-change='checkView()'></h4>
</script>
<div>
<div ng-view></div>
</div>
</body>
script:
var demo = angular.module('demo', []);
demo.controller('HomeController', function ($scope) {});
demo.controller('AboutController', function ($scope,$location) {
$scope.checkView=function(){
//if($scope.checked)
if($('#myCheckBox').prop('checked') == true)
$location.url('/home');
}
});
demo.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
TRY THIS CODE:
Related
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.
I'm getting 404 errors when I try to click through my angular routes, and I'm not sure whats wrong. I have these links:
Home
Portfolio
About
Travel
And the routes are set up here in routes.js
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'mainController'
})
.when('/portfolio', {
templateUrl: 'portfolio.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'mainController'
})
.when('/travel', {
templateUrl: 'travels.html',
controller: 'mainController'
});
});
My understanding is that when I click on the , for instance, the controller will look for /about in the routes provider. Then it will see that the template about.html fills that request, and then about.html will fill into ng-view. The request is just giving me a 404 at http://localhost:8000/about, though. What am I doing wrong?
Getting no errors, but here's the rest of my angular app for reference:
var app = angular.module('app', ['ngRoute']);
app.controller('mainController', ['$scope', '$routeParams', function($scope, $routeParams) { }]);
And the HTML
<div class="mountainSection">
<div class="ang-wrap" ng-view></div>
</div>
<div class="controlPanel">
<div class="buttonWrap">
<div class="home button">
Home
</div>
<div class="divider">|</div>
<div class="portfolio button">
Portfolio
</div>
<div class="divider">|</div>
<div class="about button">
About
</div>
<div class="divider">|</div>
<div class="intl button">
Travel
</div>
</div>
</div>
My custom background image is not showing up in AngularJS. Can't figure out why.
When I test $scope.setBackground in console, I get Object {background-image: "url(image.jpg)"}
Controller:
app.controller('backgroundImageCtrl', function($scope, $http) {
$scope.setBackground = {
'background-image' : 'url(image.jpg)'
};
})
HTML:
<script type = "text/ng-template" id="/page.html" ng-controller="backgroundImageCtrl" ng-style="setBackground">
<div>
...
</div>
</script>
var app = angular.module('myApp', []);
app.controller("myCtrl", function ($scope) {
$scope.style= {};
$scope.setBackground = function (date) {
$scope.style = {
'background-image': 'url("https://www.gravatar.com/avatar/10821c595d354140ee66f2a04fb11b7c?s=32&d=identicon&r=PG&f=1")'
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<button ng-click="setBackground()">set background</button>
<div ng-style="style">see the background</div>
</div>
</div>
Simple solution as suggested by #Mosh Feu, simply place ng-controller="backgroundImageCtrl" and ng-style="setBackground" in an inner div
<script type = "text/ng-template" id="/page.html">
<div ng-controller="backgroundImageCtrl" ng-style="setBackground">
...
</div>
</script>
you should use setBackground in div that use your template. try like this.
<div ng-include src="/page.html" ng-style="setBackground"></div>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
$scope.setBackground = {
'background-image' : 'url(https://www.gravatar.com/avatar/10821c595d354140ee66f2a04fb11b7c?s=32&d=identicon&r=PG&f=1)'
};
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
$scope.setBackground = {
'background-image' : 'url(https://www.gravatar.com/avatar/6755dcaf172d19cb9976bedcc56cfed3?s=48&d=identicon&r=PG&f=1)'
};
});
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<div ng-app = "mainApp">
<p>Add Student</p>
<p>View Students</p>
<div ng-view ng-style="setBackground"></div>
<script type="text/ng-template" id="addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type = "text/ng-template" id="viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
</div>
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>
I have html page with
<div ng-controller="MyCtrl">
<div ng-view>Some content</div>
myVar: {{myVar}}
</div>
And angular controller:
myModule.controller('MyCtrl', function($scope, $location) {
$scope.myVar = false;
$scope.someAction = function() {
$location.path('/anotherPath');
$scope.myVar = true; // changes in controller, but not in view
}
});
My module is
var myModule = angular.module('myModule', ['ngRoute']).config(function ($routeProvider) {
$routeProvider
.when('/anotherPath', {
templateUrl: 'anotherPath.html',
controller: 'MyCtrl'
})
.otherwise({
redirectTo: '/anotherPath.html'
})
});
anotherPath.htmlcontains only
<input data-ng-click="someAction()" type="button" class="btn" value="Some action">
After clicking on this input controller changes path, but in view value of myVar is still false. Why?
Here, you have defined your controller twice. Once on the parent div:
<div ng-controller="MyCtrl">
And once on the route for /anotherPath:
$routeProvider
.when('/anotherPath', {
templateUrl: 'anotherPath.html',
controller: 'MyCtrl' <-- This will be assigned to <div ng-view>
})
Leaving you with something like:
<div ng-controller="MyCtrl">
<div ng-view ng-controller="MyCtrl">
</div>
</div>
Therefore, when you call $scope.someAction() you are calling the function defined on the controller assigned to your inner view, rather than the function defined on the parent controller.
You should give your View its own unique controller in the route definition:
Angular:
$routeProvider
.when('/anotherPath', {
templateUrl: 'anotherPath.html',
controller: function($scope) {
// You don't necessarily need an implementation here
}
})
HTML:
<div ng-controller="MyCtrl">
<div ng-view>Some content</div>
myVar: {{myVar}}
</div>