Is there any way to have some links on the page feed the ng-view container while others load the page from the server?
See this fiddle for example: http://jsfiddle.net/terebentina/Wy7Ww/
html:
<div ng-app="test">
tab1
tab2
logout
<div ng-view></div>
</div>
js:
angular.module('test', []).config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
template: 'tab1'
,controller: 'TabCtrl'
})
.when('/tab2', {
template: 'tab2'
,controller: 'TabCtrl'
});
$locationProvider.html5Mode(true);
})
.controller('TabCtrl', function() {});
Basically I want the logout link to go to server while the 2 tabs to feed the ng-view.
As you can see, I only defined the tab routes in angular and no 'otherwise' section but it still tries to load logout in the ng-view.
Change the url for logout to
logout
This would stop angular route from intercepting the location change.
Related
This is my first time using angularJS and I have a navbar where I can head to login page or click home to return to my homepage . In my homepage I have a products list and in the same navbar I also have a link that when I click on it scrolls down to the products . The problem is that since I use angularJS routing to redirect from home to login if I am on login page and click on products I am not redirected to my homepage and scrolled down to the products section but I stay on same page .
My code :
script.js
const app = angular.module("myApp" , ["ngRoute"]);
app.config(($routeProvider)=>{
$routeProvider
.when("/" , {templateUrl:"main.php"})
.when("/login" , {templateUrl : "login.php"})
.when("/register" , {templateUrl : "register.php"});
});
app
.controller('navController', ['$scope', '$location', '$anchorScroll',
function($scope, $location, $anchorScroll) {
$scope.gotoProducts = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('category');
// call $anchorScroll()
$anchorScroll();
};
}]);
The link to scroll to products a <li> element inside a navbar :
<li class="nav__item" ng-controller = "navController">
<!-- removed scroll link , nav link still goes -->
<a ng-click = "gotoProducts()" class="nav__link scroll-link" >Categories</a>
</li>
Aside from this problem routing works perfectly . I would appreciate your help with this
You are lacking redirecting to the homepage. If you just add a # you will send the browser to that hash in the current page. You can do it as easy as this
$location.url('/#category');
I am developing a web application for a game using MVC but the views are different (there is a CreateGameView.html, a GameView.html ...) meaning there is not a shared navigation bar. I am using AngularJS.
When clicking some buttons in a page some Controller perform some action and then another View (html page) is loaded.
The question is should I use the ng-app directive in each html page using a Controller?
I would just use one ng-app directive. Instead use ngroute to control your view. There is a short tutorial on w3schools: https://www.w3schools.com/angular/angular_routing.asp
Below is the gist of it.
index.html
<body ng-app="myApp">
<!-- if you wanted a common navbar -->
<navbar></navbar>
<div ng-view></div>
</body>
starScreenView.html
<p>New Game</p>
<p>Load Game</p>
createGameView.html
<p>This will be the create game view</p>
<p>Main Menu</p>
<p>Load Game</p>
gameView.html
<p>This will be the game view</p>
app.js
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "startScreenView.html",
controller: "startScreenCtrl"
})
.when("/createGame", {
templateUrl : "createGameView.html",
controller: "createGameCtrl"
})
.when("/loadGame", {
templateUrl : "gameView.html",
controller: "gameViewCtrl"
})
});
What is happening is the ng-view is being replaced with the templateUrl html page, and this block has the controller wrapped around it.
For each routing end point you can have a page, controller, pass parameters around, etc. Just search google for ngroute examples.
If you must have separate HTML pages and you plan to use Angular on all of those pages then you need an ng-app on all those pages.
Otherwise use the router or craft your own way of swapping page content. If you page is simple enough you may not need the extra size of the router.
So I am trying to display multiple views in angular to help fix the footer problem I am having with this site I am building. I want to make sure that what I have been reading about and trying to mimic is making sense. This is what I have so far.
index.html
<!--Do not code below this line-->
<main ng-view="header"></main>
<main ng-view="body"></main>
<main ng-view="footer"></main>
routes.js file
angular.module('appRoutes', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
views: {
'header': {
temmplateUrl: 'app/views/header.html'
},
'body': {
templateUrl: 'app/views/body.html'
},
'footer': {
templateUrl: 'app/views/footer.html'
}
}
})
I have it working where I have just one view and have my header and footer inside the index.html file but I saw that you can have multiple views and really just switch out the "body" view with other pages.
Any advice would be much appreciated. Thank you
To display multiple views you could use only ng-include.
See https://docs.angularjs.org/api/ng/directive/ngInclude for more ngInclude details.
Here is a example: (notice the wrap in single quotes)
<div id="header">
<div ng-include="'header.html'"></div>
</div>
<div id="content" ng-view></div>
<div id="footer">
<div ng-include="'footer.html'"></div>
</div>
Use ngRoute with ng-view to define a region (e.g div#content) where will be changed the dynamic content (as partial html).
See https://docs.angularjs.org/api/ngRoute/directive/ngView for more ngRoute details.
Good luck!
You can have just one ng-view.
You can change its content in several ways: ng-include, ng-switch or mapping different controllers and templates through the routeProvider.
Alternatively, use ui-router
After trying all I can imagine, and reading several posts here, I think I need your help!
I have a webapp based on node and express on the server and Angular on the client. I am using angular routing.
BASIC INFO
I have the routing set up like the following:
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'initial.ejs',
controller: 'controllerInitialView'
})
.when('/home/post', {
templateUrl: 'post.ejs',
controller: 'controllerAddPost'
})
.... other /home/something routes ..
.otherwise({
redirectTo: '/home'
});
}
]);
The html template is organized as follows:
<div class="container-fluid">
<div class="row">
<!-- Left Columns: With links to views -->
<div class="col-xs-2 home-bd-dx">
<ul>
<li>
Post
</li>
...
<li>
Logout
</li>
</ul>
</div>
<!-- Central Columns: Here the views are inserted -->
<div class="col-xs-10">
<div ng-view></div>
</div>
</div>
</div>
The issue is with the Logout link. I have a server serverapp.get('/logout') link which uses passport.js to logout the user. However, I cannot manage to reach that link. Whatever I try transforms my /logout, into /home/logout, and it is handled by Angular rather than by the server.
QUESTION
So here is the question: how can I create links to endpoint routes in Angular without Angular router intercepting them?
ADDITIONAL INFO IF NEEDED
The express server is has a route serverapp.get('/home/*') which delegates these routes to Angular.js by returning the template I sketched above.
I tried with and without a <base href="/home"> tag in the <head> with no luck
I tried creating a route '/home/logout', and then having the angular $window.location.href="/logout"; in the controller of /home/logout. No luck also in this case.
If I understand you correctly, what you're trying to do is disabling deep linking for certain URLs. You can do that by adding target="_self" to the <a> tag.
Try this:
Logout
Now the URL the link is pointing to will be handled by the server instead of Angular.
Below is my routing defined in html, this is defined in left pane
<a href="#loadApp" data-toggle="tab" >loadApp</a>
and page content is is right pane:
<div class="right-pane" id="rightPanel" >
<div ng-view>
</div>
</div>
when i click on url in left pane right gets refreshed.
It works fine when i click on it first time, my page gets loaded. but when i click on same url again my ng-view should get loaded again but that's not happening it remains same and nothing refreshes. Is there something that i am missing.
Routing configured as
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/loadApp', {
templateUrl: '../html/partials/centralPage.html'//,
}).
otherwise({
redirectTo: '/Default'
});
}]);
Thanks
Have you tried adding an ng-click to your top div? It likely isn't refreshing because the page isn't loading, try doing the following:
<div class="right-pane" ng-click="pageRefresh()" id="rightPanel" >
<div ng-view>
</div>
</div>
and in your controller:
app.controller('rightPaneCtrl', function() {
var pageRefresh = function() {
$scope.$apply();
});