I have been on a few AngularJS projects now where directives are used extensively for handling views which end up with large amounts of JavaScript behind them. It doesn't feel quite right and they're also not the easiest thing to test unless you move the code out into controllers and bind that to the directive.
An example would be a large form created as a directive and a large link function placed on this. Not very testable, and its only used once in the whole application.
They do separate the code nicely in that you end up with code like this
<h1>example Header</h1>
<custom-form form-data="somemodel"></cutom-form>
<p>Lots of other stuff here</p>
Would be interested in how other people approach directives and views as I first thought directives should be really small components that are reused.
Basically, only few occasions I will implement directive and these are also the rules I trying to stick with
common reusable components I can use anywhere in the project (e.g. a time input directive with an add-on dropdown menu allow to choose time units like second/minute/hour/day)
Extend or patch 3rd-party directive
Most of the time, should utilise AngularJS MVC structure to fully take its advantage.
Related
Implementing below feature, when user clicks on Add button , new conext is getting added.
I created that context as directive, Am not sure whether i should create this just as template and repeat using ng-repeat or using directive is better.
I would recommend a directive. I personally find its a good way to encapsulate code. It makes it re-usable, and there is absolutely no performance issues doing so. AngularJS will run smoothly to about 2000 directives within the same page.
Doing it in a directive will also allow you to use functionalities later on you might not have predicted to use.
Recently, in working with AngularJS, I really like many of the features, like creating custom abstract data factories, etc.
KendoUI also has similar features like MVVM, SPA routes, etc. that AngularJS offers, so I'm curious about what the benefits are of mixing the two (other than the rich UI features of KendoUI)?
-- Update --
I'm asking this question for clarification, and for those who may be slightly confused about the benefits of each, and why one would use both in a project, rather than one over the other.
For example - Javascript unit testing capabilities (simply done with Angular controllers, but have not seen anyone doing this with KendoUI).
It seems like Kendo is trying to do it all, but does UI best.
Thanks.
-- Update --
Since writing this question I have gone through and integrated the KendoUI grid with Angular using OData and have written a tutorial here at www.whatsinyourlunch.com on how to accomplish this, in hopes that this will be useful for others.
The stack is AngularJS, KendoUI, OData, WebAPI2, .Net MVC5, C#, Entity Framework accessed through a generic repository.
I know this is old but here is my two cents. The more you use Angular the more you will realize you don't need Kendo. The Kendo/Angular integration is a bit of a hack but it seems to get the job done. The only reason I find to use Kendo is the grid. I've tried the Angular grids out there and they are riddled with bugs and formatting issues.
I think it's important not to be a purist and to just use whatever combination of tools that accomplish what you need. I tend to try to move away from being dependent on paid commercial libraries but the grid is just solid. Any paid product will probably have more support and upkeep, as well as personal access to the development team (vs. well maintained free products from large companies or single developer projects that waste away). I have seen so many great free products get abandoned. However, if you want a great free grid and can't stomach paying Telerik $1000.00 for just a grid, DataTables.net is a great alternative and what I currently use.
You have to love Telerik's support which is the best reason to use their stuff in my opinion. They are lacking some things in Kendo like a good date range calendar, tag cloud, etc. The charts are also lacking compared to say Highcharts. I use the date range calendar from Keith Wood, although he doesn't seem to respond to emails. I found some great angular controls for other things like drop downs, etc. as well. I used to not understand why people use a hodge podge of stuff, but it is the best tool for the job that is important.
I personally would not go any further than using the rich UI features of KendoUI in Angular directives. The rest should be Angular. Or use KendoUI exclusively.
Mixing them works fine. You don't have to use all of the framework code (MVVM, etc.) included with Kendo and can just focus on the rich UI features. We use several of their controls, including a highly customized version of the grid. Angular is perfect for this because we built directives to wrap the Kendo controls and encapsulate the 80% configuration that happens every time so the developer could focus on the 20% that is different in their page/module/whatever. Our project successfully engages over 20 developers in a distributed team on a project with tens of thousands of lines of code and we've had great success using the UI features of Kendo with Angular.
On our current project we're using both Angular and Kendo (mainly for the grid). We didn't mix the two and this would also be my suggestion. Angular should be the one responsible for your application logic and Kendo should only be concerned with managing the widgets.
Kendo provides there own kendo-angular library, which contains directives for most of their widgets.
Here are a couple of points of my experience which doesn't favor the mixing of KendoUI with AngularJs:
Though there are kendo directives for AngularJs, a lot of UI related stuff will end up in the controller (configuration, events, complex templates) and it's difficult to keep jQuery out of it.
The initialization and display of kendo components does add a serious time penalty to each page (grid, tabstrip, ...)
Events and method arguments are not coherent across the kendo framework (i.e. select method of grid vs listview vs combobox)
The use of templates with the grid (or listview) or responding to grid events does not feel like AngularJs.
Components behave differently than the native controls they try to replace (i.e. event order and databinding of combobox vs native select)
As soon as the look and feel of the kendo components has to be customized, one has to become familiar with the CSS classes used by kendo.
The KendoUI grid is great, but if the project doesn't need it, there's nothing to be gained by mixing the two.
I think mixing of them is not a good approach. you should ask yourself a question "witch one is more required and useful in my project"
I had decided to use kendo beside angular because of its rich grid components. But I canceled it.
The main controls of kendoUI is grid. But you need to watch every element of it to have a complete binding and it make it slow. Also dataItem of a row in grid does not return the original data.
you need to watch paging, filtering , sorting ....
But for other controls of kendo we have fewer problems.
I'm doing a visual website with lots of stuff depending on the scroll position. I understood this isn't the ideal type of project for Angular. Since things are very interdependent, it makes it hard to isolate things. Nevertheless, I wanted to try and do this kind of project with Angular, hoping to learn a better way to create modular code.
I run into a structural problem that is similar with both scroll events and CSS:
I try to create my directives with less dependencies as possible towards each other. The result is that each directive that deals with the scroll has it's own listener to the scroll event. Maybe this is isn't so awful concerning performance (or is it?), but it makes it hard to know what happens first. In jQuery land I end up using one single $(window).bind('scroll, ..) function, putting all scroll logic in one place, then the order is clear.
Similarly, this modularity makes having one single CSS file awkward, ideally I'd like to set the CSS from inside the directive to encapsulate the behaviour.
I have a feeling there might be some best practices with these types of issues that I haven't found out about.
j
I am taking up a task to re-write the following flash app in HTML5:
http://www.docircuits.com/circuit-editor
Given the complexity of the app and my R&D so far, I have identified AngularJS as the preferred MVC framework for the implementation. The app has various parts such as panels, menus, properties, charts, etc., all of which I believe can be easily implemented in AngularJS.
The key problem, however, is that the component design and interaction (things like, drag/drop, move, wire handling, etc.) need to be Canvas-based, as I have been able to export all the vector graphics from Flash using the CreateJS toolkit (http://www.adobe.com/in/products/flash/flash-to-html5.html) into a Canvas library and not to an SVG.
The problem is that there is no clear way to communicate between the "individual objects inside a canvas" and AngularJS. I have looked at the following examples, but almost all of them work on the canvas object, and not about handling individual components inside Canvas:
AngularJS Binding to WebGL / Canvas
Is there already a canvas drawing directive for AngularJS out there?
I am kind of stuck here, and not sure what to do. Would really appreciate a some comments on:
Whether AngularJS is the right choice?
Should I try implementing the Canvas part in another library (such as Fabric.js, kinect.js, Easel.js) and integrate it with Angular (which again seems too big a task for now)?
If none of the above, what other framework should I switch to that can easily handle canvas as well as other functionality like panels, menus, charts etc. with ease?
We finally managed to work with AngularJS and HTML5 Canvas together. Here below, I will share, briefly, our requirements and the approach we followed to achieve it.
The requirement was a bit tricky as we wanted to:
Handle event handles on individual elements inside the canvas, and be able to add these elements dynamically based on the data in AngularJS
Keep data for each individual element in AngularJS while using Canvas for only display of the data.
Use controller inheritance for special handling of data in certain cases (for e.g. all the instances should be movable and draggable, but some instance may need to blink or show some color bands etc.)
To handle the operations on Canvas, we divided it into two parts:
Canvas service
It does the job of
initializing the canvas
adding or removing any element from the canvas
refreshing the canvas
Instance directive and controller
the angular controller keeps the handle for the corresponding "canvas element", and also all the data that is associated with it.
the event listeners on each element trigger specific functions in the angular controller which manipulate the instance data
the directive watches the instance data in controller, and correspondingly updates the canvas with the help of the canvas service
For controller inheritance, we found the following approach quite useful:
https://github.com/exratione/angularjs-controller-inheritance
This helped us create controllers dynamically, and with the help of instance directive, we could also handle individual updates on the canvas along with the generic event handling.
I understand that this approach may not be completely AngularJS-oriented, but it worked well for us, and we were able to handle a reasonable amount of interaction between AngularJS and HTML5 Canvas.
Sure you could do that with Angular just fine. However, depending on the complexity of your app and the type of data synchronization you need I would recommend using JS prototypes to handle that. The "angular way" would be to use directives instead.
Create a global drawing context and then split up the various components into JS objects. Handle the setup, logic, update, etc within each object (sort of like a class) and then draw to the global context. You should have a main draw loop which is essentially a setTimeOut function that updates the game object states and redraws everything.
An alternative approach is to combine Angular and JS prototypes. This is a great example: https://github.com/IgorMinar/Memory-Game
EDIT: another example of building games with angular http://alicialiu.net/leveling-up-angular-talk/examples/directive.html
I am building a website based on widgets. I have a general WidgetInstancesController class with several methods, a model and some views for it. Now, I want to know if it's possible to extend this class. In other words, each widget should be another class, extending the WidgetInstancesController class. I want to store these widgets classes under app/widgets/. Also, these widgets won't have any specific model (as they will use the parent WidgetInstance model) but may have some specific views.
Any suggestions on how can I do this will be highly appreciated!
I would suggest building them as components, but it can be done in other ways.
I have had to do something similar where I built a CMS with add-on modules. To make it work logically, I had to turn MVC on its head a little and go for a very thin controller. Essentially, the front-end module logic was contained entirely at the Model level, with the associated views as elements. A module helper fetched and displayed the module in the public front-end. The back-end was handled conventionally via MVC with a normal fatness controller.
As it turned out, the Models were surprisingly lightweight and having everything as elements made usability a dream.