A comprehensive guide to latest Angular framework
Complete Angular 2 Guide series
- Getting started with angular-cli(This article)
- Angular Components in depth
- Reactive Forms in depth Part 1
- Reactive Forms in depth Part 2(Coming soon)
Reactive Forms in depth Part 1
Reactive Forms in depth Part 1
Google’s latest avatar of Angular is round the corner and there are very few places where developers can go and get started without getting confused. One such resource is angular.io getting started 5 minute guide. However the overwhelming availability of resources can an issue sometime in getting started with latest version of Angular.
In this post we’d see how can we setup angular on our local machines from scratch and in the coming posts I’d cover details of the framework and its internals.
Angular team came up with angular-cli something along the lines of ember-cli and how you’d see in rails with all the fancy commands such as creating different building blocks of an application like the routes, views, components/controllers etc.
Angular cli has become the de facto standard for creating and managing angular application. Although its not a mandatory thing and there are other ways to setup latest angular projects. Feel free to explore as much as you can. Please reach out to me if one is more interested on exploring further.
Let’s get started and see how we can use to setup latest version of angular on our systems.
There are 2 things in particular which need to be setup on our systems before we could go any further.
Once you have installed both these make sure you have their latest or NPM( > 3.x.x) or NODEJS (> 4.x.x) installed.
Use node -v and npm -v on terminal or console to cross check these versions for respective softwares.
Now its time to install angular-cli , fire this command in console
npm install -g angular-cli
-g option installs angular-cli globally and not just for the a particular folder.
Finally lets create a new angular project using angular-cli.
Most of what I am writing here is from the angular-cli README.md. At any point of time while going through this article please feel free to use ng help to crosscheck the commands listed here and command present at the time the reader is referencing is this article.
All the commands for angular cli start with ng
Create a new angular project
ng new <project_name> //where project_name is name of the folder you want to create.cd <project_name> // to go inside the project,ng serve // this starts the live server
After this go to the browser and localhost:4200 address bar you’ll see app works message.
Some basic command used frequently with angular cli
- This command is used to generate basic components of an angular application such as components, directives, pipes, services, classes, interfaces, enum & modules.
- These can be generated with a basic template ng g <what is to be generated> <name>.
- eg. ng g <component|directive|pipe|service|class|interface> my-component
Creating a build
Deployment is of great importance and for big products there are generally dedicated deployment teams. For deployment there is a `dist/` directory which is deployed.
ng build // default build
Specifying build targets & environment files.
Specifying a build target use these options
--target=production & --target=development
- There is some difference in between production and development environments. In production environments change detection is only run once while in development environment it might run more than once depending on the ngZone.
- Specifying and creating new environments like `staging` environment.
- Create a new file at src/environments/environment.NAME.ts where NAME can be [stag] for staging environment.
- Using this newly created environment
ng build --env=stag
Running Tests with angular-cli
Unit tests can be run using
To run Integration Tests use
Deploying to Github pages
Use following command to deploy to github pages.
ng github-pages:deploy — message “Optional commit message”
This does the following magic for you.
- Creates GitHub repo for the current project if one doesn’t exist
- Rebuilds the app in production mode at the current HEAD
- Creates a local gh-pages branch if one doesn’t exist
- Moves your app to the gh-pages branch and creates a commit
- Edit the base tag in index.html to support github pages ( for changing as per the new github repo, this can be only found in the gh-pages branch )
- Pushes the gh-pages branch to github
- Returns back to the original HEAD
There are some features such as routes which are disabled for now in angular-cli but its because angular-cli is still in active development phase. Having said that I sure it will be coming to cli very soon. I’ll update this article with new and essential features in angular-cli over time.
Please reach out to me @ashishait if you feel there is something I missed and I’d be more than happy to make changes.
I hope you enjoyed reading this article as much as I enjoyed writing it.
AVIACOMMERCE: OPEN SOURCE E-COMMERCE
Aviacommerce is an open source e-commerce framework with an aim to simplify e-commerce ecosystem by creating and unifying smart services and providing consistent, cost-effective solution to sellers helping them sell more. visit aviacommerce.org to know more.
If you liked this article, click the 💚 below so that it can reach more devs on medium.
For more musings about programming, follow me here or on twitter so you’ll get notified when I write new posts.