I'm working with an angularjs + ui-router application which is a shell application of my other angularjs application (basically header + footer + sidenav).
Each application I'm developing is complied and stored as an npm library which eventually being used as a dependency in package.json of my shell application.
when shell application is loaded it's decide which of my other application should be rendered inside as a ui-view content by the state that defined in the shell application.
This is the shell application state definitions:
$stateProvider
.state('content', {
url: '/:appName', ...
There are some other states defined in the child application which uses the "content" state as a parent state, for example:
$stateProvider.state('child', {
url: '/child1',
parent: 'content',
component: 'childComponent'});
Routing works as expected only after everything is already loaded.
The problem is that on every browser refresh, the shell application loads first, at that certain point the following route for example:
http://localhost:8000/#/childapp1/chid1 is not a valid route since the child routes (states) is not loaded yet.
The only solution I came with is stored the url in a global variable the then use it as a "return url" pattern, which works.
I was wondering if there is a better solution for the my problem.
Appreciate your help,
N
Related
I have a blank Angular.js 6 application that uses PathLocationStrategy for routing, and when on a subroute (e.g. /test) and executing the following:
history.pushState({}, '', '#abc');
window.dispatchEvent(new HashChangeEvent('hashchange'));
I would expect the URL to be changed to /test#abc but instead changes the page and URL to the home page (/#abc).
This can be fixed by pretending with the base URL, for example:
history.pushState({}, '', (new URL(window.location.href)).pathname + '#abc');
Unfortunately, I don't have control over the history.pushState command in this case as it's executed externally from ads.
I also tried this in a new Angular 15 application, where similarly the URL updates to /#abc instead of /test#abc but the page didn't change.
However, in for example a new Nuxt.js app, it behaves as expected and stays on the test page and the URL becomes /test#abc. So it seems to be perhaps related to Angular.js.
Does anyone know how I can configure my Angular application so it stays on sub-pages when executing:
history.pushState({}, '', '#abc');
window.dispatchEvent(new HashChangeEvent('hashchange'));
Thanks!
Fixed it by doing the following:
Removed the <base href="/"> element in file src/index.html
Added provider { provide: APP_BASE_HREF, useValue: '/' } in file src/app/app.module.ts
Added "deployUrl": "/" to the build configuration in file angular.json
I have a website build by AngularJS and angular-ui-router. In index.html, I load a lot of .js and .css files.
Now, I realize that a part of these .js and .css files are not necessary for the routes like https://localhost:3000/addin/.... So I want to load them by ocLazyLoad only for routes like https://localhost:3000/xxxxx/... where xxxxx is not addin.
Does anyone how to accomplish that in the code?
Try
.state('xxxxx', {
url: '/xxxxx',
templateUrl: 'xxxxx.html',
controller: function($ocLazyLoad) {
$ocLazyLoad.load('xxxxx.module.js');
}
Update
As per what you asked in your comments, you can't have like not for states. You need to map states explicitly.
One way I can think for creating a state which is not /addin, is to first explicitly map them in $stateProvider and then redirect via some redirect state and then load modules which you want to lazy load.
Redirect states other than addin by doing somthing like this for redirection
I have have done some research here and in general, but couldnt find a proper way to implement this.
We have and MVC/WebAPI2/AngularJS Web app.
I am trying to achive this goal: being able to put my app anywhere in IIS app folder structure without any code changes. That means, get rid of any IIS Application name in my code.
Here is a simple fragment of ng-route path defined:
.when("/", { templateUrl: "Home/Main", controller: "MainController",
controllerAs: "vm" })
Now, the IIS app is called ReportsWeb (but could be any name)
If I set ReportsWeb app under Default Web Site root:
http://localhost/ReportsWeb/
then everything works fine, and templateUrl page is loaded fine.
But if the app is placed under another IIS App (the one we have here is called RealSuiteApps, which is itself under Default Web Site)
http://localhost/RealSuiteApps/ReportsWeb/
then, the templates are not loaded, since constructed URL for templateUrl is no longer valid:
http://localhost/RealSuiteApps/Home/Main
If I change templateUrl to "/Home/Main", constructed URL is not valid again
http://localhost/Home/Main
If I change templateUrl to "./Home/Main", constructed URL is not valid again
http://localhost/RealSuiteApps/Home/Main
Is it possible to define templateUrl only relative to the latest App name in the IIS hierarchy without hardcoding all these names, so that it will work in any IIS app tree
http://localhost/App1/App2/App3/ReportsWeb/
Thanks!
I use grunt-html2js tool to convert all html templates to Javascript at build time, which uses Angular's template cache.
I've defined my grunt task to overwrite the default module naming to templates/ so that I can reference any template easily:
html2js: {
options: {
rename: function (moduleName) {
return moduleName.replace(/^.*[\/\\]/, 'templates/');
}
},
all: {
src: ['./src/**/*.html', '!./src/index.html'],
dest: 'tmp/templates.js'
}
},
This will create a templates.js file that I can include as a script tag. Then I can access any template like so:
templatUrl: 'templates/my-template-filename.html'
Regardless of where it's path was in the source code.
I have a website that will likely be placed within a directory in IIS. When I am running the application on my computer through IISExpress, the routes are relative to the base URL, so I can just define my routes as follows:
$routeProvider.when("/home", {
controller: "homeController",
templateUrl: "/app/layout/myView.html"
});
This gives me the following URL:
http://localhost:60847/#/home
When I put publish this site to our server, I have the URL:
http://dev.mysite.com/MyApp/#/home
However, I keep getting an error "Failed to load template: /app/layout/myView.html". When I look at Fiddler, I can see that it is trying to pull in the template from http://dev.mysite.com/app/layout/myView.html instead of from http://dev.mysite.com/MyApp/app/layout/myView.html. I have tried rewriting the templateUrl as ../app/layout/myView.html, as ~/app/layout/myView.html, and as ../../app/layout/myView.html. No matter what I do, I still end up trying to pull it from the parent folder instead of from MyApp. I have also tried setting a web.config setting and using that to put a prefix on the templateUrl, but it doesn't seem to want to run that code prior to loading the template. Finally, I have tried setting up a function for the templateUrl, but the way I have that stored in the web.config file creates timing issues with pulling the information.
It seems as if this must be a common issue that I am making overly complicated. Is there a way to make this a relative URL?
You should add to your HTML's head:
<base href="MyApp/" />
See this documentation page for more details.
currently, I run backbone as the front-end of my rails 3.2 application. I need to migrate it into an independent JS application, as part of my putting it as part of Trigger.io.
It now exists as its own index.html file, referencing the assets folder.
When I open the file, it loads the Backbone modules, but the page remains empty. And when I run fetch() commands, it
So, I got a couple of qns:
1) How do I trigger the routes such that it goes to a designated page by default?
I know it gets triggered in Backbone.History.Start, but I am not sure what to do before that.
2) The url is "file://localhost/Users/mingyeow/Desktop/index.html"
How do I set the root url manually to use localhost:3000/my web address?
// define router
var Router = Backbone.Router.extend({
routes : {
'index' : 'indexAction',
'*default' : '_defaultAction'
},
indexAction : function() {
// this will be executed when user navigate to #index
},
_defaultAction : function() {
// this will be executed when user navigate anywhere else (#XXX)
}
});
// on document ready
$(function() {
// initialize router
new Router();
// and start history
Backbone.history.start();
});
You can navigate this way.
Or by clicking the link : Index route
You can use python server. To start it type in the Terminal:
$ python -m SimpleHTTPServer
And check http://localhost:8000
1) To trigger a route change you just need to navigate to a page via a href or JavaScript like window.location. Read up on Backbone Routes but essentially you need to write a function for every 'page'. Each function should take care of rendering the page.
2) This should be very simple. You need a local web server. What I started doing recently is just having a simple Node server. Node is very easy to install and its worth experimenting with. Download a static web server such as this one I made. To use it just put your backbone application in a directory named 'public' and run server.js in node.
If you don't want to do this you can run a simple LAMP/WAMP/MAMP installation and set the root of the Apache web server.