Create Angular project step by step

  Dear Readers, This tutorial covers :

  1. Preparation of environment
  2. Creation of First angular project
  3. Run the default generated angular project
  4. creation of best architecture of project
  5. call apis with Http
  6. Create services for http call, error handling etc.
  7. Registration and login with JWT toke
  8. decode token and get data from token                                       

I believe the good way to learn anything new is to do more practical instead of theory . So after a short description will go straight for practical.

Lets see what is angular and why to use : Angular is a JavaScript based application design development framework for creating SPA(single page applications). Its a framework means it provides us all the required elements which are needed to develop a SPA. To understand more details kindly follow the https://angular.io/docs .

Preparation of environment : In order to start angular development we need to install some software as below :

  1. Node.js: can be installed latest version from https://nodejs.org/en/

  2. npm pacakge :  run npm -v in a terminal window :


3. Install vs code :https://code.visualstudio.com/download download window version and install in your pc.

4. Angular cli: angular cli creates your angular project , generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment . to install it type below command and hit enter :

npm install -g @angular/cli , this command can be run through vs terminal also . that will see later .After running this command latest angular cli will be installed in your pc , so for any application you no need to install seperately. If you want to install specific version kindly run the command :

1
npm install -g @angular/cli@versionthatyouwant

So , here we have all the required software to start development.

Lets create our first default angular project using vs code:

  1. open vs code – go to terminal ->new terminal and type below command in your folder location : ng new angular-tutorial (angular-tutorial is my project name) and hit enter . In the below screen shot I have created my project in d drive .

Once I hit enter I can see below option to select , for routing I will enter yes and enter then it asks me to choose stylesheet ,you can choose css/scss . since I am going to use css so I will choose css and press enter.

You can see something like below screen while creating new project :

Once project created go to file->open folder ->browse your newly created project and click on select folder . your project will be opened in vs code workspace.

To run this project : go to terminal->new terminal->type ng serve

If you want to build first then type ng build then ng serve . ng serve will build then run the application. after building you will see below url to browse your app.

Here you are ready to browse your first default angular app . open google chrome /browser and type http://localhost:4200 and you will see your app is running.

Here we have completed our lesson to setup and create first default project . In next lesson we will learn how to change and customize pages .

Comments

Post a Comment

Popular posts from this blog

Create Reactive form in angular

Image
  In angular we can create two types of forms 1. Reactive form 2.template based form In Reactive form  : all the codes handle in type script , no need to use ngModel to get and set value in control. we define form and formcontrolname for each control , and through formControl we get and set value .reactive form code is neat and clean when we have more complex structure or validation we should use reactive form . Template driven  : data binding is done via ngModel ,generally we can use this approach for simple form ,in this approach code became messy and very difficult to manage . Also in this approach difficult to handle all validation ,need more coding. So , I like to go with Reactive form approach instead of Template based. In our tutorial all forms will be reactive , but we can use both approach if required. I am going to create employee form which will have below fields : Employee Id ,Employee Name, email Id,Mobile Number,Password etc.. our final output will be as below : Employee
Read more

Angular Project structure and default component

Image
In my  previous   blog we learnt how to setup angular project and run default app which created by angular cli. In this blog we will learn how to set up own home page and routing. Before this lets have a look on project structure : above project structure is being created by default when we create angular app . There are many folders and files but since we are in very begining stage so we will focus only  src  folder. When you expand the  src  folder you will see below folder and files : Lets expand src->app folder and understand this : in app folder we have : 1. app-routing.module.ts : it handles routing for app ,for now we need to have little knowledge of this module ,later we will learn in details. In angular we create components like *.component.html -for our template file and *.component.ts for our typescript file. Since our focus is more on practical so I am not going in details about these. If you want you can follow the angular site. So when we need to add any template file(
Read more