I have my angular app working with routing and two views.
When on the second view I am simply trying to add a link back to view 1 i.e "Back to home"
I tried the following and it works ofcourse, but it's acting like a normal href and refreshing the page
Back to Search
How do I add a link without the full page refresh but just change the views ?
EDIT ADDED Routing Config
app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider){
$routeProvider
.when('/',{
templateUrl: '/views/main.html',
controller : 'SearchCtrl'
})
.when('/result',{
templateUrl: '/views/result.html',
controller : 'resultCtrl'
})
.otherwise({
redirectTo : '/'
});
}]);
I'm not sure if you are using HTML5 mode or not. But first you need to set up your homepage to "/".
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
etc....
})
After this you can link to your homepage using
<a href="#">
Related
For my project I want a different view for my login page,
If I use template directive only angular wrap my login page into index.html (the template of the app)
.state('login',{
url:'/',
controller:'loginController',
templateUrl: './components/login/login.html',
controllerAs: 'vm'
})
I want independant page for this, how I can do that ?
I want to redirect to another page of the application. In the similar manner as we do in MVC application or asp.net application. I have defined the Route.js file which is below.
route.js defined in the following manner
var MainApp=angular.module('RoutingApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/BusinessAgent', {
templateUrl: 'Views/BusinessAgent/BusinessAgent.html',
controller: 'BusinessAgentController'
})
.when('/Admin', {
templateUrl: 'Views/Admin/Admin.html'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
HTML page
<section id="banner">
<ul class="actions">
<li>
Business Agent
</li>
</ul>
</section>
On click of href it should redirect.But it is not getting redirected.
I think you are missing ng-view . add ng-view for routing. It works as placeholder
<div ng-view></div>
Try putting the url of controller instead of view there.
Instead of
$routeProvider
.when('/BusinessAgent', {
templateUrl: 'Views/BusinessAgent/BusinessAgent.html',
controller: 'BusinessAgentController'
})
Try using this.
$routeProvider
.when('/BusinessAgent', {
templateUrl: 'ControllerName/Actionname',
controller: 'BusinessAgentController'
})
If you are trying to get different view, then use partial view for the respective action of controller.
for me I like to use $urlRouterProvider rather than $routeProvider see the below example:
$urlRouterProvider.otherwise("/BusinessAgent");
$stateProvider
.state("BusinessAgent", {
url: "/BusinessAgent",
templateUrl: "Views/BusinessAgent/BusinessAgent.html",
controller: "BusinessAgentController"
});
that's mean you will call the state with sref rather than href like this:
<a sref="BusinessAgent" >BusinessAgent</a>
If you are using html5Mode enabled
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Then replace '#' with '/' in href
Business Agent
if you disabled html5Mode then use
Business Agent
I saw that you used Angular UI-Router.
This is what I used in a recent application.Use the ui-sref tag instead of the href one.
<a ui-sref="/">Back to home</a>
<a ui-sref="cafe">Back to Cafe State</a>
I've used state provider instead of route provider.My states are
Root State
$stateProvider.state('/',{
url:"/",
templateUrl:'js/apps/choiceScreen/choice.html',
controller:'choiceCtrl'
})
Cafe State
.state('cafe',{
templateUrl:'js/apps/cafe/cafeScreen.html',
controller:'cafeCtrl'
});
you can use
$window.location.href = '/index.html';
for redurect to another page
How to load content on page by clicking on menu links?
For example, there is menu:
Personal
Contacts
Question is in how change template HTML in page for each link?
Basically what you are trying to achieve will be accomplish by creating SPA. For that you need to use ngRoute module in your application(by adding angular-route.js)
For setting up angular router you need to register routes with there template & controller, etc. inside app.config.$routeProvider would take a URL by .when method.
Code
var app= angular.module('app', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/tab/:id', {
templateUrl: 'template.html',
controller: 'templateController'
}).
otherwise({
redirectTo: '/tab/1'
});
}]);
& then there would be one section on UI which is nothing but ng-view directive that watches of $routeProvider configuration with url in browser bar
<ng-view></ng-view>
For more details look at this answer
Working Example Plunkr
Additional to #pankaj, You have to use $location services in your controller. So that you can change view accordingly from controller.
ex. You have link
<a ng-click="saveData">Save</a>
Now in controller:
$scope.saveData = function(){
$location.href('viewName');
}
ref : https://docs.angularjs.org/api/ng/service/$location
I'm trying to access a nested view with the direct url, without navigating through links but it's not working.
My config is:
myApp.config(function ($stateProvider, $locationProvider) {
$stateProvider
.state('st1', {
url: '/st1',
templateUrl: 'st1.html',
})
.state('st1.st2', {
url: '/st2',
templateUrl: 'st2.html',
})
;
$locationProvider.html5Mode(true);
});
st1.html:
<h1>ST1</h1>
<div ui-view></div>
<a ui-sref="st1.st2">ST2</a>
st2.html:
<h2>ST2</h2>
<a ui-sref="st1">ST1</a>
I go directly to /st1, typing it not clicking a link, st1 html shows up.
When I click the link in st1, the location path changes to /st1/st2 and st2's content shows up, that is what I want, but when I refresh on /st1/st2 the page is empty.
What do I miss?
I have a single page application in which the footer contains multiple links for About, FAQs, Privacy etc. Currently i am using angular-strap modal to show a modal for each link. The code for that looks like as follows:
<li>
<a href="#about" id="about"
data-modal-class="my_modal gradient-body"
data-bs-modal="'templates/about.html'">About
</a>
</li>
So currently the url of my application won't change on clicking About link. It will simply launch the modal .
Now i want to keep the functionality same but have a url like mydomain.com/#about to launch the about box.
I am using $routeProvider to define routes as follows:
$routeProvider
.when('/home', {
templateUrl: 'templates/map.html'
})
.when('/verify/:code',{
template : " ",
controller : 'VerifyReportCtrl'
})
.otherwise({ redirectTo: '/home' });
The reason why i want to do it is because it will help in SEO of my application. Currently there is no way to index the About page content.
Modify your route as
$routeProvider
.when('/home', {
templateUrl: 'templates/map.html'
})
.when('/verify/:code',{
template : " ",
controller : 'VerifyReportCtrl'
})
.when('/about',{
template : "templates/about.html "
})
.otherwise({ redirectTo: '/home' });
And change HTML as
<li>
<a href="#about" id="about"
data-modal-class="my_modal gradient-body">About
</a>
</li>
Then if you click on anchor tag your url will look like mydomain.com/#about