guys.How is it going? I am having a hard time trying to figure out some stuff here. No success so far. The thing is...
How does Angularjs work with subdomain wildcards?
Since I can't inject location service in the app.config, I needed some way to track the url I am accessing in every request, without having to check when every single angularjs controller is loaded, using $routeProvider and locationProvider
* UPDATE *
I have a domain for a Rails 4 application(as an API), and I am using angularjs to render the views and everything else. For the app, I will have a subdomain for a specific purpose. But users will only be able to access the subdomain after logged in, and this will create a subsubdomain for them. So, I need to do something like this:
http://domain.com (rendering the regular app)
http://subdomain.domain.com (only to log in)
http://user1.subdomain.domain.com
http://user2.subdomain.domain.com (both rendering something completely different from the regular app rendering)
All this using routeParams. I used angular-devise to login.
Any ideas?
Thanks in advance!
If someone is trying to figure out the same thing, here is what I did:
In the routes.rb file, I pointed routes with subdomains to a rails controller:
get '', to: 'controller#action', constraints: { subdomain: /.+/ }
I created to angular modules. One for the regular app, and the other for to the app with the subdomain
In the application.html.erb file, I make the ng-app dynamic, so angular will be able to know which app I am talking about. angular_app returns the string to one of the angular_modules:
ng-app="<%= angular_app %>"
After that, angularjs routeParams is in charge to render the app.
Thank was it.
Related
I need idea on how to create a app structure of two separate Angularjs App folder.
Let's say:
In my XAMPP/htdocs, I have a separate folder of Angularjs App folder. The A app folder and the B app folder need to integrate(I don't know if it is the right term) to each other.
Example, there's a SignIn in A app folder, when the credentials is valid, it will redirect to B app folder, when Signout in B app folder, user will be redirected to A app folder.. something like that..
My question is, How I can connect that two (A and B app folder)?
I hoped I discussed it well enough to understand. Thanks.
You can use services to achieve this objective.
As you have two different apps and you need to create a bridge between them, a good way is to create services that can be injected where you need them.
A AngularJs service is created inside an AngularJs App, by declaring it using your angular module like this:
angular.module("YourAngularModuleName").factory("MyCustomService",
[
"injectedDependency",
function(injectedDependency)
{
var serviceInstance={};
serviceInstance.operationYouNeed = function(){
//do your stuff.
return;
};
return serviceInstance;
}
]);
This service above is a example structure of a service called "MyCustomService" that has a method called "operationYouNeed".
On your AngularJs App controller, you can inject your MyCustomService and call operationYouNeed as you may need it.
Considering the scenario you exposed, I don't know the way you are keeping the logged user context, but you can evaluate the user action on the service method and then call a $location.path("your app2 root url") in order to redirect the user or, if is the case, call a $window.location.href = "your app2 root url" in order to cause a page reload.
In applications that I write, I use to implement a token based authentication and store the temporary toke as a private cookie, so if I had your app scenario, on App2 I would inject $cookies on my Service and use it to retrieve the temporary cookie in order to check session validation and also decide if I need to redirect my user or not.
Another kind of concept you can implement here is to use a third AngularJs app in which you declare your common service, so you don't need to create any dangerous circular reference between your two apps.
I don't know the deepnes of your AngularJs knowledge but you allways need to declare a module dependency whe you does something like this, by including it on your AngularJs app module, like so:
angular.module("YourAngularModuleName",["anotherDepencyModule", "another", ...]);
Hope it helps.
Cheers.
As far as I know the hash symbol(#) is the key when implementing routing in Angular. The web server only takes care about the part of the URL which is before the hash, and Angular takes care of the rest.
I´ve read some articles that explain how to remove the hash from URL. But if I remove the hash(#) from URL: Which routing works first?
OK, it is MVC. In that case we have to edit the MVC Route in order the server to understand the URL. But we are at the beginning again. Does it make any sense to use Angular Routing and MVC together ? Is not enough with MVC Routing?
Maybe I´m missing something. I hope you can help me.
Does it make any sense to use Angular Routing and MVC together ? Is
not enough with MVC Routing?
TL;DR;
I've rarely use both. The only time I use both is when I need to authenticate the user for some routes.
Long answer
1. Authentication
As you already figured out, Angular routing is great when you want to navigate to another page without the roundtrip to the server. It's usually a SPA. But there might be a scenario when you need to authenticate the user before sending the HTML, then MVC routing will be handy. I wrote an answer about it here. Note the difference between sending HTML and sending DATA to to the client. If you have no server routes the html-pages (or templates) will be fully accessible (unless you limit access in web.config or some other way). Some times the HTML-pages can contain some sensitive information as well...
The most common scenario is if you have a public site with an admin-part. But in my experience you can handle this on client side with client-side-routing only. It's usually the data that is sensitive, not the templates.
2. Server-side logging
The other scenario is when you want to do some logging on server side. For example if you want to log every page request. This can often be done on the client as well... Look at Google Analytics. But you might want to log the request even if the browser has javascript turned off.
3. SEO
There might be some SEO-issues when using client-side-routing. But this is only when we render the html with client side templates and if we compare to completely rendered views with MVC.Net. Do not confuse me posting the link with me actually agreeing with the content...
4. WCAG
In my country all government sites need to follow WCAG. One of the rules are - no javascript. Or at least that the site should be fully accessible without javascript. Without javascript client-side-routes are simply very difficult. ;)
These are some examples when you might need both server-side and client-side routes. But to sum up, in most cases client-side is enough.
I have a Django application with an AngularJS frontend. The application sends notification emails, which it renders using Django templates.
ITEM: {{article.title}}
DATE: {{article.date}}
SOURCE: {{article.link}}
{{article.body}}
The issue is article.link. The previous version of the application didn't use Angular, so it was simple to find the link. In urls.py we had
url(r'article/(?P<article>\d+)/$', views.ArticleView.as_view(), name='show-article')
which meant that we could reverse a URL to a particular article with
django.core.urlresolvers.reverse('show-article', kwargs={'article':article_id})
Now, on the Angular-based revamp of the site, the display URL for an article looks like /mysite/#/article/1234 and is determined by routes.js:
$routeProvider.when('/article/:articleId', { ... } )
Bottom line, I don't have a way to grab an AngularJS route from Python. I could hard-code the all the routes from routes.js into something the backend sees, but it wouldn't be very DRY. I could generate routes.js dynamically with Django, but right now none of our other JS source is touched by Django -- that doesn't seem very clean either. Maybe I should continue to support the old-style URLs (/article/1234) as a redirect to the Angular-style URLs (/#/article/1234)? That still requires logical duplication, I think.
Is there a better pattern I should be using here?
Decoupling clients and servers is often a goal so duplication should not be considered a bad thing in this case. Depending on your needs however there are solutions which provide a reverse method which behaves like in Django. There is django-js-reverse and django-angular for angular specificaly.
I have an angular site hosted in S3, and I have a 404 route set up (I use hash), if someone for example does
mysite/#/gibberish
goes to
mysite/#/404
and on the s3 bucket we have a redirect rule in place for
mysite/gibberish
goes to
mysite/404.html
all is well
Now I just want to add an extra logic on top that if someone types in
mysite/customerid
which is a 404 to somehow redirect this to an angular controller so I can send this request to right page.
So somehow in my redirect in S3 rule add a reg exp for some incoming request and rather than serve 404.html send it i.e. mysite/#/handlethis
Is this possible ?
Depending on the router of your choice, you could do something like the following (which is what we've done (well, not precisely this, but close)):
ui-router
app.config(function ($urlRouterProvider) {
var regx = /\/#\//; // match against /#/
$urlRouterProvider.otherwise(function ($state, $location) {
if (!regx.test($location.path()) { // if no match
$state.go('customHandlingState', /** params **/, /** configuration **/ });
// Transition to your custom handler state, with optional params/config.
}
});
});
You could pair this up with custom stateChange[Start|Stop|Error|Success] handlers in the run block of your app to customise it to your liking.
I would supply an example of how to do this with ngRoute, but I gave up on ngRoute two years ago and haven't looked back since. As such I have no suggestion to give, nor was I able to find a solution to the problem you present.
I would strongly suggest you scrap the S3 portion of this recipe as it will make your life a lot easier when it comes to client side routing (speaking from personal experience here, it's my opinion on the matter - not fact) and handle your 404's/500's on the client with custom state handlers.
If need be you could hook into some logging service and store some data whenever a client/person ends up in an erroneous state.
I suppose my 'counter question' is; What do you gain from using S3 redirect rules? So as to get a better understanding for the needs and goals here.
Some reference material to go along:
ui-router#$state.go
ui-router#$urlRouterProvider.otherwise
I would suggest using routeParams
https://docs.angularjs.org/api/ngRoute/service/$routeParams
the route would look like this:
/mysite/:cid
then access the id with the controller:
$routeParams.cid
I hope this could help
You can manually configure your server to always serve your index.html(your main html file which includes reference to angular script) on all incoming http requests. Client routing will be handled by Angular
I'm getting really frustrated with configuring the Routing on our app, which is using sailsJS and angularJS.
The problem is, that the browser doesn't know about angular, so any request like /login returns a 404 Error from sails. I need a solution, to keep the sails routes from the angular ones,
One solution would be to disable html5Mode, but i really don't like the look of URLs with the /#/ which is typical for angular.
I have researched a lot on this and haven't yet found a good answer or maybe a working project for this.
Is what I am trying to do even possible right now?
If you're using HTML5 mode with Angular, then you need to configure your web server (in this case SailsJS) to respond with your index.html file for requests to /login or any arbitrary routes.
If you navigate directly to http://localhost:3000/login in your web browser (assuming you're running Sails on localhost:3000), Sails needs to respond with your index.html so that your Angular app can bootstrap and then display the appropriate route. Then, subsequent links that the user clicks on in your app will be intercepted directly by the Angular router instead of Sails directly.
Angular has documentation about making HTML5 mode work correctly here.
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a <base> tag is also important for this case, as it allows Angular to differentiate between the part of the url that is the application base and the path that should be handeled by the application.