Angular 4 - The Beginning

When i first started using Angular 2 its in beta. Getting started with Angular is pretty easy. The team provided an awesome cli-tool which will help to create, develop, test and build the Angular project easily. We need to install the angular/cli (Formerly angular-cli) globally. Latest angular/cli(1.1.2 at the time of this writing) will create an Angular 4 project.

npm install -g @angular/cli

Suppose you need to create an Angular 2 project. What will you do? NOrmally what i will do is will install rc4 version of angular cli and create a new project, which will by default create a angular2 project. Then later will update to latest cli and the project will work smoothly in latest cli,

npm install -g @angular/cli@1.0.0-rc.4 

So that's all about angular/cli. You could check out detail in here.

Lets create an application and try it. For creating new application run the following command.

ng new ngApp

This will create a new application and it will install all the dependencies . Do you know what the coolest thing about this cli? You don't have to waste a single minute to setup the development environment. Just think about the application and its structure. forget about the development environment.

Since our application needs routing am going to create a routing file and also the prefix. Prefix is a short name which will be added to every component which we create with cli. Which will make our application components more unique. So am gonna create app like

ng new ngApp --routing --prefix=lm

Here the "lm" means just "logicmania". That's it. Nothing more. You could use anything you wanted.
This is how our application looks.



Lets check the application. You will find number files and folders. At this time we are concerned about whats inside "src/app"  and "src/assets" because this is where our actual application code resides. Outside this application is mostly related to development environment like testing and so on.

Inside the "app" folder you will find a root component has been created. This component does have a html, ts, css and spec file for unit testing. This is where our actual application starts.

If you check the app.component.ts, you can find component definition in the top section. If you check the selector you can find it like "lm-root". "lm" is the prefix added when we created the application. You can view and change this prefix from ".angular-cli.json". Also you could find the html and style sheet files where added in this section. Go to index.html in the "src" folder. You can find the "lm-root" is in the body.

Check the app.module.ts file. You can find BrowserModule which is imported in the module. Note that it will only imported in only one time.

Enough of this code reviews lets run the application .

cd ngApp
ng serve

Go to browser and use http://localhost:4200/#/. Your app is up and running. You could see a page like this one.




You could find the code here.

git clone https://github.com/harilal/ngApp.git
cd ngApp
git checkout -b part1.0
npm install
ng serve

Comments

answes said…
Nice to see your post, we are using AngularJS 2, we are working very comfort develop, with any issues in the team: Python training in Chennai
DeepikaOrange said…
Your blog is awesome.You have clearly explained about it ...It's very useful for me to know about new things..Keep on blogging.

Angular Training in Chennaihennai
Angular JS Training in Chennai
Jayalakshmi said…
Thanks a lot for sharing such a good source with all, i appreciate your efforts taken for the same. I found this worth sharing and must share this with all


Dot Net Training in Chennai | Dot Net Training in anna nagar | Dot Net Training in omr | Dot Net Training in porur | Dot Net Training in tambaram | Dot Net Training in velachery





Sakthi said…
I recently visited your blog and this is very useful for me. Thank you for your excellent post...
SharePoint Training in Chennai
SharePoint Course in Chennai
PLC Training in Chennai
HR Course in Chennai
Ziya said…
This comment has been removed by the author.
Rupesh Kumar said…
I loved the information given above, I appreciate the writing. Enhance your learning experience with our top-notch online home tuition classes for Class 11.
For more info Contact us: +91-9654271931, +971-505593798 or visit online tutoring sites for class 11
Chaitanya said…
This article will help the internet people for building up new webpage or even a weblog from start to end.
SAP HANA Admin Training
React JS Training

Popular posts from this blog

Configure PostgreSQL and phpPgAdmin in WAMP

Angular - 4 year road map

Flash FLV player using PHP