I'm working on some web app in AngularJS. But could i create a website first with some information about the app? And inside the same domain using a login that will send the users to the angular app?
So the app should only be loaded when the user wants to log in or register. Otherwise the static website should be visible.
Is there any documentation on this topic.?
Or do i need to create something like info.mydomain.com
Additional information
On the index page i do this like any regular Angularjs app
<body ng-app="app">
<div ui-view=""></div>
Load all scripts
Where should i load all the script files if i don't use the index as the start of my web app?
Related
So lets say you have a React-based mobile web app, that takes advantage of server-side rendering for the initial view ( for speed + SEO reasons ). There is no "index.html" file - the index file is dynamically built server-side and returned in the initial response.
Now lets say you want to add PWA functionality to that app. You hook up a service worker to cache assets, etc.
One of the core tenants of PWA's is that they provide an offline experience. Say we just want to show a refresh page, "You're offline, click here to refresh", when the service worker detects the user is offline.
Online examples provided by google talk about using an App Shell -- a static HTML file, which can be cached by the service worker on initial visit, and which will be the "shell" your react app lives inside. This shell ties in to showing an "offline" view.
How does this work with server-side rendering, where there is no "shell" html file, and each route can potentially return a different index.html file?
Any demos or examples of this functionality in the wild?
Any demos or examples of this functionality in the wild?
Yes!
Take a look at https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, which uses the dynamicUrlToDepndencies option in sw-precache to define which underlying resources are used to server-render the App Shell HTML.
The service worker it generates will take care of updating the App Shell HTML whenever any of the resources it depends on changes.
In this model the service worker will return the same App Shell HTML document for all navigation requests, so it assumes that the App Shell HTML is generic enough to then be populated at runtime with the dynamic content that's associated with the actual URL via your standard client-side routing logic.
I have an AngularJS app (myApp) currently used only by my own ASP.NET MVC app. The AngularJS is working well in my app. Now other MVC apps also want this as an add-on (plugin). Is this possible to do without modifying my original AngularJS app, and been too intrusive to other apps?
I thought is like this:
distribute the myApp.js to an in-house CDN to be included the BundleConfig.cs by other apps
add a <DIV data-ng-app="myApp"> in pages of other apps so that my original AngularJS can be injected.
Far too many unknowns about how your app is configured for a precise answer but any module can be dependency injected into another module.
For simplicity sake assume that you have all the templates needed to run your app converted to javascript strings and use $templateCache() to register them and all the code for your app is in one file then anyone would be able to inject your module into theirs and use whatever components you have available.
All they would need would be a script tag that points at location for your app file ... and that location could be any server, cdn or local download directory
I have a standalone Angular JS Application that displays a table of data. I want to load thisapp on request in multiple places in my existing non AngularJS web site. All the angular app needs to initialise is a userguid that I have in the page when I need to load the app, my problem is how to pass this into the angular app at load.
I have tried using "bootstrap(document, ['myApp'])" but cannot se a way to pass the variable in, ideally I could do this bootstrap(document, ['myApp'], variablehere);
I can make the app load by adding the userguid variable to window and receiving it from there but this seems horrible and tied to the app.
Any help appreciated
Thanks
I have a single page AngularJS app and I want the initial page render to contain all relevant info as HTML so it is crawlable with JavaScript disabled.
For simplicity I was thinking of just adding an alternative HTML version which is hidden when the Angular app loads.
<div>
<!-- Static page content for crawlers, hidden when Angular app loads -->
</div>
<!-- Angular app -->
What are the drawbacks to this approach (serving a complete pre-rendered copy)? The angular app draws data from a JavaScript object rendered as part of the page and I am happy to live with the data being sent twice.
Google have defined a specification that lets you serve snapshots of your page's HTML after all necessary Javascript has run to search engines.
This is supported by Google, Bing, Yandex and even some social network bots: Here are the details of who supports it: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html
Implementing this youself is a fair bit of work, so several companies including https://ajaxsnapshots.com (who I work for) provide it as a service that you can plug into your web server without making any changes to your app.
A search engine bot doesn't really care whether the content is hidden/ visible.
The search engine bot would crawl through almost the entire content of the page.
Therefore its highly recommended to have only the relevant content in place.
I am working on an Angular JS Single Page Application with a Grails backend. I know, if I am using a GSP page, its easy to provide role based content using tags from the spring security plugin-
...
Is there anything like this provided out of the box in Angular?
Thanks in Advance.