Hello experienced lamp / ror /ios dev . complete mean stack super noob here.
background:
I want to render SignUp partial in home
home dir is under Core Module with home Controller
sign up is under Users Module with AuthenticationController
used MEANJS boilerplate scaffolding with Yeoman
I initially put my form inside home.client.view.html but it is not modular want to keep the Signup with Users module
here is my sad attempt
<section data-ng-controller="AuthenticationController">
<div data-ng-include data-ng-src="signup.client.view.html"></div>
</section>
inside the core client I added users module as so
ApplicationConfiguration.registerModule('core');
ApplicationConfiguration.registerModule('users');
what am i doing wrong
please do not link the documentation
You simply have to put your template's source in a quotation marks (this example defines the source immediately on the ng-include part):
<div data-ng-include="'signup.client.view.html'"></div>
Here is a Plunker Example.
Related
my company wants to implement a third party widget into a React app. The third party company gives us a pre ES6 script to embed in 'the footer of your html file.' So
<script>// iife function here // </script>
The widget should show up on every page no matter the route or React re-render of the DOM. In other words, at the highest point of the React app structure. Of course if I try to put the script in App.tsx, there are a million errors because it's pre-ES6 and not typed. Where should something like this go in the app? Is it in index.jsx? Create a module to be imported?
Third party script // iife function here // should be placed on the public folder index.html file. That will load the script globally to all the pages.
Define a typescript module and type it manually if you want, type it as any otherwise
https://www.typescriptlang.org/docs/handbook/modules.html
If the external module exposed by the iife is not relevant to your react project. Feel free to code inside <script> tag in index.html
I have a React application called react-app nested in a page in my SilverStripe 4 project. Currently it appears in unusable form with none of the CSS styles working as expected and strange things happening to the SilverStripe layout for that particular page (e.g. an unscrollable banner filling entire page).
This question relates to a previous question I asked which received a great answer from Robbie Averill = (How to insert (inject?) an existing React app (just a UI without a backend) into a SilverStripe page layout?).
When I use the command npm run build to generate build files inside the react-app, there is a media build folder created containing files which are not JavaScript or CSS. How do I bring this build/static/media folder from inside react-app into my SilverStripe project? I can't use the Requirements class (of SilverStripe) as it only deals with JavaScript or CSS files.
The generated build folder paths and files are:
build/static/js:
- main.f8fcfe77.js
- main.f8fcfe77.js.map
build/static/css:
- main.417390ae.css
- main.417390ae.css.map
build/static/media:
- bottom_image_height_improved_enlarged.0242eccb.svg
- glyphicons-halflings-regular.448c34a5.woff2
- glyphicons-halflings-regular.89889688.svg
- glyphicons-halflings-regular.e18bbf61.ttf
- glyphicons-halflings-regular.f4769f9b.eot
- glyphicons-halflings-regular.fa277232.woff
- ic_cloud_download.0258cc94.svg
- ic_cloud_upload.6bf269d8.svg
- ic_help.bb8f97ab.svg
- ic_local_download.ddb824a7.svg
- ic_menu.7f39fb5c.svg
- ic_new.57667fef.svg
- ic_open.ddb824a7.svg
- ic_print.420fc2c5.svg
- ic_save.3fee4fd0.svg
- logo.d6c538c9.svg
- master_menu_cancel_btn.53591bb8.svg
Below shows the CircleAppPageController.php file using the init function and Requirements class to bring in the JavaScript and CSS files from the react-app build files. Note: react-app is nested inside the SilverStripe project app folder.
<?php
namespace SilverStripe\Lessons;
use SilverStripe\View\Requirements;
use PageController;
class ReactAppPageController extends PageController
{
protected function init()
{
parent::init();
// Requiring build files for react-app - Doesn't include media folder files!
Requirements::javascript('app/react-app/build/static/js/main.f8fcfe77.js');
Requirements::css('app/react-app/build/static/css/main.417390ae.css');
}
}
?>
Here is where I am wanting the react-app to appear in the layout of the ReactAppPage.ss (Note: ReactAppPage.php class extends Page.php class. The layout for Page.ss includes a simple navbar, header and footer which ReactAppPage.ss will inherit).
<% include Banner %>
<!-- BEGIN CONTENT -->
<div class="content">
<div class="container">
<div class="row">
<div class="main col-sm-8">
<div>
<div id="root">
I want the react-app with it's independent CSS stylings to appear here.
</div>
</div>
</div>
<div class="sidebar gray col-sm-4">
<% if $Menu(2) %>
<h3>In this section</h3>
<ul class="subnav">
<% loop $Menu(2) %>
<li><a class="$LinkingMode" href="$Link">$MenuTitle</a></li>
<% end_loop %>
</ul>
<% end_if %>
</div>
</div>
</div>
</div>
<!-- END CONTENT -->
Things I have tried:
1) If I only require the JavaScript build files the SilverStripe page layout doesn't break.
class ReactAppPageController extends PageController
{
protected function init()
{
parent::init();
Requirements::javascript('app/react-app/build/static/js/main.f8fcfe77.js');
}
}
On viewing the ReactAppPage I can see plain text for most of the react-app headings (not all). There are unstyled drop-down menus that I can interact with. This confirms that some React aspects are working, but the page is still unusable. Can SilverStripe themes CSS files override the CSS files coming from the react-app build files?
2) By copying the contents of the build/static/media folder inside the react-app and moving it to a static/media folder outside of my SilverStripe project, SilverStripe will find and run the files, but this does not change the onscreen result.
i.e. copying folder contents from:
www/my-silverstripe-project/app/react-app/build/static/media
to a newly created folder:
www/static/media
Expected Results:
On opening the SilverStripe page with the nested react-app, the page retains the correct SilverStripe styling and layout. The react-app would appear nested in the layout with correct styling (and working like it does when it runs independently of SilverStripe).
Thank you for your time reading my question. I am new to learning both React and SilverStripe and any responses will be greatly appreciated. My apologies if the question is confusing or badly worded. Thanks again :-).
I decided to delete the <% include Banner %> entirely from the page as this was behaving strangely. I couldn't just comment it out with HTML style comments because ReactAppPage.ss is a SilverStripe page and not true HTML.
I found out why SilverStripe runs commented out keywords. HTML style comments are still sent to the browser. I changed to SilverStripe comments <%-- --%>:
Research: SilverStripe3: Multiline comments in template
Now I can see the react-app as expected and working as expected.
Some other weird things happened to the SilverStripe CSS which meant the page was not scrolling like the others. The chrome dev tools in the browser allowed me to identify what the problems were happening on that page and then make adjustments to the code. I was able to reintroduce the banner with close to identical look to the other pages. Not the best solution as had to create a page specific banner with inline styles to override what was broken.
My continued problem is:
Finding the right place for the files in the media folder within the SilverStripe project (instead of outside the SilverStripe project at www/static/media).
Because I am following the SilverStripe lessons (which carve up a static website into a SilverStripe project) I am thinking some of these problems might be resolved by continuing the lessons. Any suggestions gratefully received.
We have an AngularJS application. The "main" template is out of it's reach: it's generated by a CMS. We have no idea how the page is going to look like. The AngularJS application starts wherever there's an AngularJS component.
It's not a SPA, we only create interactive components that live until a page refresh comes along.
We bootstrap the application with angular.bootstrap(document, ['App'], { strictDi: true });
A very stripped down version:
<html>
<body>
<div>
<usermenu></usermenu>
</div>
<div>
<item-list></item-list>
</div>
</body>
</html>
We would like to migrate to Angular (6 at the time of writing). I created an app using the cli and merged the generated application with our AngularJS application.
I then followed the ngUpgrade tutorial at https://angular.io/guide/upgrade. Although it is outdated (Still uses SystemJS!) I managed to get up and running: My AngularJS application is bootstrapped by Angular.
In the above mentioned example I have two AngularJS components: usermenu and item-list. They both use an arbitrary amount of services.
As time goes by two things happen:
I convert usermenu as an Angular component, but I am NOT downgrading the component
I create a new Angular component (ie: signout-button)
Consider my new template:
<html>
<body>
<div>
<usermenu></usermenu> <!-- Angular component -->
</div>
<div>
<item-list></item-list> <!-- AngularJS component -->
</div>
<div>
<signout-button></signout-button> <!-- Angular component -->
</div>
</body>
</html>
Will the following template bootstrap both Angular AND AngularJS components?
Or do I need to downgrade both Angular components for it to work?
The ngUpgrade guide mentions something like "AngularJS OWNS the root component". To use an Angular component inside AngularJS you need to downgrade it. To use an AngularJS component inside Angular one needs to upgrade it. But since I have three root components, will it work?
I tried of course, but I was unable to get it working. I have a feeling that the "root component" that AngularJS owns isn't one of the components found, but the element the application is bootstrapped on (document in my case).
Can someone confirm this so I know downgrading components is the only way OR perhaps point me in the right direction on bootstrapping with Angular and AngularJS components "next to eachother" ?
Following the routing chapter of the Angular2 tutorial, i've added my own simple TestLink (below the original Dashboard and Heroes) but it breaks the app. Specifically, i created test-link.component.ts that exports TestLinkComponent and added corresponding parameters to #RouteConfig inside app.component.ts. Plunker is here. Now the app stucks at 'loading'. (i'm just starting with angular, so any advice on how to debug such issues would also be appreciated!)
You misspelled TestLinkComponent in app.component.ts line #8.
See edited plunker: http://plnkr.co/edit/ar5agUGUHTuWA1LH8cf7?p=preview
I am using a Bootstrap 3 based template called Unify and implemented Angular JS with ui-routing. Most of it works fine. Just my whole navigation is in the header and I use ng-include to inject the header from a html template file. Them the hover dropdown js plugin does not work anymore. My Code looks something like this.
<header ng-include="'templates/header.html'"></header>
<!--=== Content Part ===-->
<div class="container">
<div class="row" >
<div ui-view autoscroll="false"></div>
</div>
<footer ng-include="'templates/footer.html'"></footer>
and the plugin is called before the tag with the rest of scripts needed.
It works fine when I use the files as is without the Angular JS it also works fine with Angular JS if I don't inject the code but leave it in the index.html as is but not as now.
Hopefully somebody can help me out because I have the same problem with the parallax slider with for convenience sake I just keep in the index.html for now.
Thanks,
Gerd
Thanks to the detailed answer Chris T gave me in another question I found it is a scope related issue. Now I am loading the hover dropdown js within the template file and it works fine.
I ran into the same issue, and tried loading the hover dropdown js in a script tag in the template. That resulted in an error (Like the one here: Can AngularJS ng-include load a Jinja2 processed html on FLASK?)
So instead of doing that, I got it to work by creating a controller for my template and inside the controller I added the drop down hover via:
$('.dropdown-toggle').dropdownHover(options);