Initially when the page load all ui-view loaded and works fine But when i change the state ui-view not getting javascript file that loaded earlier in it's parent page.Although ui view gets the css file but not js file.
In the index.html all three ui-view viewA,viewB,viewC and navbar.html is template of ui-viewA.
Here is the state configuration. When i go to studentDashboard the navbar.html loaded but it's js function that define in vendor/all.js doesn't working.
Here is the navbar html and controller
You can work around it by converting the js file into a method and render the function inside the ui-view html containing the child page. this approach will work but the downside is when working with directive to inject the sidebar content dynamically. it will require you to duplicate a separate css of same type for each roles and likewise the js too.
Related
I am using AngularJS for web application development. In my application I am using UI-router for routing purpose and yeoman folder structure.
I checked other angular Sites like https://www.amazon.com,https://itunesconnect.apple.com. in these sites view page source are showing the html content used in the page. But in my application it's only showing the scripts added in index.html. I don't know why it's happening in my application. I think this because of my ui-router or folder structure.
How can i make the view page source with corresponding HTML in my application.
Please suggest what approach will resolve this issue.
If I look at the view source for amazon, I can't find any angularJS files and anything related to AngularJS.
Itunes is using AngularJS but if I look at the body tag, there is no much HTML and I can see the ui-view there at,
<div id="view-wrapper" class="flexcol" ui-view></div>
If you use ui-view, the page will be like yours and itunes page. itunes have massive scripts and other items inside the head tag but only few elements in the body tag.
View Source will show the static html whatever loaded as part of initial synchronous request.
And won't show any content dynamically added by asynchronous (ajax) request.
As ui-view is loading the content asynchronously and appending the html dynamically, You can't view the same in the view source.
If you right click on the page in any modern browsers like Chrome, Firefox, IE11+ etc, you can right click and click "Inspect element" to view the dynamically added content.
Still if you want to show the full html in the view source, you need to get rid of ui-view and make all the required html static.
I'm using Codeigniter and Jquery with a basic template that works fine and loads my javascripts and css assets normally.
$this->load->view('header');
$this->load->view($content);
$this->load->view('footer');
In some content pages I have a link that loads the view by using on click function that calls the controller .
$(#linkid).on('click',function(){
url='url/path/to/controller/method';
$('#targetdiv').load(url);
}
The problem in using the code above, despite the page looks like embedded on template, it works like a independent page forcing me to duplicate tags on included page in order to make Jquery works fine, causing duplicated modals and overload the application. Any Idea to solve this?
I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:
I'm new to angular development. I have been using a few paid angular admin themes. In all of them, developers have only added ng-view and ng-class attribute to index.html. I just want to know how to add a sidebar navigation and a footer to every page without using any ng-include.
If you do not want to use ng-include, you can put your HTML directly in the index.html. That is called a layout template, which is the view that contains the common elements along your application.
In summary, everything in index.html outside the ng-view element is going to appear in every page (as long as you use any module such as angular-route for routing within the same original HTML document (e.g. index.html)).
I would recommend you to follow the official AngularJS tutorial if you are new to this framework. Also, ng-book by Ari Lerner is a must-read on this topic.
On our page, we have an application "Index" associated with a root element of id "root". I'm attempting to insert a very simple handlebars template into the page inline (inside of this application).
<div id="root">
...
<script type="text/x-handlebars"> (this is nested about 5 levels into "root")
{{foo}}
<script>
...
</div>
However, when the page loads, I find the result is the metamorph placeholder moves to become the first child of "root" (even though in markup, it's quite nested).
What's going on here? No matter where I place this inline template, it keeps going to this place? How do I keep it where it is in markup?
The location the script templates is unrelated to where it's placed in the page. You could add it in the head of the document and it would be placed there as well, since it's the application template (due to it being unnamed). Structure of your app is defined using the router.
Example of nested routes:
http://emberjs.jsbin.com/OxIDiVU/151/edit
Additionally if you want your application to start at a different element you would set the rootElement on the App.
App.rootElement = '#fooId';
Example of rootElement:
http://emberjs.jsbin.com/bucasumo/1/edit