I'm curious in my exploration of AngularJS.
Sometimes views are quite complex and the logic provided by CSS and Angular templates is not enough. For example, let's say that I want to add decorative elements whose number change according to an image size.
How should I implement it in AngularJS?
Try to decompose views into directives. Directives play role of components in AngularJS.
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.
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
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 just moved from directives in AngularJS to using components in React and I have came across an issue.
In Angular I used attributes directives, for example a directive that would add Google Analytics events to elements in the DOM, or automatically apply multi-line ellipsis.
Is there a similar alternative in react, not necessarily attribute directive but maybe a best practice?
Thanks.
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.