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.
Related
I have this app module
angular
.module('history.components.genericAddress', ['history.filters']);
.service('constantsSrv', ConstantsServiceController)
.service('addressesService', AddressesServiceController)
and another one
angular
.module('APP')
.service('constantsSrv', ConstantsServiceController)
.service('addressesService', AddressesServiceController);
in two diff files and folders, because there are two diff applications.
I have two services that I use in both modules. I want to put in separate file both services and not anymore inside of each module body. Because each module depends on diff app I don't know how what to put in the top of the new file with both services.
One has module('history.components.genericAddress') and another .module('APP').
I ask this question because I want to make a ver 1.5 angular component and to put that component in many apps. Those 2 services are important for the component.
Please someone give me an idea how to do this because I don't know how to make this service file that will work in any app without changing anything.
So my question is only about how module('what to put here') and not how to make the code for services.
Try this.
angular
.module('Service_module')
.service('service1', function(){});
use in any module like.
1. angular
.module('FirstAPP',['Service_module'])
2. angular
.module('SecondAPP',['Service_module'])
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.
I am building a large application with Web API and AngularJs. I built the secure web api with authentication and claim-based authorizations. One requirement is that different users can view different modules on the same template.
I am new to AngularJs. I did the authentication in client side with the tokens. Also, in web api, I created a service to get all the permission given a user id. The response is a list of resource(contoller)/action(method) pairs. How do I implement the correct layout based on authorization rules on client side? Does that solely rely on web api permissions response and show/hide (ng-hide/ng-show) content based on the permissions?
Is this a good approach? What other modules/directives do I need to look into? Such as the loader for not loading the nested route until user request the parent route.
To add complexity, this site also need to work in bi-lingual. I think ng-translate. I mentioned this because it may open up another discussion on whether this may favor MVC instead of AngularJs. But the preference is Angular if the above two problem can be resolved.
All the authentication & authorisation & validation should be done server-side. You can adjust the user interface based on the roles/claims the server tells the browser the current user has.
One way to do this is to create something like a roles/userprofile controller, which will respond with a list of roles the current user has. On the client side you’ll probably want something you can inject everywhere, so you’re able to determine user interface behaviour.
myApp.factory(‘myUser’, function(Roles, $q) {
// Create a promise to inform other folks when we’re done.
var defer = $q.defer();
// For this example I’m using ngResource
Role.query({
/*
No params — let the server figure out who you ‘really’ are.
Depending on WebApi configuration this might just be
as simple as this.User (in context of the controller).
*/
}, function(roles) {
var user = {
roles: roles,
isInRole: function(role) {
return user.roles.indexOf(role) !== -1;
}
};
defer.resolve(user);
});
return defer;
});
Because the factory above is returning a promise we can enforce that myUser is resolved before a certain route/controller instance is created. One little trick I use is to gather all my route definitions in one object, loop through them with an angular.forEach and add a resolve.myUser property to each of them. You can use this to pre-load/initialize other stuff too.
Now inject the myUser anywhere you like:
myApp.controller(‘MyController’, function($scope, myUser) {
// Expose it on the current scope
$scope.myUser = myUser;
});
… and in your markup …
<div class=“my-content-thingy”>
<p>Lorem del ipsum …</p>
<button class=“btn” ng-if=“myUser.isInRole(‘content-editor’)”></button>
</div>
Note: You’ll probably want to use ng-if and not ng-show; the latter keeps the element in the DOM.
Just keep in mind that you don’t authenticate anything on the client side; that all done server side. A simple way is to place Authorize attributes on the appropriate controller actions.
Hope this helps.
A proper approach is to build AngularJS routing configuration as per Authorization on the server. This should be build just after the user is authorized and before the AngularJS app is initialized. That way the authorized user sees a "complete" app based on his roles etc. Using ng-show/ng-hide is not a good way to do it. Also each view should be doing only one thing. So load separate views based on the task that needs to be completed.
Regarding multi language support, this is independent of Authorization. Some time ago, I wrote a custom AngularJS filter that used the jQuery i18next plugin. It was a pretty simple implementation.
However you can now use https://github.com/i18next/ng-i18next
(Sorry for misunderstanding the problem).
I think that using ng-hide/show is not much of a problem. At the end of the day, the user does not have access to the data. I think it should rely on the api permissions + show/hide of presentation. Depends on the complexity you want... You can use MVC with angularjs since it's a large application.
In AngularJs is there any way to share object between two web pages without using $cookies. For example my Login page controller have different angular.module and my other controller have different angular.module but I need to share credentials between Login page and another page without using $cookies.
Between independent page
You can use the standard HTML5 sessionStorage and localStorage object
For simple synchronous storage access HTML 5 introduces the localStorage attribute on the Window object:
localStorage["status"] = "Idling.";
LocalStorage is like cookie, sessionStorage will be clean when closing your browser.
In angular
You can use a factory which is technically a singleton. But if you refresh your page, all JS will be re-initialize and you will lose your data. A Service is also possible.
Here is a link on an other topic explaining difference between Services and Factory : AngularJS: Service vs provider vs factory
To create Services/Factory, give a look at Angular official documentation, it is well explained.
Perfect mix
What you need to do is create a Service, and at each modification you stringify it to store on a local/session Storage. On load, when angular create your service, you look in your storage for initialization value and your object is back.
This is quite common for authentification for exemple. You store a token to keep authentification when refreshing ;). Let me know if any difficulty to implement.
Have you considered creating a Service which stores these login credentials? You could then use Dependency Injection to have this Service available in both controllers.
Sharing the information between different pages is a critical task which can be done with the help of Controllers.
In AngularJS, we can share the data between controllers in three ways:
Factory: Object is created inside the factory and return it .
Service: With the service, you just have a standard function that uses the this keyword to define function.
Provider: With the provider, there’s a $get you define and it can be used to get the object that returns the data.
Started learning backbone.js and require.js.
Not sure how to structure files for web app with user authentication.
Seems it should flow like this:
On app init, query server to check auth session state;
Q#1: where should I be writing this 'after init' session code - in /js/app.js?
Q#2: should I be using jQuery ajax for this, or is there better backbone.js methods (I've seen references to get(), fetch(), toJSON() in examples)?
If success, store auth data in a model (user_id, username, auth_token).
Q#3: how/where do I init this model so that I can access that data throughout modules? ie. I will have a view to display template for 'isLoggedIn.html' that will read "Hello %username%! Logout". I want to access 'username' field from this model. Currently, I see only how to create a new model by referencing it in the view's define[], so I don't know how to access the model that was created during init.
Will use jQuery $.cookies to save and get this auth data, so if user leaves page and returns, I can query server to check session instead of requiring user to login again.
Q#4: how do I include jquery.cookies.js plugin into this requirejs app, so that I can later use $.cookies as usual? Am I supposed to add this plugin to the define[] list? Do I have to add it to the /js/jquery/loader.js file?
Thank you for your assistance.
Edit: I used the files from modular-backbone example to create my web app. So when I am talking about /js/app.js and js/router.js, that's the files I refer to.
I'm in the same situation as well.
I found this post and it seems like the best option to do something before every request is to use this solution.
Before accessing and URL except /login, I'm going to authenticate by cookie or run the login view.
About the way to include other folders (jQuery cookie)- just use the require.js mechanism:
In your main file 'require.config' -> 'paths' add the plugin location (jqueryCokkie:)
In your view under 'define' add the path name ('jqueryCookie') and pass it to the finction
The .js file should be in the following structure (I tried to paste the code example here, but got problems...).