AngularJS web application view page source only showing "index.html" contents - javascript

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.

Related

Google structured data testing tool not seeing content loaded dynamically in a Single Page Application

I have an SPA (Backbone.js) which uses a 3rd party JS library to dynamically load some content onto the page. This content has structured data markup but Google's tool for structured data is not finding it.
This library waits until Backbone places a div on the page and when it sees the div it loads the content. I think what is happening is google is scanning the page before that div can be loaded from the item record on the template.
Can anything be done to make Backbone load that div earlier, in order for the content to be seen by Google?

Just adding js script to typo3

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:

How to add a navigation sidebar and a footer to an AngularJS template without ng-include.?

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.

navigation bar in single page app using angular

I've tried to find the answer to my problem with no luck. I'm new to web development and I've been trying to create a simple app using angularjs and bootstrap. There's no much content on my pages, only a couple of inputs and buttons that do nothing.
I placed ng-view in the index.html page as I saw in many tutorials and that allows me to navigate to all my pages. I'm trying to add a navigation bar to all my pages once a user logs in, so I placed another ng-view on my home(page after user logs in), but it seems that angular allows only one view for each app. And also it doesn't allow nested app. If I'm wrong, please correct me (that's what I understood from my Google 'research').
So, my question is: how can I add a navigation bar(or any same html content) to all my pages after the user logs in without copying the same code in each html page?
Btw, I had this working with jQuery, but I don't know how to do it using angularjs
Thanks!
You can use Angular Directive that use a template to create a custom tag and you can use a controller only for this directive. Call this tag to all pages when logging.

loading JS files in spring mvc

Is there any way if i can load javascript and css files in spring mvc, such that it is not readable whenever someone view source of the web page ?
I want to do this without doing minification.
I also looked for other options like & dont know which one to user.
NO. Well, not really.
You can't add js and css to the DOM and have it work without being in the DOM. You could dynamically load them, but they will still be visible in the DOM inspector in any browser, but will not be visible to your run of the mill user right clicking and doing view source.

Categories