I got 2 divs, first has links pointing to individual pages and another one to display the content of pages the links are pointing to. Here is how it looks:
<div id="navigation">
<a href="http://mydomain/page1">
<a href="http://mydomain/page2">
<a href="http://mydomain/and-so-on">
</div>
<div id="content">
<!-- display content here -->
</div>
Is there a way to prevent redirecting the page on link click and display the content of the URL they point to? I'm doing it this way for SEO purposes so each individual pages can also be crawlable on their own.
I've heard of ng-include but I want to be sure I'm heading the right direction so I reckon I should ask first before going with it.
Thank you in advance.
Use AngularJS Routing for this purpose.
<a href="#page1">
<a href="#page2">
<a href="#and-so-on">
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("page1", {
templateUrl : "http://yourDomain/page1.html"
})
.when("/page2", {
templateUrl : "http://yourDomain/page2.html"
})
.when("/and-so-on", {
templateUrl : "http://yourDomain/and-so-on.html"
});
});
</script>
Note: Must include angular-route.js
Related
I am going to design a website That should display the content of html when I click a button.
HTML
<a ui-sref="about">about</a>
<a href="" ng-click="home()" >home</a><div ng-include="templateURL"></div>
<ui-view></ui-view>
JS:
app.controller("home", hom); function hom($scope) {
$scope.home = function(){
$scope.templateURL = 'templates/hello.html'; }}
Answer to your problem is ngRoute / ui-route.
You can one of the above-mentioned solutions.
check demo here:
https://www.w3schools.com/angular/angular_routing.asp
I need this Master Page and Child Page functionality in my application that uses HTML and calls Web Apis using AngularJS.
I'm having a problem in routing in this scenario.
Code used for Routing in Route.js:
var MainApp = angular.module('MainApp', ['ngRoute']);
MainApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '../partials/DashboardMenu.html',
controller: 'DashboardMain'
})
.when('/Holidays', {
templateUrl: '../partials/Holidays.html',
controller: 'Holidays'
})
.when('/Projects', {
templateUrl: '../partials/Projects.html',
controller: 'Projects'
})
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
});
Dashboard.html
<body ng-app="MainApp" ng-controller="DashboardMainController">
<div class="view-animate-container">
<div ng-view class="view-animate"></div>
</div>
DashboardMenu.html
<div class="container-fluid btn-group">
<div class="row">
<a href="../partials/MyProfile.html" class="thumbnail">
<img src="" alt="My Profile" />
</a>
<a href="../partials/Projects.html" class="thumbnail">
<img src="" alt="Projects List" />
</a>
<a href="../partials/Holidays.html" class="thumbnail">
<img src="" alt="Holidays List" />
</a>
</div>
Below is the folder structure in my application:
After the User logs in from the Login Page, the user should be redirected to Dashboard.html with the default child view as DashboardMenu.html
In login Service.cs, when I authenticate the User and try to redirect him to the Dashboard.html with the below code snippet, it's just appending the URL with the Dashboard.html.
$location.path('DashboardMenu.html')
For this, I've added <base href="/" /> in Dashboard.html and locationProvider.html5mode and hasprefix but nothing worked for me. Please let me know where I'm missing..
It sounds like you are trying to implement some kind of version of nested views with ngRoute, which does not support that. I would suggest using ui-router which has support for nested states.
$location.path() should be set to url value that matches in your routing config.....not to the template path
Try changing
$location.path('DashboardMenu.html')
to
$location.path('/')
Same with your href values.... should be url not template
Chnge
<a href="../partials/Projects.html" class="thumbnail">
to
<a href="/Projects" class="thumbnail">
NOTE: Make sure server is configured for using html5Mode
You also need to remove ng-controller from templates that are used by routing that have controller declared already in the routing config. Otherwise you will end up with 2 instances of the controller running
Might suggest you study some more tutorials
I have a "Contact" link in my Navbar set to open a form as a modal when clicked. This is using Bootstrap. Recently I decided to add some AngularJS routing to my site and it works great for all links except this one. My route config looks like this:
asApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route otherwise
.otherwise({
templateUrl : 'pages/home.html',
controller : 'mainController'
});
});
Since I don't have a dedicated page for the contact form (it's meant to open as a modal), I haven't added any specific routing for "/contact" in the above code which is why clicking that link triggers the "route otherwise" block and redirects opens up the home page. Is there any way to suppress this routing only for the "Contact" link? I want it to stay on the page that was open when the link was clicked and the modal opened. Not sure if I have been coherent enough so please feel free to ask me if you are lost.
In case it helps, here's the modal snippet along with some other relevant HTML parts:
/* Navbar snippet */
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/about')}">About</li>
<li ng-class="{ active: isActive('/blog')}">Blog</li>
<li>Contact</li>
</ul>
</div>
/* Main body snippet */
<div id="main"><div ng-view></div></div>
/* Modal snippet */
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
/* Contact form code here... */
</div>
</div>
Thanks a ton for your attention and help.
You could try data-target to not mess with the angular routes (url after #)
<a href data-target="#contact" data-toggle="modal">Contact</a>
There is a great module ui.bootstrap by angularUI team for using angular with bootstrap:
https://angular-ui.github.io/bootstrap/
It has a $modal service to handle opening views as a modal.
However if you don't want to use that, you can try the following:
The most simple solution will be not to have the contact as a anchor tag.
Use a div with ng-click instead.
i.e., in place of <li>Contact</li>
use <li><div class="contact-modal" ng-click="functionThatOpensModal()">Contact</div></li>
And you can style this specific div to look same as the other links.
Hope this helps
I'm looking for a way to use ngRouting to open a template in a new window. I have an ng-view div set up in my index page that allows me to populate the data in my central page, but if the user chooses to open a link in a new window/tab, the page comes back 404, since it is expecting to have ngRoute to load it's controllers and templates. Is there any way to allow Angular to handle this option?
Below is my index page
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js"></script>
<body ng-controller="routeController" ng-init="init()">
<div id="wrapper" class="page">
<ul id='settingsLink' class='settingsLink' ng-mouseleave="hideSettingsLink()">
<li>Login</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<div id="viewcontent">
<div ng-view></div>
</div>
</div>
</body>
And here is my routeController config code:
angular.module('myApp').config(function($routeProvider, $locationProvider, $sceDelegateProvider){
$routeProvider
// route for the Login page
.when('/login', {
templateUrl : 'pages/login.html',
controller : 'AuthenticateController'
})
// route for page 2
.when('/page2', {
templateUrl : 'pages/page2.html',
controller : 'Page2Ctrl'
})
// route for page 3
.when('/page3', {
templateUrl : 'pages/page3.html',
controller : 'Page3Ctrl'
});
$locationProvider
.html5Mode(false)
.hashPrefix('!');
});
Let's say I want to open Page 3. If i right-click and try to open in a new tab, my page resolves back to "index.html#!/login", instead of "index.html#!/page3".
If you're using ngRoute in HTML5Mode, you won't have a hash in the URL and the server will think you're trying to access a file when in reality you're getting an Angular view. You need to use hashbang mode to fix this. In the place where you configure your routes (with $routeProvider), add this:
$locationProvider
.html5Mode(false)
.hashPrefix('!');
Now in your links, add the hash:
link
I am brand new to AngularJs and after following some tutorials I decided to try to implement a one page app into one of my projects. I have it working but I had one question about this code. Could I change what is shown on the first page before they navigate to anything? I don't want it shown on every page just when they first land on it before clicking any links.
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'home.html'
})
.when('/about',{
templateUrl: 'about.html'
});
});
app.controller('cfgController',function($scope){
/*
Here you can handle controller for specific route as well.
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="single-page-app">
<div ng-controller="cfgController">
<div>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</nav>
</div>
<br/>
<div ng-view>
<!--
This DIV loads templates depending upon route.
-->
</div>
</div>
</body>
The pages load fine and if I try to add something to the index.html under ng-view it doesn't show up on the page.
You want to put the content to show up when a user first hits your site under in your "home.html" page which is linked to your "/" route for "ng-view". When a user clicks a link, they will be taken to a new route, and the code/ will be replaced by the route they selected.