I'd like to know whether it is possible with angular 1.x or not.
The constraint is to have an application compatible with mobile and desktop. On each page of the application, there is a ui-view that displays the usual content, eg.
<div ui-view flex></div>
But for desktop only browsers, there is another ui-view with additional content (it benefits from a larger width), eg.
<div ui-view="desktop-only" hide show-gt-sm></div>
My question is: when a URL is entered, is it possible to open a different state in each ui-view? (currently, the desktop ui-view is fixed) Maybe be defining specific routes for this ui-view?
I finally made it work using:
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
For each state, you can handle multiple named views, each view being related to a controller.
Related
Onsen UI: v2.0.1
AngularJS: 1.5.9
I am building an Android and IOS application that requires dynamic tabs (ons-tab) like in native applications. The content in each tabs can be up to a hundred items. So I want to use ons-lazy-repeat for the ons-tab content to minimize memory consumptions. How do I go about achieving this (dynamic tabs and ons-lazy-repeat ) with Onsen UI. I have searched online and I couldn’t see any solution.
Thank you!
The ons-lazy-repeat component is described in detail in the documentation.
Dynamic tabs can easily be achieved by using the ng-repeat clause of AngularJS. If you don't want to load the content of each tab right at the beginning, you have multiple options like ng-if or ng-include to make sure that only the content of the current visible tab is loaded. You may access and check the visibility of the $index variable that is available in the ng-repeats scope to do so.
See this post how this may be done. Onsen offers a tabbar and tab components which will work the same way as the tab div's in the questions answer.
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 am building a Hybrid Mobile app with Angular 1.4x, Angular Material, UI-Router and Cordova. I am using UI-Router nested views to implement a global sidebar navigation view, but I have been adding the header bar markup to each content view since the title and some of the header action buttons are specific to the content view. This is causing a few problems:
The header bar flickers during navigation since it is being removed and re-rendered with each transition
I am duplicating quite a bit of markup for the header bar over and over including duplication of common buttons shared across all views (like hamburger button, etc).
It is convenient to be able to respond directly to header bar button clicks in the content view controller, but it feels lazy and violates DRY. It seems like the header bar should be a global UI element that provides an interface for content views to customize action buttons. I can't find any good blogs or examples on this.
Wondering how other developers handle this?
Well, you can create a NavBar at the index.html, above the ui-view tag, when you change the view, you'll only change de ui-view tag or you can create a NavBar for each view, in any case, use ng-cloack to prevent this kind of issue.
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
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.