Procrastinating for an year, I have finally decided to learn the new revamped angular — known as Angular 2 — oops, it’s already Angular 4. Now you know how long I’ve been feeling lazy enough to get started with this new component based, OOPS like version of angularjs.
If you are one of those people feeling comfortable with Angular JS and has a plan to learn Angular 2 which is now Angular 4, you are in the right place. Let’s kick this off and get the Angular train moving. It’s not a giant leap as people have mentioned every where. After all, I felt the latest style is more organized compared to the way we usually do in an Angular 1.x application.
Since this article assumes that you’re a front-end developer and well versed with node and npm, I won’t be going over how to get npm and other naive details.
Well, now you have npm on your machine — go ahead and install the command line interface for Angular 4, which goes by the name @angular/cli
npm install -g @angular/cli
This will install the cli tool to start working with Angular 4, which comes with extensive set of instructions to create and organize your project. Let’s get started with creation of a project.
With the installation of angular cli, you will be able to access a new command named ng. To create a new project, use new subcommand followed by your project name.
ng new myapp
Since we are just getting started, ignore that— we can learn about it later. For now, your js syntax works fine.
This takes some time as it tries to install all the dependencies. Grab a coffee and come back soon..
!! If the command line doesn’t respond, please do yourself a favor by pressing ‘Ctrl+C’. If you haven’t terminated it and it got back by itself — then you are fine. ng has installed all required dependencies needed by this project. However, if you have terminated and exited out of that waiting loop, then you need to do an extra step, which is installing dependencies manually. Don’t curse me — I just wanted to make your life easy!
So now, go ahead and install dependencies using following command
Now it starts installing dependencies based on those mentioned in package.json file. Since we have bootstrapped (created) the application using ng command line interface, it does a lot of work on behalf of us by putting in all the best practices in place.
Use the “open folder” option in File menu item or use “Add folder to project” in Project menu item to add the directory in which the project has been created earlier — both will get the project directory added to the side bar of Sublime Text.
Now, as we see — main.ts file is selected and file contents look flat without any syntax highlighting. That’s hard to understand for us UI developers, whose creative mind goes by the visual appeal and photographic memory. Thus, let’s get the plugins needed.
Since the above file is a typescript file, we need to install Typescript plugin. For this, use the key combination of Command+Shift+P on Mac and Ctrl+Shift+P on Windows to get the task command box — type in “Install package”, Select the option by pressing enter/return when “Package Control: Install Package” item is focused in filtered items. This would bring up the box to select the plugin and type
Typescript to filter available plugins and again use enter/return to select. You can see the status on status bar on bottom left side. Restart the editor if needed.
Once plugin is installed use key combination Commnd(Ctrl)+Shift+P to get the command bar and type in Typescript, select the option
Set Syntax: TypeScript and it syntax highlighting kicks in and makes your file look spiced up.
Don’t bother about what the files are and their contents. Let’s run the project to see if
ng newhas worked properly or not.
To run the Angular4 project, angular cli gives a subcommand
serve which runs our project on
open along with it makes it open automatically in the browser (this is useful when you don’t know which port is it running on). So the command is
ng serve --open
Tada! Your brand new
myapp is being rendered in browser. Yay! you’ve created a project in Angular4 and running it in just few minutes. That’s a ultra giant leap from your procrastination of learning this for more than 6 months.
Now this looks good, let’s get to the details and understand what’s happening with here.
Before we start digging deep lets have a look at
README.md. Its always good to start from
README.md to get yourself familiarized to the platform.
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.4.5.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
DISCARD the above file contents if you don’t have patience to go through it.
ng generate directive|pipe|service|class|guard|interface|enum|module
Always start the front-end application from index.html. That’s the way developers followed from decades (I’m just making up stuff :P).
Lets observe index.html for a minute.
The only tag which seems weird is app-root and there is no script tag to support this extra tag. Now lets see the generated html on localhost:4200
Here lies the difference in html, all of the script tags are generated after build.
main.bundle.js has all of the Angular component code to support the tag app-root.
main.ts is the main entry point for your app.
On Line 11 we can see that the Application is being bootstraped (initiated) using AppModule which indeed is being exported from Line 4 ./app/app/module
NgModules help organize an application into cohesive blocks of functionality. — https://angular.io/guide/ngmodule
In a laydev’s (layman who’s a developer) terms, the application is divided and subdivided to modules which is functional on their own. This shall promote quality and re-usability in many aspects.
On Line 14 we can see that AppComponent is used to initiate this module, which is being get on Line 4 from app.component.
Finally we see something that we can related to.
Lets go ahead and change the title to “MyApp” (Write what ever you want to see).
title = "MyApp";
Add some color to the title h1 tag.
color : red;
Or do I say final run for this first tutorial?
If you’ve reached this, you’ve made it!! Have a great day!