Skip to main content

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
cd ngApp
git checkout -b part1.0
npm install
ng serve


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
Unknown said…
Amazing Article ! I have bookmarked this article page as i received good information from this. All the best for the upcoming articles. I will be waiting for your new articles. Thank You ! Kindly Visit Us @ Coimbatore Travels | Ooty Travels | Coimbatore Airport Taxi | Coimbatore taxi
Aditi Ray said…
TreasureBox is operated by a group of young, passionate, and ambitious people that are working diligently towards the same goal - make your every dollar count, as we believe you deserve something better.
rattan outdoor furniture nz
headboard nz
laptop table nz
norhan said…

تعد الاول افضل شركة غسيل خزانات بالمدينة المنورة تعمل على استخدام افضل ادوات تنظيف وتعقيم خزانات المياه
Ravi said…

Thanks for your extraordinary blog. Your idea for this was so brilliant. This would provide people with an excellent tally resource from someone who has experienced such issues. You would be coming at the subject from a different angle and people would appreciate your honesty and frankness. Good luck for your next blog!
Tally ERP 9 Training
tally classes
Tally Training institute in Chennai
Tally course in Chennai
seo training classes
seo training course
seo training institute in chennai
seo training institutes
seo courses in chennai
seo institutes in chennai
seo classes in chennai
seo training center in chennai
w3webschool said…
Great Article. Thank you for sharing! Really an awesome post for every one.
Digital Marketing Course In Kolkata
Web Design Course In Kolkata
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

Popular posts from this blog

Configure PostgreSQL and phpPgAdmin in WAMP

As i told earlier am trying to switch to Flex , i am trying to learn connection between PHP and Flex. When searched i got a excellent tutorial . But the problem is that it uses PostgreSQL. As i don't have any prior experience in PostgreSQL i try to install it in my Windows 7 and configure it in WAMP . I got different errors and spend almost two days in searching and using different methods . Atlast i got it right. I will try to figure out the steps i have done.
Am using
PostgreSQL 9.1WAMP Server 2.0e phpPgAdmin 5.0.2 WAMP consists
1. Apache Version :2.2.17  2. PHP Version :5.3.5  3. MySQL Version :5.5.8 First install PostgreSQL , no need to install additional plugins like phpPgAdmin.
Install WAMP server where ever you need.
Download PhpPgAdmin  and unzip it to WWW folder in WAMP installation.

At this point if you try to access the http://localhost/phpPgAdmin/ you may get this error.

Your PHP installation does not support PostgreSQL. You need to recompile PHP using the --with-pgs…

Angular - 4 year road map

AngularJS is one of the most popular JavaScript frameworks in the web. The Google developed framework is considered as one of the easiest framework to kick start a project. Two way binding and the dependency injection is the highlight of this framework.
My journey with AngularJS started about 4 years ago. Then popular ver1.4 amazed me in its capabilities. Developer like me, coming from Actionscript and plain old JQuery , AngularJS is a good option to kick start a project. It give me the confidence in JavaScript world, and from then I have tried lot of framework and tools from JavaScript itself like requireJS, webpack, etc. I did projects in Angular from 1.4 to the current 2.0, and trying to upgrade to the latest 4. Angular has now become one of the fastest growing framework. The journey starts with 1.4
One of the stable and mostly uses version. Started working on this for small projects and it seems easy for development. Dependency injection and two way binding seems quite interesting. …

Angular 4 - Modules, components and routing

In the previous post we created a new Angular 4 project. Lets check the how to add modules, components and routing.

You could check out the code from here.
git checkout -b part2.0 origin/part2.0
We are going to use bootstrap styling . So lets add bootstrap in our aplication . We are going to use only styling not the components.

npm install bootstrap@3
We need to add the bootstrap stylesheet in tha .angular-cli.json.

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
Our first Module

Lets add a new module employee. Inside "src/app" run

ng generate module employee or
ng g m employee
Wait we are going to lazy load this module , so we need routing inside the module, right? So we are going to create the routing also.
ng g m employee --routing
Time for component

It will create new employee module with its own routing.lets add a component for listing the employee. So inside employee folder run

ng g c empl…