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
Related
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.
Is it common practice in WPF to create custom controls and use them as page components and directives, similar to how it's done in Angular?
Angular example:
<custom:control></custom:control>
<custom:super-bindable-view prop1="{}" prop2={}></custom:super-bindable-view>
It is a common practice, but doing so depends on the situation.
Creating sub-controls, either customs controls or user controls, can help to simplify your XAML. It separates the logic for that component so that your view model doesn't have to get unnecessarily bloated. The downside is that you do create extra binding logic by way of dependency properties and it can obfuscate what your view is supposed to be doing.
The main deciding factor is around reusability. If you want to use the same control in multiple places, then it's probably a good idea. Otherwise you need to ask whether or not pulling out a separate control will make your code easier to understand and maintain.
So recently me and the developer team I'm in have finished working on a huge project for transforming our entire system from Extjs2 to 4.2.
We have finished fixing everything, every little bug, except we were left with one little task, making the system also available for IE6 (many of our customers still use it). What we thought was a little task was apparently one big problem.
None of the grids were loaded properly (only column headers and no data), and many important components such as panels appeared blank.
We apply the rtl property in our main css file, since we don't want to add rtl: true for every component:
html { direction: rtl }
Once removing this, everything was working perfectly (except for the direction of course). Currently we are following the code in ext-all-rtl-debug and finding the problems one by one (for example we found out that an added cls in the mask function was causing some of the problems with the grid). As you can imagine, this is a big, painful and slow process (especially considering we debug ie6).
Although everything looks fine in FF, Chrome, and even IE7, the entire project have rendering problems in IE6.
If anyone is familiar with the issue, and perhaps know of a possible fix, we would be forever grateful!
The "rtl:true" config is inherited throughout the component hierarchy, you should be able to just add "rtl: true" to the top-level component in the hierarchy (usually the viewport). This eliminates any need to set "direction:rtl" yourself, since components in an rtl hierarchy will have the "x-rtl" class added to their element(s).
You also need to make sure you are using the rtl stylesheet, as Ext JS components require quite a bit of special styling to work correctly in rtl mode. For example, for the classic theme this would be: ext-theme-classic-all-rtl.css
If you're still stuck, have a look at this example: http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/rtl/rtl.html?theme=classic
In my app, there is going to be a page that occupies the whole window (i.e. you can't scroll in any direction, the page resizes itself to the window size). I'm sure I can do some CSS trickery to achieve that, but this page is also going to contain some resizable areas. Basically there will be a sidebar that the user can make wider (within a min-max range).
Essentially what I'm trying to do is recreate this page if you select "Border" under Basic Layouts. I'm at a bit of a loss about how to do this. Should I try introducing some jQuery UI, or is there a purely AngularJS was to do it?
I know I haven't provided any code, so I'm not expecting anyone to give me the full working code. But a nudge in the right direction would be great!
No, there isn't a "pure" AngularJS way to do it without writing some new code or adding a framework to the mix such as you mentioned. I'd suggest looking at the more popular UI frameworks and see how they fit (maybe jQueryUI, or even Sencha).
Additionally, you sh/could write a directive to wrap your usage of the component to black-box it a bit more and be in the spirit of AngularJS (& so that you could more easily replace it in the future).
Given that type of functionality can be a bit tricky to create cross-browser (depending on browsers supported), it's probably best left to others who've done it.
A bit late but guess it is what you wanted AngularJS UI Layout
A borderlayout or splitterlayout plugin with AngularJS.
I've currently noticed that many people start using this model very often. Anyways, I think it's very correct to separate logic from presentation.
What more, some functionalities cannot be accomplished without it, or just very hardly.
Consider a Tree that is selectable, has search capabilities etc..
But in some cases, you don't need to implement this MVVM model, although people do it.
Do you think it's correct? Wasn't the purpose of WPF to simplify coding - try to do the majority of work in XAML?
I have a feeling, that this model is often misused just for the elegance of the design, but breaks the WPF efforts.
Or am I completely wrong?
imho WPF is designed to use MVVM, so if you writing your code without this pattern will lead you sooner or later into a situation where you have to do some hacks to solve problems.
For me there are very few reason not to use MVVM, like private projects, tryout's, ...
In larger projects, everything should be written in MVVM because of the capabilities of this design pattern (enabling unit tests, prevent miss-use of UI, ...)
The main purpose of seperating logic from UI is for the testability. Since you are putting all logic under ViewModel, you can write the test script for testing your logic without UI.
The issue is that there is a lack of tools so it hard to pitch wvvm when someone has to write half a page of code to throw a messagebox when a button is clicked.