I'm a new angular2 development and currently facing a rendering issue with my application. I use #angular#2.0.0-rc.1 for my app and router-deprecated#2.0.0-rc1 for my routing, whenever I click on the a link, the static content of the page loads immediately and the binding (dynamic content) happens only when I do some interaction with the mouse like click or hover over a link. I tried various options and still couldn't figure it out.
Any help would be appreciated.
The order in which you include the JS files is important.
This issue happened when I didn't.
<script src="/lib/shim.min.js"></script>
<script src="/lib/system.js"></script>
<script src="/lib/system-polyfills.js"></script>
<script src="/lib/Reflect.js"></script>
<script src="/lib/zone.js"></script>
As mentioned by bryanm, the order of the js files is important and the placement of those script tags also matters. In my environment with angular2.rc.4, the order was
<script src="node_modules/es6-shim/es6-shim.js">
<script src="node_modules/reflect-metadata/Reflect.js">
<script src="node_modules/systemjs/dist/system.src.js">
<script src="node_modules/zone.js/dist/zone.js">
It has to be placed at the end of the body tag just above loading the systemjs config script.
Related
I have a laravel app, to which I am now trying to add functionality provided by surveyJS.
So the standard laravel (v5.6) Authentication QuickStart puts this into the view/layouts/app.blade.php view
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
And then I want to add in the survey JS scripts, and the JQuery on which it depends. So I do this:
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://surveyjs.azureedge.net/1.0.28/survey.jquery.min.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>
Now it does not seem to matter where I put ...('js/app.js')... in the order of things, it's mere existance causes the surveyJS scripts to not work. Specifically, the survey form is shown, but the button actions no longer work.
EDIT
...('js/app.js')... is required for the laravel header menu dropdowns
jQuery is needed for the surveyJS functionality
The chrome dev console shows no errors.
The chrome dev network shows all three scripts loading in the order shown above, as expected.
So...
- When ...('js/app.js')... is in, then laravel menu's work, surveyJS doesn't.
- When ...('js/app.js')... is removed, then laravel menu's don;t work, but surveyjs does.
EDIT #2
Now further investigation shows that within th BODY tags, this div is the culprit.
<body>
<div id="app">
....
</div>
</body>
If I remove that specifi DIV element, then my javascripts work, although I do a get a one line warning ni my console app.js:36520 [Vue warn]: Cannot find element: #app - of course - I removed it.
app.js by the way seems to be 47,000+ lines of code related to "webpackBootstrap". Installed by default with laravel auth quickstart - not my creation.
I've gone with what I hope is a simple approach, being a simple JQuery and thus avoiding any additional complexity of React/Angular/Vue.
What should I be looking at?
Assuming there is already an existing angular running in the page. I would like to inject/add an isolated angular app into it (which runs in isolation with the existing angular app without interference).
For example, I would like to 1) insert a custom element say <app-root-two></app-root-two> in the page then 2) initialise/bootstrap that app (or vice versa).
How would I go about achieving this?
I know back in AngularJs it is possible because you can retrieve the DOM element and use angular.boostrap(<dom-element>) to initialise it but I don't think Angular has the same manual bootstrapping pattern. It is abstracted and it goes directly to DOM to find the root element, typically <app-root> in the page.
The current angular version I am working with is version 5.2 and Angular CLI 1.6.6. I have tried the .angular-cli.json file for generating multiple app however it targets two separate "index.html" files, that is two app in one project, not necessarily in one page.
You need a different root element on your second AppModule. Then simply import your second app scripts (runtime, styles, etc) but delete window.webpackJsonp first.
For example
<app-one></app-one>
<app-two></app-two>
<script type="text/javascript" src="app-one/runtime.js"></script>
<script type="text/javascript" src="app-one/es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="app-one/polyfills.js"></script>
<script type="text/javascript" src="app-one/styles.js"></script>
<script type="text/javascript" src="app-one/vendor.js"></script>
<script type="text/javascript" src="app-one/main.js"></script>
<script>delete window.webpackJsonp</script>
<script type="text/javascript" src="app-two/runtime.js"></script>
<script type="text/javascript" src="app-two/es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="app-two/polyfills.js"></script>
<script type="text/javascript" src="app-two/styles.js"></script>
<script type="text/javascript" src="app-two/vendor.js"></script>
<script type="text/javascript" src="app-two/main.js"></script>
Though - to date - this works, the framework is clearly not designed for this. More complex apps with further chunking may have issues with the app's runtime that you're essentially changing when deleting webackJsonp object.
Polyfills that go to the global prototypes you may be able to skip reimporting.
Take a look at overall-structural-guidelines
You can simply load one app but orchestrate ( lazy load ) many different modules that would behave as Apps. Each sub major module would have all the modules, services, components etc that it needs and it would be isolated.
Upon looking into the source code, I had to do a bit of override. AngularJs does two things automatically: 1) bootstrap any "ng-app" 2) add a tag. To prevent any conflict. I commented both bits out. Instead I took the content of tag and placed it in my scss file and bootstrap my custom element manually
The other thing is Angularjs is loaded within the context of chrome extension content script therefore any window global defined directly in the content script will not bleed to the user page.
On top of that, I did use shadow dom to further isolate the application so that no css/js thing bleed in/out. As long as I don't modify any common aspects of the page I should be fine, e.g. location. Any global events binding I need to add/remove based on the lifecycle. The end result would look something like this:
<custom-element>
#shadow-dom
<!-- stylesheet if any -->
<!-- js script if any -->
<bootstrapped-angular-element>
I am creating a jQuery plug-in for web applications. My plug-in captures page events and replay back all events which i captured. Normally web applications use jQuery frameworks and i am also using one version, so I used noConflict to overcome conflict problems.
My plug-in will integrated with any web application. so i cant change anything in web application. All changes should be in done in plug-in itself.
My Plug-in Code:
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script src="jquery.ui.dialog.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var JqNoConflict = $.noConflict(true);
</script>
<script src="captureall.js" type="text/javascript"></script>
Web Application Code
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.11.js" type="text/javascript"></script>
This the files I am using to create my plug in.
I can capture all the events from web page. When i populate back i am using trigger function to trigger all events which i captured. I am facing problem of,
JqNoConflict("DIV").eq(30).trigger('click');
it is not working, instead of
$("DIV").eq(30).trigger('click');
this code is working.
NOTE : i placed my plugin code all over the place in page. top, bottom, middle. nothing works.(it captures,not triggering)
I am facing major problems, when i captures dialog and calendar events.
I need a solution for above problem,
I need to know that which jQuery framework gets called when events happened.may be that will help to find which jQuery framework gets called
I need to know that, is it possible to call a trigger event $().trigger(); from JqNoConflict() .trigger();
is there anyway to write a code to capture a events and trigger back from myself defined JqNoConflict jQuery frameworks?
I have previously posted this: previous post about having problems to check and uncheck multiple elements with jquery.
The thing is that i have tried the code on fiddle and it's working perfect thanks to all the people who helped me: my fiddle but it is not working on my site.
I have a base.php that automatically loads core plugins, script and so... it's even calling:
<script src="{site_url()}assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
from the view file, i call the js function i use like this: (i use smarty template)
{block name='custom_javascript'}
<script src="{site_url()}assets/scripts/backend/filter-options.js"></script>
{/block}
The thing is that the check/uncheck function is not working. It only works when i call (again) the jquery library like this:
{block name='custom_javascript'}
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="{site_url()}assets/scripts/backend/filter-options.js"></script>
{/block}
even though it works, the style is not the same, because boxes and text appear not in line.
Am i doing something wrong with the library or what the problem could be? thanks on advance.
From your comments, the problem is that your scripts are getting loaded like this:
<!-- page -->
...template header (from base.php)
...your template code
<script src="...filter_options.js"></script> <-- coming from your template
...template footer (from base.php)
<script src="...jquery"></script> <-- coming from base.php
So from this you can see that jQuery does not get loaded until AFTER your script. The problem here is that your script (filter_options.js) depends on jQuery and requires it to be loaded before it can be used.
I would move the jQuery script to the head of your base.php. Ideally, you would move the jQuery script to the head, and leave all other scripts in the footer. This gives you the benefit of always knowing you have jQuery available for use, no matter where you place scripts in your template files.
so i have a little problem
my webadress looks a little like this:
http://localhost:23425/dynamicName/Home.aspx
the dynamicName part well....will be dynamically named. So because of that it breaks my
<script type="text/javascript" src="Scripts/jquery.js"> </script>
scripts since it can't find it. however if its
http://localhost:23425/Home.aspx
then the javascript works.
So my question is how can i get the javascript to work on the dynamic virtual directory and not have my links be broken?
i've tried this :
<script type="text/javascript" src="<%=ResolveClientUrl("~/Scripts/Menu.js")%>"> </script>
with the script links and the css links but it doesn't seem to do it. just a grey box drops down with no content.
Any help will be extremely apprectiated
Try:
<%=ResolveUrl("~/Scripts/Menu.js") %>
ResolveClientUrl creates a path which includes ../. That may be your problem.