We have a Angular 1.x app. Each screen/layout has multiple widgets. We have new requirement to inject a help icon into every widget. To make the setup less intrusive, we have come up with a controller which looks up for the widgets and then injects the icon dynamically.
I would like to ask the UI experts here regarding the appraoch to be used to select the widgets (and hence inject the icon into them). Is selecting by a CSS selector better than selecting by ID (say widget ID)? What are the pros and cons of both approaches?
Thanks,
Midhun
I believe the best way is to create attribute level directive instead.
it can be parameterized like help-article="create_category" or even using several attributes
it's safer to keep classes and id for styling while linking logic to custom attributes
more expected in angular world
Related
We have a large number of angularJS 1.5 directives (around 100) that we use throughout our applications. We also use slickgrid almost everywhere to display mass amounts of data. A project has recently come up where it would be ideal to be able to use our directives within slickgrid cells. So I've been trying to write a slickgrid editor to generate our directives when you go to edit one of the cells.
It seems as though angularJS doesn't pick up on the directive (because slickgrid doesnt operate within angular) and doesnt attach the element to its lifecycles. so basically the base element and its settings will appear in the HTML like this:
<div class="slick-cell l2 r2 active selected" title="">
<custom-directive></custom-directive>
</div>
but since angularJS doesn't process the directives there's no visible element in the view and none of the transcluded elements are created.
I've tried using $compile to sort of pre render the elements and then send them to slick grid, but that results in multilink errors which I'm not sure how to resolve.
I've also tried using a JS template with the hope that the template could be rendered and then used in a slickgrid editor later, but I haven't had success with that as of yet. I am still trying to make this approach work since I've seen other examples of using templates with slickgrid, but they aren't using angularJS so my situation doesn't quite fit to theirs.
To summarize I'm looking for suggestions on how I might approach this problem. I know slickgrid isn't technically supposed to be used in this fashion but there has to be a way to make this work. Reusing 100+ pieces of code to extend functionality here would be a very huge win.
I'm working on an app where each user can define custom colors for its dashboard. Like textColor, accentColor and backgroundColor;
The entire UI will use those colors.
I know how to set a css property dynamic but doesn't seem correct to do it every single element.
I was wondering if I can create a dynamic css and inject it into the app. (is it too much workaround?)
I managed to make it work by using a server-side generated theme.css (something like /users/1.css). Can you smell it?
What's the proper way to do it?
We've developed an application that had to be white label, so we've created directives for the editable items and the directives listened to the service that handled the layout package from server, overwriting if needed the property. In your case you could choose to have only textColor, accentColor and backgroundColor directives instead of each layout component have your own layout directive.
I'm currently looking for a way to actually receive an entire scss from server that would overwrite the variables inside Sass, but I could not find any approach yet.
I would also share this article, that could be helpful:
https://engineering.thetrainline.com/how-we-implemented-a-single-page-application-using-react-3f22e4d545c4
I have an app using AngularJS and Bootstrap.
The way I have arranged my different views is using ng-show. That is, views change according to button presses, etc. and enabling/disabling ng-show values.
I have a single HTML file with a lot of DIVs. All these DIVs show/dissapear.
My questions are:
Is this the usual way of doing a single page web app? I.e. have all the views in different DIV's and show/hide them as needed?
Is there a more efficient way to arrange all different views in to a more structured way than having all of them in a single HTML file?
Thank you.
If your application is quite big and you have more than two or three views, you have to use a router like ngRouter, UI Router is more powerful but more complex. This is the best solution.
If your application is rather small (two or three views), and doesn't evolve, you can use ng-switch.
Ng-if may be an option but it is less convenient.
But you should avoid ng-show, because DOM elements are always in the page and just hide.
You should really use a routing service, such as ngRouter or ui.router, because if the app becomes more complex it will become increasingly hard to maintain.
Here's one article I googled on routing and using templates in Angular.
It is very easy to show multiple pages on the single page applications on according to their menu's using Routing in angularjs.
AngularJS Single Page Template and ng.Net Template, Both are based on mvc pattern, and easy to understand. So in below have some references. Check it.
https://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8-27566bfe7d83
https://github.com/BBird40/ng.NET
https://visualstudiogallery.msdn.microsoft.com/48d928e3-9b5c-4faf-b46f-d6baa7d9886c
I'm building my first Yii2 app in bootstrap and I was looking at a few templates to base the UI in. The problem is that each one offers a few unique form elements that I like. Is it relatively easy to copy form elements from one theme to another?
For example, copying the Ui Elements > Tree View from http://wrapbootstrap.com/preview/WB0B30DGR into another template like http://wrapbootstrap.com/preview/WB0F0419C.
Thanks!
Depending on your experience in CSS and Javascript. I also customized on several occasions templates bootstrap changing some elements. First, it is whether you intend to do only the changes to the graphics and then only the changes to boostrap.css or if you want to supplement / modify the parts managed via javascrit. For graphics all template-type bootstrap behave the same way, then it needs to identify exactly which categories you care about and modify them with the catatteristiche want. For the part controlled by javascrit the situation is similar only the most delicate and complex.
I posted this onto the durandal discussion groups, but want to cover my bases on it:
https://groups.google.com/forum/#!topic/durandaljs/PWgPUHcpzic
Basically, I want to see if anyone has successfully wrapped an existing control that is the complexity of the Mozilla PDF Viewer (http://mozilla.github.io/pdf.js/web/viewer.html) into a Durandal or Angular control, and been successful.
I know for other things, like date pickers, it's possible, but with this particular control, it's doing a lot with canvas and a few other interesting controls.
Any ideas on how I can accomplish this?
Can we use a knockout binding to accomplish this?
How do we control the positioning of this widget?
Yes, you would write a custom Knockout binding and wrap that binding in a Durandal widget. As for positioning, that's accomplished with CSS (or dynamically with a CSS Knockout binding).