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.
Creating a new Angular 4 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
To make you feel nostalgic, this command generates your project files like your view files, css files and other javascript files you’ve used in Angular 1.x — but most of them can be seen with an extension .ts, which means they are in typescript rather than javascript.
Don’t panic — Typescript is just like javascript, but kind of a super set. That means all your javascript syntax works just fine in typescript and it can do much more than that. However, for our browsers to understand, it needs to be converted to javascript — this is called Transpiling and the tool that does this transpiling is a transpiler.
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
npm install
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.
As a front-end developer, you might already have a choice of a IDE/text editor, but I prefer Sublime Text and they have a pretty cool updated and stabilized production version 3. If you are open, then I would suggest to use that as a preferred editor for javascript development.
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.
Screenshot to demonstrate the project structure
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.
Screenshot: TypeScript Syntax Highlighting
Running your project
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 [http://localhost:4200](http://localhost:4200.). Giving 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.
First look of the application.
Now this looks good, let’s get to the details and understand what’s happening with here.
Folder Structure
Folder structure as seen in Sublime Text editor
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.
# Myapp
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`.
## Build
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.
- The main take away from the README is that the applciation is served at
4200port. - To generate a component, you dont have to google every single time copy and paste stuff but there is a cool generator from the cli.
ng generate directive|pipe|service|class|guard|interface|enum|module
Folder descriptions in a simple language.
It all starts from index.html
index.html
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
localhost:4200 source
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.bundle.js
Application flow
main.ts is the main entry point for your app.
main.ts
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
app.module.ts
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.
app.component.ts
Finally we see something that we can related to.
- app.component.html is the view
- app.component.css is the styling file.
- title is the scope variable which is being used in the html file.
app.component.html
Update the default message
Lets go ahead and change the title to “MyApp” (Write what ever you want to see).
// app.component.tstitle = "MyApp";
Add some color to the title h1 tag.
// app.component.cssh1 {color : red;}
Second run
Or do I say final run for this first tutorial?
Final output
If you’ve reached this, you’ve made it!! Have a great day!
Prady | @pradyumna_d | “File Cryptocurrency Taxes Using BearTax!”