Hi I have AuthUser menu list and when click my whichever menu, page will be opened I want to create breadcrumb clicking controller-action page.
Like this ;
I have as follow Menu List =
Home
Document
Security
User Operation
Role Operation
Scenario Operation
Work Management
Test1
Test2
When I click Scenario My layout in breadcrumbs in will create =>
Security, User Operation, Role Operation, Scenario Operation .
or when click Test1 after create =>
Work Management, Test1.
How I am doing this angular ? Maybe I need current or request Controller or Action.
Is your menu just a static bunch of ul>li elements?
Have you got a jQuery library in your project?
As for me, it seams this can be easily achieved with plain JavaScript, than with Angular. If menu isn't generated by angular it is more about overall look of the page, than business logic.
Related
I want to have nested routing in angular-
In User.html, i will have three sections add, edit ,delete.
On click of add it should route to user/add and redirected to add.html and same for others.
How can this be achieved?
You can use $anchorScroll but that will not change your url mean you will stay on the same page and it will just scroll you to the section. As i can understand you want to have different actions on the same page, there are many ways to do so like angular like ng-show and ng-hide. You you the user edit view on demand and so with the add user. You can use same form for add new and edit. there is a tutorial on Angular page if you scroll down there is a section Wire up a Backend and that's something you want in your application i guess :-)
I have a question that suppose, I have an Admin Dashboard page, on which I have given a list of users. clicking upon a particular user the details of corresponding user is shown on a different page (say on userDetails.jsp). Now I have a back button on userDetails page, Clicking of which I need to redirect admin to the last visited page that is Admin Dashboard page, I have one solution that I can "Reload" the previos page on clicking back button, but then I feel that there is the overhead of calling a server side API, retrieving all the data, Again redraw the whole admin dashboard page even when there is no change made in the userDetails[because it is read only page, modification is not allowed there]. Is there anyway that I can make user of cache or anything else so that I will not need to go to the server to fetch all the data again. I am using spring MVC, angularjs, Thank you.
On your button's click event add the following code:
$window.history.back();
make sure to use $window rather than window since you're using AngularJS
I am working on a fairly complex AngularJS web application and keep failing to implement a working modal / routing mechanism which meet my requirements.
Situation
My application has (simplified) the following entities:
Customers (has 0 or more Contacts)
Orders (has exactly 1 Customer)
Contacts (belong to exactly 1 Customer)
During the creating of a new order an existing customer can be selected, or a new customer can be created. In the creation process of the customer, optionally a new contact can be created.
UI / UX solutions
I've looked at several ways to correctly represent this functionality in a "non-cluttering" and mobile friendly way. First I tried to stay away from modals or popups completely and tried to create several Angular directives to be shown dynamically in the page, but this soon got way too complex. The creation of a new customer exists of multiple UI-states and some substates (tabs) and has fairly complex logic in it.
Then I looked at using separate browser tabs and communicate between them using localStorage. However this approach seemed fragile and also not really common for a user. Besides, the user should continue working in the new tab until finished, and only then be able to return to the previous tab. This is not possible using separate browser tabs.
I've looked at Javascript browser popups, but I don't like that direction either.
From a users point of view, I think the best way was to use a Modal dialog to follow the UI flow:
UI flow
+----------+ +------------+ +-----------+
|New Order | - Opens modal -> |New Customer| - Opens modal -> |New Contact|
+----------+ +------------+ +-----------+
^ | ^ |
| OK | OK
| Closes modal and | | Closes modal and |
| selects new customer | | selects new contact |
+----<-----<-------<-----<---+ +----<-----<-------<-----<----+
Note: the New Customer and New Contact states are also states on itself which can be opened in a regular window.
I have created Angular-UI-Router routes as:
New Order: app.orders.new
New Customer: app.customers.new
New Contact: app.contacts.new
Development
To support the multiple modal architecture I've tried several things:
Using Angular UI Bootstrap Modal
Using the UI-Router-Extras way using own built Modal windows
Some important aspects to keep in mind:
I do not need direct URL's to point directly to a modal window. The URL can stay in the "New Customer"-state.
The behavior should be Modal, so not able to work on the parent window.
It should be able to open and show multiple states after each other (for instance a wizard in one Modal)
Multiple modals that are opened in a certain order should be closed the same order. (Last in, First out)
1. Using Angular UI Bootstrap Modal
This way seemed promising. I've created a separate routing which use the some controllers and views of the regular routes:
Modal.Customers.New
Modal.Contacts.New
But unfortunately I struggle to open more modals inside the modal and keep state of the previous modal. I've used UI-Router-Extras Sticky States to keep the background state. However as UI-Router-Extras states, Sticky States only works when every state has it's own ui-view. A ui-view should be declared beforehand. This is not possible, because in theory a user can open an unlimited amount of nested modals in my application.
2. Using the UI-Router-Extras way using own built Modal windows
I've tried creating a simple modal in stead of the Angular UI Modal using the simple Modal example of UI-Router-Extras as in: http://plnkr.co/edit/qgt0RkEnXDPDTdMJPIfy?p=info
But unfortunately I have the same problem as with option 1. The problem is the states and routing gets too complex when modals are nested.
Solution
I am really struggling about what is the best approach now. I am thinking about showing a Modal overlay window with an iframe in it which open a seperate UI-Router route like: Modal.Customers.New, which shows only the contents of the application (not the menu bars, etc).
When using iframes I am able to keep the separate route and states info available on the parent window and the iframe. I need to perform some custom javascript to support scaling the iframes to the right format, but that is acceptable.
But it still feels like a "hacked" solution.
I would love to hear your solutions and insights.
Eventually I went for a combination of using an iframe with Angular UI Modals. This approach gave me complete flexibility in using complicated routes in my App and the Modal screens of Angular UI automatically resize the iframe on different screen resolutions.
I have created routes for all states used in Modals with the prefix: modal. in stead of app.
This way I could only use the "content" subview of the page to show inside the Modal and still have full re-usability of the original controllers and views.
The only tricky bit was when multiple nested Modals are opened. There I had to check if I was in a Modal or in a regular state. This was pretty easy using the state name:
IsModal() {
return this.$state.current.name.indexOf("modal") == 0;
}
On the root frame (the non-modal view) I collected all opened Angular UI Modals in an array and checked on opening a new modal if the Modal was at the root of the views (non-modal). If not, I traversed up the iframe to the parent scope using:
var parentScopeModalService = (<any>parent).angular.element(window.frameElement).scope().MyModalService;
This actually worked pretty nice because all iframes are on the same domain.
I build a website with many pages (event, blog, game....). One page display games (posts). User click on a new game button and there is a new post created.
User click on buttons to play, post is updated and reloaded.
I understand we can set wordpress to be a single application page with angularjs.
Is it possible to keep all the website as it is and use angularjs only for the game page, post ?
Absolutely, Just bootstrap ng-app to a wrapper of the section that has to be angularized or add ng-app to that wrapper. That way all the rest stays exactly the same.
I have a backbone view call LogOnView. In my LogOnView A user can login using username and password. There exist all type of server and client side validation. I want to use this view in a bootstrap modal when a user click a button in another view. I can add all the content LogOnView into bootstrap modal-body like this
$('.modal-body').html(new LogOnView().el);
N.B. I am enabling the Bootstrap modal dynamically that means from a view (using javascript).
$('#LogOnPopUp').modal('toggle');
By this content of LogOnView is successfully added to Boostrap modal. And also login and validation is ok as it ok in LogOnView. But I need to find a way to do another work when user Login successfully. That means when an user successfully login the modal popup will close and another task will need to done in this view.
So what can I do in this aspect? Any advice will be appreciable.
N.B: (summary/similar criteria )
It's all the same as facebook like. When anyone like a content of other website using facebook account. A user click in like button then a modal popup is opened and after logged in there his like is confirmed.
I want to do something like this using my LogOnView into bootstrap modal.
I'm not sure I understand your question. But if you want to execute an action once some work has been done (i.e. logging on, in your case), you can handle "doing things after" using jQuery Deferreds and promises: http://api.jquery.com/category/deferred-object/
I've written 2 posts on the subject, if this is the route you want to use:
http://davidsulc.com/blog/2013/04/01/using-jquery-promises-to-render-backbone-views-after-fetching-data/
http://davidsulc.com/blog/2013/04/02/rendering-a-view-after-multiple-async-functions-return-using-promises/