Hi I want to include different html pages,
in my project there are 10 tiles clicking on 1 tile related html have to be included. like this if I click any one in 10 tiles particular page should be displayed. Any Solution for this
If you want to follow rest api, you should change the URL on click.
Now implement ng-view for including specific html in the view on the basis of url.
You can learn routing here :https://docs.angularjs.org/api/ngRoute
Related
I have an AngualarJS app that has an index page and some partial pages, displayed in ui-view. The app is using ui-routing. I have a button on the header (located on the index page) and on click of that button I want a small pop up open - a page displaying some data from the database, based on currently logged in user. I am trying to decide between opening a windows with window.open and sizing it to about 400x400 but that seems very un-elegant plus I see some issues with opening it. Another option I am entertaining is bootstrap ui modal but that would involve including bootstrap in my project on top of all the angular and routing includes.
Not sure if there is a better way to go, would appreciate any leads.
If you don't want to include bootstrap in your project You may use this one
--> http://www.dwmkerr.com/the-only-angularjs-modal-service-youll-ever-need/
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 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.
We are building an application with complicated UI.
This is the sample view of a page in the application:
Left menu will contain the list of links for the corresponding pages in the right side.
We are using ng-router for building the application.
We took the whole page as one ng-view and include the left menu as single html template.
When clicking on the links, we will replace the right side tab content by ng-include.
Inside each right side content, we have sub tabs. When clicking on sub tab, we will replace the content of sub tab.
In Left menu template controller we have few ajax calls. When loading the content of the sub tab in right side, templates are not reloaded by the angular and is cached by the angular. But the ajax calls are reloaded again.
It should not reload the ajax calls inside the left menu when changing the content of sub tab in the right content.
Somebody might have faced this issue. Please suggest me to proceed further.
You definitely should check the ui-router project from the angular-ui team.
You will find their routing and the possibility to have nested views, named views and parameters super helpful with a complex design like yours.
https://github.com/angular-ui/ui-router
Alternatives to ui-router:
http://dotjem.github.io/angular-routing/
http://angular-route-segment.com/
Without diving into pros and cons.
I'm trying to use angularjs with routing in combination with superfish menu.
My web application is a MVC application and I use the superfish menu to navigate inside my web application. The superfish menu contains links that allows me to navigate to other views of the MVC application.
One of these views is an angular app with routing. But after this angular app is loaded none of my superfish menus are working anymore, because angular intercepts them and thinks it should be handled by angular routing.
Is there a way let angularjs ignore the anchor links on my superfish menu ?
I can not refactor the complete MVC application to a SPA (too big to convert at once), as I'm gradually introducing angular into this MVC application.
I've tried putting on each anchor target="_self" as found in the documentation, but one some occassions, they still get captured by angular (perhaps because some superfish menu items contain only "#" for href (they are parent menus containing submenus)
I suggest using a real href rather than #. If there is no suitable destination page then maybe use one of the child items’ hrefs as a default destination for when the top level item is clicked? From what you said about Angular detecting hashes in hrefs, this should solve the problem.