AngularJS + SPA - change layout - javascript

I build a SPA using AngularJS. I want to have two diffrent layouts for page and for admin dashboard.
My current index.html looks like this
<!DOCTYPE html>
<html data-ng-app="AngularApp">
<head>
....
</head>
<body>
<div>
//some code for navbar and others stuff that doesn't change
</div>
<div data-ng-view="">
//here are loaded all the content
</div>
I want to do a diffrent page with diffrent content and navbar for admin.
How can I switch to a completely different layout with different css, js etc.
Basically a second index-admin.html that will load angular, bootstrap, js, css and everything from the top
any ideas?
setting routing like this
.when("/admin", {
controller: "adminController",
templateUrl: "/app/admin/views/index.html"
});
will load content into
<div data-ng-view=""></div>
which I do not want

Take a look at https://github.com/angular-ui/ui-router
There is support for nested views that will allow you to have a base view for the admin user that has a different layout

Related

Header and footer file in every HTML page

I'm creating a website using GitHub Pages and I want to put the header and footer into separate documents to then link to them on each page I make. GitHub pages only supports static websites, so I can't use PHP or anything like that.
I'm trying to use the advice I found on:
Make header and footer files to be included in multiple html pages
https://www.youtube.com/watch?v=rDFxEALe0JA&ab_channel=JoseMartinez
https://www.quora.com/How-do-I-include-a-header-and-footer-file-in-every-HTML-page-we-are-designing
which uses jQuery but it's just not working for me. Can someone tell me where I'm going wrong?
My file hierarchy:
- index.html
- html
- header.html
- footer.html
- otherfiles.html
- css
- header.css
- footer.css
- otherfiles.css
this is in the index.html file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$("#header").load("html/header.html");
$("#footer").load("html/footer.html");
});
</script>
</head>
<body>
<!-- Header-->
<div id="header"></div>
<!--main section-->
<!-- Footer -->
<div id="footer"></div>
And I put this in footer.html and header.html body:
<body>
click here for google
This is from what I can tell, what I'm meant to do, but it's not working at all. Just no header or footer appears on my website.
possibly look into using an iframe object to reference the page, theres an example on the last link you posted (one of the comments)
OR try removing header/footer files from the html folder and put them in the same directory as index.html, to eliminate the possibility that its the file reference that is the issue.
OR look into using the handlebars.js library. this library can be used to implement an MVC layout (basically files are referenced by a home controller to display content). And it will work with GithubPages, I've done it before.
hopefully this helps a little, at the very least pointing you in the right direction.

Mixing Static and Dynamic Elements in Header

I am relatively new to angulerjs but using routes, services, controllers etc, I can develop a standard web application with a navbar header with pages appearing in an ng-view below it, i.e.
<body>
<header>
navbar goes here
</header>
<div class="content-wrapper" ng-controller="MainController">
<div ng-view></div>
</div>
</body>
At the moment, everything that appears between the <header> tags is completely static and doesn't change regardless of what page is loaded within the ng-view.
I now need to add a number of items to the header which is contextual based on what page is in ng-view.
So, I'll have a single bar across the top of the site (like stackoverflow). It will contain two sub elements - one will be floated to the left and will be static, the other will be floated to the right and it's contents will be dynamic.
I'm unsure how to accomplish this in angularjs because I believe a page can only contain one ng-view
Any advice would be appreciated
EDIT: Adding following explanation:
To give a little more context, one of the DIVs in the header will contain contextual buttons. E.g. if the site is displaying a product item, the buttons in the header will be 'Edit', 'Delete'. If the site is displaying an invoice, the buttons in the header will be 'Add Product', 'Send Invoice'. My header is basically like Youtube's, if the buttons on the right changed based on the type of page being displayed
I'm not entirely sure of exactly what you're trying to set in the header based on ng-view, and you may want to rethink some of the structure here if you're just starting out. In general, though, you can nest things a little differently to give you access to objects within MainController's $scope:
<body>
<div ng-controller="MainController">
<header>
{{customHeader}}
</header>
<div class="content-wrapper">
<div ng-view onload={{customHeader = 'something new'}}></div>
</div>
</div>
</body>

Separate navbar Ctrl for one-page application

I am building a one page application with AngularJS. Right now I am using just one controller which is one very long file (of course there are several factories but nevertheless the Ctrl is still full). So as I could divide my page into navbar and the body, i thought of having a separate Ctrl for the navbar. (the thing is here, the navbar includes a big options dropdown and some other stuff, so not just Title and Links) However I do not really how to do that. Right now my main.html file looks like the following:
<div ng-include="'views/templates/navbar.html'" id="navbarContainer"></div>
<div id="map-container" class="container-fluid">
<leaflet id="map" lf-center="hamburg" markers-nested="true" layers="layers" defaults="defaults" markers="markers" class="map"></leaflet>
</div>
So as you can see, my navbar is a template in the main html file. Additionally the navbar and the main html should have the same route. So now, I definitely do not know how to use a second Ctrl. Do I not use the ng-template or can I just give the ng-template a separate Ctrl than the part below?
The navbar.html file can include its own controller.
Navbar.html
<div ng-controller="NavbarCtrl">
<!-- your code -->
</div>
See the Controller: Scope Inheritance Example in the AngularJS Docs for more info.

Multiple Aurelia apps on one page

As there isn't much information about Aurelia framework I got stuck with these 2 questions.
Is it possible to create multiple Aurelia apps on single page and
how this can be achieved?
Alternatively is there a way to call out single application templates in 2 different places outside the main app container?
For example I want to use Aurelia SPA in CMS system and call it out in different elements like header, main container and aside container.
Yep, just add two elements to the page with an aurelia-app attribute.
Here's an example: https://gist.run?id=2d310abbbea337fb5f6d110ec807f7d2
<!doctype html>
<html>
<head>
<title>Aurelia</title>
</head>
<body>
<div aurelia-app="main1">
<h1>Loading...</h1>
</div>
<div aurelia-app="main2">
<h1>Loading...</h1>
</div>
...
</body>
</html>

Using partials independently

I'd trying to work out if its possible load what I believe is referred to as a partial in linkedin-dustjs without loading its parent.
For example if I have this partial (login.dust):
{>layout/}
{<content}
<!-- Login Screen -->
{/content}
Which loads this page (layout.dust):
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
{+content/}
</body>
</html>
Is it possible to ouput login.dust without rendering layout.dust? The reason being that I might want to render the whole page when a user requests the login page. However if a user is on another page is tries to perform an action that requires login I might want to ajax load the login partial and add it to the existing page without requiring the layout as that would already be present.
If its not possible is there a way to 'pass' on template to another so I can render out the login template and pass it to the layout template.
I apologies if I'm not using the correct terms. Feel free to correct me as I'm not that well read on how linkedin-dustjs works.
You can achieve this by adding one more template. Your layout.dust template would remain unchanged. Your login.dust template would look like:
{>layout/}
{<content}
{>loginForm/}
{/content}
And the new loginForm.dust would contain your login form. Then you can include {>loginForm/} wherever you need to add the login form.

Categories