Part 5: Install Angular Cli & Create Project, Component & Set Routing

Aug 15, 2023

Part 5: Install Angular Cli & Create Project, Component & Set Routing

Install Angular Cli \u0026 Create Project, Component \u0026 Set Routing

How to install angular cli and create an angular 5 project from scratch.

How to generate component from the terminal and set routing for your single page application

Previous Tutorial:    • Part 4: Create Register \u0026 Login API a…
Next Tutorial:    • Part 6: Add Angular Material to Angul…

Mean Stack Playlist: https://goo.gl/XzZwXy

Source Code: https://goo.gl/7vGTHL

Written Tutorial: https://goo.gl/rNZ1Ew

How to Create Your First MEAN Stack App From Scratch
   • Part 1: How to Create Your First MEAN…

Create Register \u0026 Login API and Use bcryprjs for Password Encryption
   • Part 4: Create Register \u0026 Login API a…

How to Install MongoDB and Connect to Node Server
   • Part 3: How to Install MongoDB and Co…

Content

0.1 -> Hello Everyone, today I will show you how to install angular cli and create an angular 5 project from scratch.

8.82 -> Also show you how to generate component from terminal and set routing for your single page application

15.54 -> First of all, you need to install node.

18.54 -> So go to browser and download node for windows(your OS) from www.nodejs.org.

25.96 -> Also, download visual studio code as the code editor, you can use others, it totally depends on you.

33.88 -> After finish, your download installs both.

37.66 -> If it already installs on your machine.

40.48 -> Please confirm that you are running at least node version 6.9.x(>6.9) and npm version 3.x.x(>3).

49.2 -> To check your node and npm version. Type following command on terminal

52.46 -> 'node -v'

54.5 -> 'npm -v'

56.12 -> If your node or npm version is lower than the requirement, Please update it.

61.86 -> Then install angular cli globally on your machine by the following command.

67.12 -> 'npm install -g @angular/cli'

71.25 -> It will take some time to completed.

74.2 -> After successfully completed angular cli installation.

78.32 -> If get any error please uninstall it by 'npm uninstall -g @angular/cli'.

85.22 -> Then clean cache by 'npm cache clear'.

88.78 -> Then try again.

90.54 -> It does not clear cache successfully. Please restart your machine and try again.

96.4 -> Now Open the terminal and go to the location where you want to create your project.

102 -> For my case I am in the desktop folder.

105.36 -> After that run command 'ng new client' (project name) to create a project.

111.16 -> You can also add cli command to use sass for style.

115.2 -> And add routing which helps you to provide routing for your app.

119.34 -> For this, you need to add '--style=sass --routing' at the end

127.02 -> Please check angular cli command for more options.

132.32 -> After successfully create your project.

135.17 -> Now go inside your project folder.

138.31 -> To run your project type 'ng serve'

142.38 -> Copy the url and paste to the browser and hit enter.

148.4 -> Your project setup is done.

151 -> To open your project on visual studio code type ‘code .’ and press enter key.

157.56 -> Now check some of the project file.

160.7 -> Package.json contains your project information like author, version, project description etc.

168.76 -> It contains all of your npm packages list. Which install by default when you create your project.

176.06 -> It also contains development dependence packages.

180.16 -> Let’s check app.module.ts file that is your project entry point.

186.32 -> Here all of your components, services, module etc should import. We will see that later.

195.4 -> See the app here, which comes from app.component.html file as title.

202.64 -> Let’s change the title.

206.34 -> Also change the view from app.component.html file.

212.92 -> Here only keep the title and remove all others.

217.6 -> Run your project if you stop that already.

221.82 -> Go to browser and refresh it. See it changed already.

226.48 -> Let’s see how to generate component.

229.32 -> For this, I open a new terminal and go inside the project folder.

234.48 -> To generate new component, you need to type 'ng g c login'.

239.5 -> Here g stands for generate & c for component(login is component name).

244.1 -> By default, it will be generated inside a folder login which is situated inside app folder.

250.76 -> And inside this folder necessary files will be created also.

255.6 -> When you generate a component, it will be automatically imported to your app.module.ts file.

264.14 -> Also, generate two more component register and home to use routing.

271.12 -> Now add some routes for app.

274.12 -> Open your app-routing.module.ts file. Go inside the router array.

280.22 -> Add some routes here.

282.2 -> path for define the name after your app base url.

290.72 -> And component is one which will do necessary works for the view of that page.

296.12 -> Like create view, call service to get data from the server.

302.36 -> Here I add 3 routes for home, register and login.

310.06 -> Your component view will be imported at 'router-outlet' section of app.component.html.

317.38 -> Now go to the browser and check routes.

320.6 -> See on home page, here text comes from home component.

329.34 -> Same for register and login.

337.22 -> Currently I check that those routing by typing on browser.

342.54 -> In my next tutorial, I will show you how to add nav bar and button of angular material design.

350.18 -> Also show you how to add login and register form.

353.76 -> If you need the source code for this tutorial check description section.

358.92 -> Please subscribe my channel for latest videos.

362.76 -> Feel free to give your valuable feedback in comment section and share my video if you like.

369.16 -> Enough for today, see you soon.

Source: https://www.youtube.com/watch?v=moLJ3qNeWmY