I'm developing angular web app, I have this doubt that whether it's possible to separate UI from controller absolutely clean?
I have a controller method which send request to server to retrieve data. If there's some error occurs, I need to notify the user with some friendly messages.
So I'm thinking I have to call certain api of UI framework to notify the user either with a popup or some kind of toast. But doing that, doesn't it mean I'm embedding UI code into my controller logic? Isn't that the opposite of clean separation between UI and controller?
If I want to switch to another UI framework, that means I need to alter my controller code as well.
I'm a newbie of web app, hope someone can clarify my doubts.
What will you do?
I have a controller method which send request to server to retrieve data. If there's some error occurs, I need to notify the user with some friendly messages. So I'm thinking I have to call certain api of UI framework
You don't necessarily need to do this. In your UI, you can have HTML (UI code) that shows the user the problem. Using ng-if, this UI code is hidden from the user. If you controller detects a load failure, it can then set a value on the controller that will do the following
Cause the UI code to display
Optionally, set the display information in the UI code
<div ng-if="displayError">{{errorMsg}}</div>
Then, in your controller, something like this:
MyService.getData().then(
function(responseData) {
$scope.goodData = responseData;
},
function(failure) {
$scope.displayError = true;
$scope.errorMsg = "Failed to Retrieve Data"
}
);
Related
Hi I am working on web application using Angularjs. Currently I have a feature to save the data entered by the user.By clicking on the save button we are sending some data through service call Now there was change in the requirement. The data needs to save automatically when ever we crawl to next page or of session ended. Is there any way make service call automatically. I thought of with setInterval but that is not the correct way I think. Kindly suggest some better way of implementation.
In case of page movement, save it when the controller is destroyed
$scope.$on('$destroy', function something() {
yourService.save();
});
I am trying to create a service for showing alerts (in case sending a form goes wrong). This will be used on various forms of my project so I thought I could use an independant service for this. The problem is: for this alert I need HTML code at a certain place of my form, so what I need to know is : what's best practice for that?
Can I define a template for my service? And how do I use this template in my form wihch uses the service?
I had a difficult time using angular2 packages for notifications then I decided to create my own notification for a system I'm working on. I scrapped online till I found Mathew Ross' Post Check it out and see if it guides you, somehow.
If showing alerts means showing a popup then it should be a component. Components have a view that is added to the DOM.
You can share a global service that allows other components, directives and services to communicate with your AlertsComponent and pass strings or component types to be shown in the alert. For more details see https://angular.io/docs/ts/latest/cookbook/component-communication.html
I would use ViewContainerRef.createComponent() like demonstrated in Angular 2 dynamic tabs with user-click chosen components to display arbitrary components as content of the alert if you need custom HTML support with Angular bindings in the alert content.
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.
I'm searching for a way to update the contents of a message visible from a modal from another controller. The purpose of this is to have a popup appear once a form is submitted indicating the the form is saving, and once an http request is completed, have the popup indicate that saving is completed.
Are there any recommendations as to what type of architecture I can use to enable such a system?
The basic way for making communication between controllers is to create a service or a factory shared by both controllers.
For this method google "Communication between controllers", everything is explained.
Here is a fiddle wrote by somebody:
[http://jsfiddle.net/simpulton/XqDxG/][1]
Is there a blog, project, gists or seed out there using angularjs and requirejs that provides authentication not based on routes? I'm working on building a site that will show the user the same rendered view, but different data fed from the server based upon their authentication. I have session handling already written into it, but I need angular to check the server for the session on the initial render for changing login buttons to logout and getting only the data the user wants to see that they've selected.
I attempted to use the angular run method to initially grab the session from the server, but when using requirejs, my app module doesn't exist at the time of calling the run method.
From my understanding, please correct me if I'm wrong, I should be creating an injector or using the $rootScope to carry the user information to routed controller and show the user what they is related to them. If so, then I need to have a service that is initially fired during the project instantiation to retrieve the user's session data. I'd prefer to not use the servers template rendering to put the users session data into javascript if possible.