I'm starting to wonder what is the best way to work with a moderately sized AngularJS project. I'm wanting to find where a directive or service is used without having to do a 'Ctrl+F' and search the project manually. Are there any IDEs that offer this feature, or does anyone have some approaches for working with these projects that they could share?
I didn't try it personally, so my answer is going to be pretty short, but I think you should look at TypeScript (http://www.typescriptlang.org/). I've seen many mentions of it being a good fit for Angular, and it allows for "Intellisense" features in IDE that should meet your needs.
Basically it means rewriting your code in an "augmented" version of JavaScript that makes your code typed and therefore should make it easier to handle a large codebase and run static analysis.
Here's some information about TypeScript support in IntelliJ, if that's your IDE: https://www.jetbrains.com/idea/help/typescript-support.html
Related
I have watched the latest ng-conf and saw Brad Green says Angular2 now weight 45K, and angular1 is 56K. I try to understand what those number represent, but without success.
I also saw this gist that list Angular1 and 2 frameworks by size. And there are completely different numbers there.
The ng-conf YouTube link (it's in 57:10).
The relevant slide:
I understand well your question ;-) In fact, it's after packaging your application and using tree shaking. The latter is a technique that leverages modules to only keep what is used in the application (apply to third party libraries as well).
I think these two links could help you:
http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
https://medium.com/#Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80#.6s0vcyv49
The presentation was about offline template compiler that is currently experimental, that eliminates loading Angular2 parser and compiler into the browser by processing the templates and converting all declarative bindings to JS at compile time.
This allows to reduce the Angular2 package code size that actually needs to be loaded into the browser.
If one requires solutions like demonstrated in How to realize website with hundreds of pages in Angular2 the parser and compiler would be required to be loaded into the browser and lose this size benefit.
I am wondering if anyone has experience with an automated accessibility testing tool for Angular Single Page Applications (SPA).
I have tried pa11y and it does not seem to be working consistently. Just wondering if there are any other tools out there which are comparable to pa11y in ease of use, but which work with Angular.
#Estus raised a good point in the comment — "does not seem to be working consistently" is not a lot to go on. Regardless, a couple options:
Take a look at protractor-accessibility-plugin for NPM which can lean on the Chrome Accessibility Developer Tools or Tenon.
Related, there is a tutorial on using Tenon as a Grunt task.
Level Access offers an implementation example of Continuum called 'Continuum for Protractor' that might be a good place to get started. It's available for free at webaccessibility.com. You can use it as a template or as a reference to integrate automated accessibility testing into your existing Protractor tests. Here's some more information if you're interested. I also help maintain Continuum Explorer, which is a free extension for Google Chrome that is framework-agnostic and more interactive if you think that might be a better match for your use case.
I'm looking for dock layout engine for angularjs written in typescript. I found Dockspawn but it is written in DART and it's not compatible with the rest of my project. Does somebody know any dock layout engine (even paid ones) for angularjs in typescript?
I think your real problem is that dockspawn was abandoned. This is something I built at my company (which, sorry, we don't sell software)and it turns out that Angular is the worst thing you could use to build a layout engine like this.
Managing scope chains among components that are constantly changing positions, opening/closing, resizing, and floating is entirely too complicated for this type of project. You will end up with 15 step bug reports everywhere, and unless you have a perfect algorithm set in place before ever developing anything you will end up spending weeks re-writing code.
Solution (and not the one you want to hear): drop it. Web design is meant for developing pages within the browser, not for developing windows with tabs within your browser window which is full of tabs. The control and flexibility is very nice, but there is always a way to provide the user with just as much control by setting up panels on the page in the positions in which they will be consistently used the most.
Sooner or later someone will develop what you are looking for and release it, but it probably won't be in Angular and it's definitely going to cost money.
You should be able to use Dockspawn because at runtime DART is JavaScript, so as TypeScript. You just need to find a way to make TypeScript aware of Dockspawn and you can do that using a Type definition file.
The types definition file for Dockspawn is available online.
You can install this kind of files using a tool known as tsd. You can find a basic example here.
The owner of the DurandalJS project is now working at Google on AngularJS Next (v2?) in addition to keeping the current version of DurandalJS maintained. The two frameworks are converging.
http://blog.angularjs.org/2014/04/angular-and-durandal-converge.html
For a new mini-SPA project, which framework would be the best choice specifically with regard to the upgrade path?
I note that Rob Eisenberg has listed a number of tips to help existing DurandalJS users get ready for the next version, so it appears there will be an upgrade path available, but I'm wondering if the upgrade from AngularJS to the next generation framework would be simpler.
http://eisenbergeffect.bluespire.com/preparing-for-durandal-nextgen/
To be clear - I'm more concerned in making the right choice for the future (large SPA, split into multiple mini-SPAs) than for my current needs.
I'm not sure which one would be the best choice for now ... actually I'd say none of them is future save enough. Angular 2.0 is going to be definitely different from 1.0 and of course also from Durandal.
Nevertheless the framework itself maybe not that important. I think you should focus on separating code in reusable components. Whether it is a Angular Service/Factory/Provider or a clean Require Module in Durandal it actually doesn't matter. Getting it into the "NEW" Framework should be just a matter of adding the proper wrappers. As for 2-way-binding use the oberserver plugin to maintain clean POJOs.
The most important change from my perspective in NG2 will be the support of Lifecycle events, so even using those in Durandal now will be somehow supported in NG2. As for composition there for sure will be a way to simulate that easily in NG2 as well.
For current work the only two things important for the decision of the currently used Framework in my opinion are the use of RequireJS and Framework simplicity. Sure you can add it to Angular as well, there are several guides on that, but Durandal was built from ground up with RequireJS in mind. Especially in bigger projects this can save you a lot of headache from missing or wrong dependencies. As of the second argument -> porting Durandal to Angular is not that of a big deal because it's written in an easy and understandable way. Vice-versa may be a totally different story. Getting your custom Directives implemented as a combination of templating and ko-bindings can get pretty hard :)
So as a closing statement, if it's going to be a small project, but with the need for continuous support as well as update to NG2 in future, I'd go with Durandal. Besides RequireJS everything is exchangeable and adaptable. In the case of Angular I'm not sure how drastically the new DI system will change the way of development so that would be a show-stopper for me.
Btw. here is the design-document for NG2. So as you see there kinda everything that is important is gonna change:
Router
Persistance
Directives
Modularization (maybe we finally see RequireJS :) )
Ext JS is a nice framework for web UI, but I found that building and putting stuff together takes a long time and painfully slow.
This might be a general problem when working with JavaScript, but does anybody have any way to speed things up?
What can I use? Better IDE with good JavaScript suppport? GUI designers? Code generators?
I need some way to speed up common things like building grids and forms but yet let me do complex things like creating custom components easily.
I'm using ASP.NET MVC. Coolite seems nice at first, but I feel that I'll be having trouble when creating any custom components later on.
There's always Ext GWT, which lets you use Eclipse tooling (and all of the advantages that gives you, such as refactoring, swift code navigation, etc.) to create your Ext/JavaScript app.
When you download the ExtJs library, you find lot of sample applications for common requirements like Grid panel, forms, form elements etc.
Regarding IDEs, you dont find mature productive tools, but check the below link and wish it could be of help to you
http://www.extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/
But if you really wish to develop custom components, you need to get through knowledge,start approaching with ExtJs-provided sample apps.
If you want to get faster at anything, practice it until you fully understand how it works and how to make it do what you want. If you are just starting out, why would expect to be able to work as quickly as you do when you are working on something that you are very familiar with?
Things I use to make ExtJS less painful
Chrome, for it's developer tools, or Firefox with Firebug.
snipMate: snippets for Vim, so I can quickly produce boiler plate code for classes.
JSLint as a command line tool. Especially good for detecting rogue commas.
Sencha forums.
ExtJS IRC chat (Server: irc.freenode.net Room: #extjs).
API documentation.
Sencha and Saki's ExtJS examples.
Beer.
ExtJS is building a designer right know so you can look forward it, the only problem I think is not gonna be free.
you can see a video demo there, in term of release date I think this is due to the first quarter of this year.
I say learn the framework. But to develop apps, I use IntelliJ IDEA, which has partial code completion, etc. It costs money though.
Once you have some practice and understanding of how ExtJS works, you'll get faster at it. By using the examples for reference, and building up my application in small pieces, I've gotten much better (and faster) at developing stuff with ExtJS. A great way to get started is to find an example (or two) that kind of do what you need, and modify (or combine) them to see how they work together.