As i html with Router link of Angular 4 how can i set Router in that of backboneJS
html is mentioned below
<ul role="menu" class="sub-menu">
<li><a [routerLink]="['/orderHistory']">History</a></li>
<li><a [routerLink]="['/userprofile']">Profile</a></li>
<li><a [routerLink]="['/addressbook']">Address Book</a></li>
<li><a [routerLink]="['/preferences']">Preferences</a></li>
<li><a [routerLink]="['/wishlist']">Wishlist</a></li>
</ul>
I am using backboneJs and Handlersbar any suggestions or good approach would be so useful. Thanks in advance.
I have to make footer and header in my application.
You can just set the href of <a> as normal hash like:
<li>History</li>
or if your app supports push state, without the hash like:
<li>History</li>
and set up and instance of Backbone.Router as mentioned in the docs.
This router instance will listen to changes in url and invoke the callbacks you define while instantiating the backbone router.
You can do following in your backbone.js View
events: {
'click a': 'changeRoute'
},
changeRoute: function(e) {
e.preventDefault();
var href = $(e.currentTarget).attr("href");
router.navigate(href, true);
}
Related
How to properly save current tabIndex when navigating between pages?
(In ideas to make a function that will save the current index in the sessionStorage and retrieve it when the page is mounted)
Example:
a Simple solution based on the useRouter hook:
import Link from "next/link";
import { useRouter } from "next/router";
export const MyNav = () => {
const router = useRouter();
return (
<ul>
<li className={router.pathname == "/" ? "active" : ""}>
<Link href="/">API</Link>
</li>
<li className={router.pathname == "/users" ? "active" : ""}>
<Link href="/users">Users</Link>
</li>
</ul>
);
};
You can use withRouter() library to figure out current URL and match it with the page URL and then add a different class with border or background-color to differentiate between them
You can also go with a much easier method and use :active and :visited selectors of CSS with the nav-item class or element.
Is it possible to use the attributes action and method in other HTML elements rather than <form>?
The idea is that when the user clicks Account Settings from list Settings (in home page):
I want to load some data from the database using NODE
Modify accountSettings.html
Then load the page
Here is some HTML code (will give Cannot GET /goToSettings error on browser):
<li class="navigation__sub">
Settings
<ul>
<li> Account Settings</li>
<li> Privacy & Security</li>
<li> Notifications & Sounds</li>
<li> User Preferences</li>
<li> Help</li>
<li> Report a problem</li>
</ul>
</li>
app.js
router.post('/goToSettings', (req, res) => {
console.log("PERFORMING CHANGES BEFORE PAGE LOAD");
return res.redirect('/accountSettings.html');
});
I have tried surrounding it with <form> but this will kick the element out of the list, and also doesn't work:
<form action="/goToSettings" method="POST">
<li><a> Account Settings</a></li>
</form>
SOLUTION:
<li><i class="fa fa-user"></i> Account Settings</li>
router.get('/goToSettings', (req, res) => {
console.log("PERFORMING CHANGES BEFORE PAGE LOAD");
return res.redirect('/accountSettings.html');
});
The action and method attribute can only function when being used with a form element. Instead, you could try using an ajax request with a FormData object. It will also not require you to reload the page.
//creates HTTP request and form data object
const xhhtp=new XMLHttpRequest, formData=new FormData();
xhttp.onreadystatechange=function(){
if(this.status===200&&this.readyState===4){
//function to load data based on response
loadData(this.responseText);
}
}
//appends key value pair to formdata
formData.append("KEY","VALUE");
xhttp.open("POST","https://URL",true);
//sends ajax request using formdata
xhttp.send(formData);
I think the method and action attributes are available for <form> elements only
I have some trouble with logout on my page. i have a controller with this
public ActionResult LogOut()
{
FormsAuthentication.SignOut();
Session.Abandon();
return RedirectToAction("Index", "Home");
}
And so a view called LogOut. I've put an href on it with a button :
<li><a class="logout" href="~/Views/Account/LogOut.cshtml">Se déconnecter</a></li>
but when i click it keeps saying me your page couldn't been found etc...
But strange thing is this, if i put in my adress bar, the path to the LogOut view it works and i'm disconnected, someone knows why ?
You should give href like this instead of path to cshtml file:
<li><a class="logout" href="#Url.Action('Logout', 'ControllerName')">Se déconnecter</a></li>
it will hit LogOut Action Method then will Render your view Appropriately
You can set link in different way :
1) <li><a class="logout" href="/Account/LogOut">Se déconnecter</a></li>
2) <li><a class="logout" href="#Url.Action("LogOut","Account")">Se déconnecter</a></li>
3) <li>#Html.ActionLink("Se déconnecter", "Account", "Logout", new { #class="logout" })</li>
I can do something like this?
$routeProvider.when('/developer/logs', {
templateUrl: '/themes/default/template/developer_logs.html',
controller: "DeveloperLogsCtrl"
});
and in developer_logs.html
<script>
app.controller('DeveloperLogsCtrl', function($location, $rootScope) {
$rootScope.PageTitle= 'Developer Logs';
});
</script>
<div class="content-heading">
<ol class="breadcrumb">
<h1>Logs</h1>
<li>Dashboard
</li>
<li>Developer</li>
<li class="active">Logs</li>
</ol>
</div>
<div>asfa8fhfga</div>
I tried but I get http://errors.angularjs.org/1.4.8/ng/areq?p0=DeveloperLogsCtrl&p1=not%20a
You can't lazy load angular code within templates.
There is no built in lazy load mechanism either without using third party modules.
Include all your components in initial page load or look for third party load managers
Am new to Angular and seek your help. Is it possible to display/load an HTML page (i don't want redirection to a page) through a controller in AngularJS?
To elaborate: I have an application page that displays a list of items, say. Each item has a 'view' icon against it which when clicked should bring up a detailed view of the item.
<ul class="list" data-ng-controller="check">
<li>Item 1
<em class="view"></em>
</li>
<li>Item 2
<em class="view"></em>
</li>
</ul>
myapp=angular.module("MyApp",[]);
myapp.controller("check",['$scope',function($scope){
$scope.somefunction = function(){how to ask it to load an html page i got ??};
}]);
Thanks!
ng-include is the correct way of achieving this. http://docs.angularjs.org/api/ng.directive:ngInclude
If you really don't want to do that you can fetch the page using $http and mark it as safe to render using $sce.
<div ng-bind-html="trustedHtml"></div>
myapp.controller("check",['$scope', '$http', '$sce',
function ($scope, $http, $sce) {
// Fetch contents using $http.
$http({method: 'GET', url: '/someUrl'}).success(function (contents) {
$scope.trustedHtml = $sce.trustAsHtml(contents);
});
}
]);