According to the doc, $sceDelegateProvider can be used to whitelist domains from which Angular may fetch partials hosted on a different domain than the app, to support such a route configuration:
$routeProvider.when('/test1/', {
templateUrl: 'https://serverName.com/html/test1.html',
controller: 'test1'
});
A comment in the repo (and a lack of imagination) lead to me to believe remote partials would be fetched via JSONP. Can anyone confirm that?
Related
I have a app
abc.appspot.com
Now, I want a url abc.appspot.com/blog. This url should serve from abcblog.appspot.com. I don't want a redirect.
Is this possible with dispatch.yaml
Basically, I want to introduce a blog in my app, but from a different appspot.com.
You can use the default routing by routing via URL or you can use routing with a dispatch file.
For your case I think creating a dispatch file will be the suitable way to do what you want since it will override the App Engine's routing rules and you can define your own custom routing rules.
To create a dispatch file you should put it in your root directory of your default service and you can define up to 20 routing rules in the dispatch file.
An example from the documentation:
dispatch:
# Send all mobile traffic to the mobile frontend.
- url: "*/mobile/*"
service: mobile-frontend
# Send all work to the one static backend.
- url: "*/work/*"
service: static-backend
You can check this to see how to properly configure your dispatch.yaml.
Scenario is AngularJS 1.6.5 SPA, c# WebAPI and Azure AD (AAD) for authentication. I'm using Angular-ADAL library to handle the authentication and angular-route to handle routes. Strange thing is that routes that CAN be anonymous (i.e. DO NOT require the requireADLogin: true in the route definition) but need to go to the backend (for example to get an image or to get data from the API), get intercepted by ADAL and never get to the backend/API.
My routes are defined like so, when I want a route protected:
.when('/clasesDeDocumento', {
templateUrl: 'app/views/mantenedores/clasesDeDocumento/clasesDeDocumento.html',
controller: 'clasesDeDocumentoController',
controllerAs: 'vm',
requireADLogin: true,
title: "clases de documentos"
})
And similar to the above, but without the requiredADLogin: true when not protected.
According to the documentation:
Routes that do not specify the requireADLogin=true property are added to the anonymousEndpoints array automatically.
Clicking on an unprotected link does not take you to the Azaure Authentication page, however the backend/API request gets intercepted and an error is thrown.
I have solved this (manually) adding an anonymousEndpoints array, but for larger applications, this would not be feasible.
Any ideas?
This is expected behavior. The requireADLogin and anonymousEndpoints parameters are used for the different purpose.
The requireADLogin is used for the whether the routes are needle to protect. If it is true, the app will requires users to authenticate first before they can access the route.
The anonymousEndpoints parameter is used help the adal library to determine whether the $http service required to inject the token. And by default, the route URL will be added into the anonymousEndpoints if we doesn't specify the requireADLogin parameter to true(refer the routeChangeHandler).
My apps are using many web services on the intranet, and url-s for those depend on the server environment.
My apps are hosted on IIS, which adds an HTTP response header like this: Environment: DEV, so every web app knows in which server environment it is running, and thus which intranet servers it must use to call all the services.
Each of my angular apps uses a service that issues a simple GET against the app's own root just to get any response with the environment name in it, and set configuration accordingly.
Question:
How should an angular app implement such a service that would execute as the very first thing in the application, and make sure that while it is getting that first response, nothing in the app tries to execute an HTTP request against other services, or even try to use any configuration provided by my environment service?
Is there a way to implement such a service in angular that could block every other service / factory in the application till it is done initializing itself?
I have many other services in the app, and none of them really know what to do till my environment service has finished its initialization.
UPDATE
Looking at it from another angle.... is it possible to implement such an interceptor in angular that could do the following?:
execute an HTTP request and block the app's execution till it gets a response
make information from the response available throughout the app as a service/factory/config.
Angular lifecycle could be one solution. Using the angular.config() phase you could peek at the headers of the HTTP service.
Create a factory called 'httpInterceptor'
function httpInterceptors(siteConfig, $q, $injector) {
return {
response: function(data, status, headers) {
siteConfig.setEnvironment(headers['Environment']);
return data;
}
};
)
Then in angular.config()
$httpProvider.interceptors.push('httpInterceptor');
If you truly want to block the other option is to use UI router resolve property to block routes loading until the request has been made https://github.com/angular-ui/ui-router/wiki you can add the resolve method to the root state.
Resolve
You can use resolve to provide your controller with content or data that > is custom to the state. resolve is an optional map of dependencies which > should be injected into the controller.
If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.
I use Angulars $http service to call for data on the backend. Let's say JSON data. An example URL to do so would be something like:
/get/data
Doing this from within Angular nicely returns the requested data. No problem.
But even though I catch all other Angular routes using Angular UI Router with $urlRouterProvider.otherwise('/');, I can still go to my browser and type in the mydomain.com/get/data URL, which provides me with a page of JSON code.
How to I restrict back-end server calls to come just from Angular, NOT from my browser URL without user authentication?
N.B.
Using Express 4.X on Node, I also provided my app with a 'catch-all' route to default back to my front-end index.html page, like so:
router.get('*', function(req, res) {
res.sendFile(path.join(__dirname, '/index.html'));
});
Thanks!
My God! Spent whole frikin day fighting this problem, finally fixed it!
The dog is burried in headers - you have to specify one on Angular http request, then read it in node.
First of - routing setup is the same as in this guide: https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application
On frontend in Angular http request I specify one of the accepted header types to be json:
$http.get('/blog/article', {
headers: {
'Accept': 'application/json;'
}
}).success(function(data) {
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
On backend in Node I check if header includes json type. If it does, I serve back json data, so angular can receive the content. If it doesn't, I force node to load index.html, from which the controller runs the before mentioned http request with the header, ensuring you get your data then.
app.get('/blog/article', function(req, res) {
if(/application\/json;/.test(req.get('accept'))) {
//respond json
//console.log("serving json data...");
blogItemModel.find({ "_id" : req.query.id }, 'title full_text publish_date', function(err, blog_item){
// if there is an error retrieving, send the error. nothing after res.send(err) will execute
if (err) res.send(err);
res.json(blog_item);
});
} else {
//respond in html
//console.log('Request made from browser adress bar, not through Angular, serving index page...');
res.sendfile('./public/views/index.html');
}
});
Agree with #HankScorpio
Angular UI routing for Angular application paths and server application accessing URL paths are two different things.
Angular UI router allows you to navigate within a single page application as if you have a multi page application. This is in no way similar to accessing the actual server application endpoint.
All restrictions should be done on the web server and server web application end. Hence you will have to implement some authentication/authorisation strategy.
This isn't really an angular issue. When a user enters mydomain.com/get/data they never actually load up the angular app, so your solution must be done elsewhere.
For example, you could add this to your website's .htaccess file. It will redirect all traffic to the root of your domain.
Check out this answer here:
.htaccess Redirect based on HTTP_REFERER
You can't.
Your angular code is running on their machine, in their browser.
As such, one can spoof the environment, capture the data as the browser requests it, edit the JS of your app while it is in their browser, or various other methods.
Why do you want such a restriction anyway?
I am unable to access the session values which is set by node.js in Angular.js controller. I am using the Express framework. How to resolve it? Here is my code.
app.use(express.cookieParser());
app.use(express.session({
secret: '1234567890QWERTY',
cookie: { httpOnly: false }
}));
//setting the values
cookies.set('username',username);
req.session.username=username;
Presumably you want to do something like show the username in your angular app. As I mentioned in this answer, the hard part to Angular is not thinking about what data the server has, but thinking about data the server should provide to the browser via API.
My general model is to have the angular page start up without any data and have a low-level controller invoke a service (say AuthenticationService or IdentityService) that requests relevant data from the server, e.g. HTTP GET /api/identity. That will return a block of JSON that the page can then store in that low-level controller. Any deeper controller can then access the identity (or whatever) data loaded in that first request.