I'm going from RC4 to RC6. I'm trying to read angluar.io's website, and some of the instructions are not clear for me.
I have a couple of basic questions, that I'm hoping for more clear answers to:
If I have 15 components, what tells me that I need to split them among multiple ngModules?
in RC4, I have directives, how do I know when to push them into either imports or declarations?
Thanks much
You don't necessarily have to turn each component into it's own module. If two components are closely related I would turn them into a module.
imports are used to include other modules in the current module.
declarations are used to declare all the components of the module.
Use the official angular migration from RC4 to RC5 before ;)
https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html
Related
Given there is a React project that uses plain javascript, is there a way to use typescript partially only to define models?
So, lets say there are a few models that map to server responses, can only those be defined in typescript while the rest of the project remains in javascript.
If its possible, how to do it?
Typescript can definitely be implemented gradually into an existing JS project, and I know a few people who have gone through the process on some monoliths, it can be a really boring process but usually low risk.
I'll link you straight away to this:
https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
The key is to understand what your goal is, and how to set everything up properly to accommodate for it, as you go it's as simple as toggling a few settings to unblock/check work as you go.
As for your question about some files being JS and some being TS, typescript handles pure JS perfectly fine, so you can switch every file to TS and even if it's pure js there won't be an issue :)
Have a read and if you need any more help on some specifics feel free to comment
I want to use ReactJS for the front end of our new system.
The back end system (in C#) has different modules which can be toggled on/off. Each module has its own set of DLLs, meaning the product can be "shipped" without unnecessary module DLLs. "You need chat functionality? Here's the DLL, drop it in your bin folder, good to go!"
Each DLL is pretty much standalone with no dependency on an other, apart from it's main parent abstraction.
I would like to know, is it possible to create something similar in a React front end? I don't want to have hundreds of react components listed with a bunch of 'if' statements to show/hide them.
I would like each module to be responsible for its own rendering & actions. Adding a brand new feature would be as easy as 'building the extra module' (not updating the 'core' system files to tell it about the extra module).
Gah, I hope that makes sense! Could anyone point me in the right direction? Is this a fools errand? Is it achievable?
Thank you in advance.
This is more question of how to split your frontend code than react specific question. Good news is, it's certainly possible. Take a look at webapack - bundling tool often use with react. I am not sure how exactly modules and DLLs work in C#, but I imagine you have some way how to include different js bundles into them. If so, webpack will help you create these bundles.
Angular1.5 provides us the new concept - Component, like an improvement for old element-directive one.
It would be nice to have clear distinction between them: when to use what.
There is explanation on official site for cases when we should use directive. But all could be covered by attribute-directive. Is there still place left for element-directive in new applications?
Differences between .component() and .directive()
Angular's Team release the last version for helping developers to migrate to Angular 2.
One of the implementation that helps is the .component() method. In fact in Angular 2 we talk much more about Components instead Directives.
Think about components like a small reusable thing that you can declare one time and share in all your applications.
The new .component() method is really similar the old .directive() but introduce some little differences that helps to adopt best practice. For example the link function is missing and you need to use a controller instead.
In this very helpful article by Aviv Ben-Yosef you can read more about the differences between .component() and .directive().
http://www.codelord.net/2015/12/17/angulars-component-what-is-it-good-for/
When To Use
If you want to migrate to Angular 2, use the .component(). So you can learn a very similar syntax to the new version and migrate very easily.
In short, use directives only when you need to manipulate the DOM elements and in other cases use components.
Yes you can use directive as element if your requirement requires it.
What is the best solution for including vanilla JS libraries in TypeScript projects? This is one of those things that "works" just fine, but I feel like I'm clearly not going about this in a "best-practices" sort of way.
Let's say, for example, that you want to use EaselJS in an Angular project. You can just add a link to CreateJS in your index.html file as usual, and then you have access to the global createjs object, but your compiler will of course know nothing about createjs, and will assume that you've got an error. What's the best way to let TypeScript know about this external source?
Moreso, what's the best way to enable auto-completion so that when I type "createjs." I get a list of the methods in that file? Is mixing JS and TS like this possible?
I suppose I could create a TypeScript shim that passes things through to the createjs object, but then that shim would be riddled with "errors."
Thoughts?
Thanks!
Oh, looks like this is done via a definition (.d.ts) file. There's a good tutorial here. In fact, CreateJS already has one of these available here, and if you go up a level in that Github Repo you'll find tons of these definition files in the DefinitelyTyped repository. I haven't tried this out yet, but it looks like the right direction.
You should use ambient declaration.
declare var createjs;
You use ambient declarations to tell the TypeScript compiler that some other component will supply a variable.
I'm developing some reusable components with AngularJS, I checked angular-ui/bootstrap to steal some ideas and best practices and I was surprised that they create one module per Bootstrap component.
https://github.com/angular-ui/bootstrap
Can anyone explain this? Should I follow this pattern in my project?
Because some people might need just one component, and not necessarily all of them.
If your project is going to be an open-source set of components, you can consider that approach. Otherwise, there's probably no need for it.
The recommended way of structuring a "normal", larger application would be to group things that share a view into a module. So you might have an admin module, messages module... each with its components.