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
Related
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
I am trying to implement ui-router(i.e $stateProvider) with my AngularApp.
My Logic is I have different modules. suppose Album (it have various views.)
What I am trying to implement is creating it as module. That means single controller for all states as well mixed logic in single controller file.
I created 1 files names list.
my state would be like this
.state('album', {url: '/album', templateUrl: 'views/album/list.html'})
//code would like this.
<li class="col-md-4" ng-repeat="item in items">
<p class="list-item">
<i class="fa fa-angle-double-right"></i>
<a class="cursor" href="#/poet/detail/{{item.id}}">{{item.name}}</a>
</p>
</li>
Now when we click it move to detail page. Having various tabs to render on same page. Corresponding states would be like this
.state('album.detail', {url: '/detail/:itemId', templateUrl: 'views/album/album.detail.html'})
.state('album.comment', {url: '/comment/:itemId', templateUrl: 'views/album/album.comment.html'})
.state('album.tracklist', {url: '/tracklist/:itemId', templateUrl: 'views/album/album.tracklist.html'})
.state('album.review', {url: '/review/:itemId', templateUrl: 'views/album/album.review.html'})
//All states have same controller, I would call services on switch condition on (states). Now issue is when I click on detail link from the list page I mentioned earlier it navigates to the base url.
//Instead of linking this http://0.0.0.0:3000/#/poets -> ttp://0.0.0.0:3000/#/poets/detail/12 It transfer to the base url i.e. - http://0.0.0.0:3000/#
Hi I am trying to render a new view based on clicks of a button in a navbar. However, it is not working.
Here is my HTML Code:
<!-- Links to all the pages with data entry forms -->
<div id="data_links" ng-controller="MainCtrl">
<ul>
<li>
Home
</li>
</ul>
</div>
</div>
<!-- Modify views here -->
<div class="main" ng-controller="MainCtrl">
<main role="main">
<div ng-view> <!-- Where we will inject html --> </div>
</main>
</div>
<!-- Application Files -->
<script src="js/app.js"></script>
<script src="js/controllers/main.js"></script>
Here is my app.js:
angular.module('DataEntry', [
'ngRoute'
]).config(function ( $routeProvider ) {
$routeProvider
.when('instructions', {
templateUrl: 'views/instructions.html',
controller: 'MainCtrl'
});
});
Here is my controller main.js:
angular.module('DataEntry')
.controller('MainCtrl',
function MainCtrl ( $scope, $location ) {
'use strict';
$scope.ChangeView = function(view) {
alert(view);
$location.url(view);
}
});
This is my instructions.html page for testing to see if it loads:
<div class="module instructions">
<div class="module_instructions">
<h1> Testing Loaded! </h1>
<p> Test <br>
Test <br> Test <br> Test
</p>
</div>
</div>
I want to eventually be able to click on multiple links within a navbar, such as home, instructions, etc. and render different views within the ng-view section. However, it is not working right now and I am not sure how to scale it so I can add more .html pages for the different views I want to render. Can someone help me move forward?
This line
<a href="#" title="Home Page" ng-click = "ChangeView('instructions')"> Home
Can be changed to this:
Home
You don't need to use a function on your controller to set the url, although you can navigate this way - sometimes you want to redirect the user programatically and this works for those cases.
Also, leaving href="#" in that line is causing you a problem. In a non-angular page # is used as a href placeholder but on an Angular href="#" is actually going to be picked up by $routeProvider which will try to change the contents of the ng-view container. What loads will depend upon how you set up your .config section, but is generally not desirable behavior.
As you create more pages, add paths to your .config section and you can link to them from your html the same way as I did above with the /instructions path.
Here's an example:
angular.module('DataEntry', ['ngRoute'])
.config(function ( $routeProvider ) {
$routeProvider
.when('instructions', {
templateUrl: 'views/instructions.html',
controller: 'MainCtrl'
})
.when('faq', {
templateUrl: 'views/faq.html',
controller: 'FaqCtrl'
})
.when('example', {
templateUrl: 'views/example.html',
controller: 'ExampleCtrl'
})
});
and in your markup:
Home
FAQ
Example
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 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="#">