I'm converting a Flash/Flex application into an angular application.
In flash, I have a header, toolbar above, and navigation to the left. When users click on the navigation, different modules are loaded into the applications main content pane. Most modules support New, Edit, Archive, and Un-archive actions. There are icons in the toolbar that execute the actions.
But there are some modules that support additional actions. In flex, when the child module loads, it loads a new button into the toolbar along with a callback function that will be called when the user clicks on the custom action button. When the module unloads, it removes the button from the toolbar.
So in angular, what could I use to achieve similar functionality? Is this a parent/child scope kind of thing or something else altogether? I'm new to angular and I'm not sure how to approach this problem.
Thanks in advance.
Related
Is there an angular material component to show a list of current items in progress or those completed just like when you perform download below? Or need to create my own?
I'm not asking about the progressLinear itself, I know that. What I'm asking is a component that will group all current tasks in progress and completed tasks in a dialog where you can see a cancel button, show all processes, just like when you are downloading.
There are no components that I am aware of that have the exact behavior you are looking for. Other than the native browser support for downloads (which is not what you want). I think it would be really easy to create a reusable component to achieve what you are looking for. A directive that can track a list of tasks and callback to the appropriate cancel function on a button click.
There are several progress bars you could use. If you want angular-material... https://material.angularjs.org/latest/demo/progressLinear
Bootstrap has some options as well...
https://angular-ui.github.io/bootstrap/
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.
I'm using angularJs 1.3 with Angular Material Design 0.8.3 and I have a page that has a toolbar on the top <md-toolbar class="md-whiteframe-glow-z2 md-default-theme"> where I'm trying to put some icons dynamically. The page has some crud's and each crud has it own controller. The case is, each crud must have it specific icons at the toolbar, I'm trying to specify it through the controllers but I have no idea how can I write this cuz each icon should have it owns properties (the href link, the action function etc). Someone know if its possible to apply this idea (control the icons that will appears in the screen per crud via controllers)?
I have an Angular app that uses Angular UI Routing to provide states. The basic routing between pages works.
The app has multiple pages, and one of those pages has tabs. When I navigate to the page, I get a nice animation, and the back button appears in the header.
But when I navigate to the tabs page, the back button doesn't appear and there is no animation to the page. Is it possible to get an animation when I navigate to the page that has tabs, and to have the back button appear?
UPDATE:
Made a new example that better shows what I mean:
http://plnkr.co/edit/jKII2S3uEnEOVDy9WBA2?p=preview
look into this -
http://ionicframework.com/docs/angularjs/controllers/view-state/
The View Service is leveraged by the Ionic's tabs directive, which has
child tab directives. Each tab requires its own history stack (forward
and back buttons), and to do so each tab has its own navView
directive. This system is similar to what you see in modern apps, such
as iOS's App Store, or Android's Play Store.
each tab within tabs has it's own history stack, therefor your nav-bar history is reset when you enter a tab for the first time.
it is managed with a $historyId value on the scope of the directive. maybe you can work around that with the use of these value.
I was trying to understand how DotNetNuke dynamically loads web user controls (.ascx) that have statically defined event handlers. I've tried to go through the documentations available on DotNetNuke's website, but couldn't find a proper answer to my question.
Assume that the user control has a button inside it and has its click event specified in the .ascx file. The user control does not wire up the event handlers inside the page_load() or init(). So if the user control is dynamically loaded without wiring up the event handlers in the page_load() on every load, why does the event handler of the button still work? What is the process that DotNetNuke uses to create a module out of the ASCX file? It would also be great if anyone can point me to some documentation.
It simply loads the control early in the page lifecycle, there is nothing all that magical on how this works. They are regular ascx controls. The key is the definition of "AutoEventWireup" on the ascx.