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>
Related
I am using jupyter notebook to develop a sort of proof of concept for a project of mine, right now I have the 2 pages loaded in the same iframe in one jupyter notebook cell. Right now I don't know what approach to take to solve the communication between these 2 pages in the same widget.
My 2 pages:
<!DOCTYPE html>
<!-- PAGE 1 -->
<html>
<body>
<button type="button" class="snd_Button">Click</button>
</body>
</html>
---------------
<!DOCTYPE html>
<!-- PAGE 2 -->
<html>
<body>
<h1 class ="Listener">I must react.</h1>
</body>
</html>
As you can see they are quite simple, what I wanted to know is what would be a good approach to communicate between them. I want to make so that when I click on the button of page 1, the text of page 2 dinamically changes.
I am planning on using javascript and searched solutions around it but I am not sure of how to continue, as I am new in JS programming and not familiar with its libraries (I've found some frameowrks like node.js or electron but I am not sure they should be applied here).
HTML doesn't support modifying the contents of another html page in this way. You'll likely need some server-side code to facilitate this.
In your case, I'd recommend using Websockets. There are plenty of youtube tutorials for similar functionality - search "Websockets Chat App" which should give you a good understanding of how to fire an event on one page, and then listen for that event on the second page.
Edit: You mentioned you have two pages rendering inside the same iframe - that doesn't sound right as iframes can only point to a single source.
In the case that you want to interact between an iframe and its HTML parent, maybe using cross-document messaging like this will work
I have created simple custom elements in angular in one project and created bundle using npx-build-plus and generated files as shown in the picture below,
out of these files i took out main.js file.
I created another angular cli project and included generated js file in root folder like the below
and in index.html i used like this
<!doctype html>
<html lang="en">
<head>
<title>Custom Angular Element</title>
</head>
<body>
<script src="elements/main.f23021e9a099929ed5cb.js"></script>
<h1 id="result" style="text-align: center"> Angular elements !!!</h1>
<value-button text="Value Button" value="1"></value-button>
</body>
</html>
But the element is not displaying.
I tried to give in app component html also but not working there as well
Should i give any configuraration in package.json ? Can you please tell help me?
You can try following this article https://medium.com/swlh/build-micro-frontends-using-angular-elements-the-beginners-guide-75ffeae61b58
Also if try building it without an hash so that it is easy to always read that.Also you should be adding the custom element in the index.html (e.g. ).
The article talks about setting these things up in more detail.
I am doing a simple web app, where i am using a external lib called (html-to-pdf). The idea is to create a pdf with the html and css generated on the frontend. The lib receives a html document, so i need to have something like this representation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>cv-maker</title>
</head>
<style>
styles go here
</style>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
at the moment I am using vue to do the job, since it gives me less headeaches with other stuff. What I need is to convert a component based templated, like this:
<template>
<div class="wrapper">
<button #click="sendRequest()"></button>
</div>
</template>
to the above example, so I can extract the component styles and the generated html for the specific component, is there any way to do this?
Currently I am thinking about webpack plugin, but i don't want to build my bundle each time i do a request to the server, is this the good way to do that?
edit: resuming the behaviour i want, basicly i want to extract the html is inside the template witht the class wrapper, and get the styles on the current component and create a single html file with the extracted html from the component and the style embeded on the component with the style tag.
Thanks
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
I had two different apps in angular. During integration to a single application I had to
nest ng-views.
For sample (index.html) is
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
One of my app view is (view2.html)
<div class="ng-view"></div>
<p>This is the partial for view 1.</p>
{{ 'Current version is v%VERSION%.' | interpolate }}
Now this application has different views once again inside it.
I tried but the page is not loading. Is there a possibility to nest ng-views?
If not Possible can it be explained?
Updated answer:
UI Router (which now sits here: https://angular-ui.github.io/ui-router/site/#/api/ui.router) is generally regarded as the best solution for complex routing in AngularJS.
Original answer:
Nesting views isn't natively possible, as of now, in AngularJS. In my last app, I used a solution derived from here: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
Allowing me to effectively nest views (and skipping the limited ng-view altogether)
After doing so, this other (simpler, better, I believe) solution appeared:
http://angular-ui.github.com/ (scroll down to "Route Checking")
Check it out!
I'd suggest that you have a look at the ui-router project by the AngularUI team. This project contains a new router based on states, which can also react to URLs, but allow way better handling of application state.
This includes the use of having multiple and / or nested views.
I had a similar question a while ago, so maybe its answers are going to help you as well: How do I setup nested views in AngularJS?
Moreover, you can expect ui-router to be integrated in AngularJS in a future version, so this will most probably be the way routing works in the future anyway. So no need to stick to other workarounds if you can already have what will be next today :-)
Take a look at this:
https://github.com/angular-ui/ui-router
http://angular-ui.github.io/ui-router/sample/#/
Looks like the thing you are looking for
There are many third party libraries for nested views and routing. ui-router is already mentioned here, I would also suggest to take a look at this one:
http://angular-route-segment.com
It has the nested views capabilities which you ask for exactly, and it is much simpler to use than ui-router. In your example:
index.html:
<div app-view-segment="0"></div>
view1.html:
<p>This is the partial for view 1.</p>
<div app-view-segment="1"></div>
deep-view.html:
<p>This is the partial for view inside view1.</p>
If you do not want to turn to yet another library to solve your problem (not that there's anything wrong with that), you should also look into using directives and ng-switch and ng-show.
This approach was given as an answer here :
angular complex nesting of partials
I sincerely doubt this is idiomatic Angular (and it's mentioned above that there is possible cross-browser issues), but my ng-include solution for having an "all" view with my other views nested inside something like an all.html:
<div class="all" ng-include src="'views/foo.html'" ng-controller="FooCtrl">
</div>
<div class="all" ng-include src="'views/bar.html'" ng-controller="BarCtrl">
</div>
<div class="all" ng-include src="'views/baz.html'" ng-controller="BazCtrl">
</div>
This worked for me but felt like it was going against the grain of the framework. I will personally be trying something like what Eamon links to on my next pass.