Angular
incubator pack
The purpose of the Angular incubator pack is to provide you with a starting point to learning all you need to know to become proficient in creating an Angular 2/4 project. This pack attempts to bring together the most valuable resources and tutorials that exist and fill in any gaps they may leave, expose you to the skills you will need when working individually or on a team, and the resources to further develop your aptitude in these skills.
INITIAL SET UP
Almost anything you build with Javascript these days requires you to use npm (and node.js) for installing packages. So before we get going let's get setup.
Go to the nodejs website and download the latest LTS available. Don't download the current version as this can causes issues with the dependencies that aren't up to date.
Install the binary that you got for your system. This will install nodejs and npm. You can check the versions of each by running:
node -v(you'll need 6.x.x or higher)npm -v(you'll need 3.x.x or higher)
As a test, you can install a package like rimraf with npm install rimraf -g. Then on the command line type rimraf and you should see a man page for rimraf.
P.S. If you are behind a proxy you will need to configure a couple 0.node & npm proxy settings first.
Outcomes of the incubator
Doing the Angular 1.x incubator in Angular 2
webpack
typescript
Testing
adding styles (bootstrap or material)
npm shrinkwrap
What to do after this incubator
After you've done with this incubator, you should be ready to get out there and start building stuff.
Below is a collection of more 'advanced' resources that will help you when building real-world projects.
Section 1
STYLE GUIDES
When working in a larger team, it can really help to have a defined style or way of doing things so that there is consistency in the code regardless of who wrote it.
This helps in a couple of ways, for example, there are always many ways to do the same thing, but if you use all of them, then as you read the code, you'll have to figure out each one as you go.
Additionally, a style guide will help you define the best way of doing things if there is one.
During the Angular 1 days, John Papa wrote a style guide. When Angular 2 was released the Angular 2, enlisted John Papa to help them write the Angular 2 style guide.
Section 2
SEED PROJECTS
Sometimes getting a production ready application can take a lot of work and setting up a full build pipeline can get complicated.
Using a seed project really helps with this, by putting together things like typescript compilations, webpack pipelines, code splitting, minification, chunk hashing, etc.
There are 2 really good ones:
- The Angular CLI release by the Angular team is a simple command line tool (which internally uses Webpack)
- AngularClass starter is also a very powerful starter but uses Webpack directly which means its another thing you will need to learn
Section 3
ADMIN STARTER
The other alternative is to get a starter project that is built with a whole bunch of components you might need.
WrapBootstrap has a collection of great Bootstrap based admin portals most build with Angular (and plenty other variations like Ruby versions).
For, on average, $20 these will get you out the gate pretty quickly.
However, they tend to be quite bloated so you may spend just as much time cleaning them out.
Local npm cache (Nexus)
When working with a larger team it can start to make sense to deploy your own npm cache to speed up npm install, your build times, etc by caching the packages you use on your local network.
If you work in a Java environment, Nexus 3 supports npm repositories.
- creating your own npm modules
- Immutable.js & Redux for complex apps
- using a jquery plugin with angular 2 and webpack
Feedback
Feedback is important. If you find a cool new resource or feel that any part of this incubator or it's resources are out of date, leave us a message in the Slack channel.