Angular Tutorial - 3 - Hello World App

📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - [e-mail]
Angular | Angular Tutorial for Beginners

[@Codevolution]

For ng serve not working, 1) Are you inside the project folder? Did you run the cd projectFolder command? 2) Try running ng serve -o. The application will automatically open int he browser. If you are still facing issue, please comment what is the error you are seeing.

[@priyanth123mohan]

Error: Could not find module "@angular-devkit/build-angular" from "E:\\Angular\\hello-world".

[@deepakha1750]

@@priyanth123mohan Even I faced that issue. Since, the application was not compiled, the error was thrown.

[@Arvindkumar-tx3rb]

@@priyanth123mohan i got this resolved by running it on visual studio..i tried this on atom initially and it gave me the same error message.

[@harshithareddyp6843]

I am also getting error could not find module.. not even resolve after working through visual Studio code.. can someone help

[@TekTuition]

npm install --save @angular-devkit/build-angular command in CLI

[@jacksonlazarus6776]

Thanks Codevolution 🙏 Learners quick seek 00:30 First application 01:55 Architecture 04:36 Flow explanation 07:18 Flow summary

[@kevinhuml6662]

Your teaching style is perfect. Ive been reading books purchased online and they wander all over the place. You present information is very digestible blocks, and stay on point, and even your tenor is calming. Thank you for an excellent series!

[@qataracgnacgn]

Clearest exposition I've seen yet.

[@tanmoyduttachowdhury2410]

Angular app contains one or more modules like, admin module, user module Each modules contain one or more components and services Each component contains a HTML template and a class to control the logic for the particular view Modules can also have services which contains the business logic of our application Modules export and import as and when required to finally render the view in the browser.

[@akibjaviddahya3954]

Its Really Helpful Brother I am Creating Angular Project First Time and with your help i am able to create in 1st Trial. Thank you so Much Brother.

[@grovestreet9165]

nobody will provide you this top-notch lecture anywhere

[@SalakotPhilippines]

Thank you Codevolution for these tutorial chuncked into different series. Thank you very much.

[@isharaperera419]

A Crystal Clear Explanation!

[@swadhyayashikshan9990]

very very systematic explanation. Once we find that our first app is executing smoothly we find moving ahead with the technology. Thanks for the well explained video

[@pabloa4016]

This is what I had to do because I got an error stating ng is not recognized. Right Clicked on My Computer (windows) Selected Advanced System Settings Clicked "Environment Variables" Made the FIRST variable listed "%AppData% pm" Once that is done, close your program and open it back up and try again. This was on google. The basic point, find "Environment Variables." Create FIRST variable listed as "%AppData% pm"

[@barbi111]

Your explaing is very understandable and very useful. You explain everything what is needed. Great job!!

[@webdevelopment7439]

🙏 You are too Good At Teaching. Thanks for the tutorials.

[@balakiswe]

best angular course available on WEB.. Thanks a lot

[@sudhansu1628]

Verywell explained stuff in a simpler way. Keep it up. Thanks.

[@shardulrane6110]

When I am creating the first app it is asking me multiple options like: ? Would you like to add Angular routing? No ? Which stylesheet format would you like to use? CSS

[@farhankayani5324]

SAME Problem...bro kesy solve kiya?

[@souleater5388]

bro wt option to select?

[@Scienceandfunfanclub]

Yaah same problem

[@prathimadarsi3220]

Would you like to add Angular routing? should be yes Which stylesheet format would you like to use? CSS Tada! It works.

[@Lmao-ke9lq]

@@prathimadarsi3220 why css and not scss?

[@MrJoaoguedes123]

You're looking for a good angular tutorial. * Steps in this one * * The Guy *: Indian You: * Eyes glittering * : "This is the one"

[@jimc8121]

Angular routing? yN? (I chose N) And I was queried for a stylesheet selection. I chose the default CSS. I will move ahead, but making a note I din't see the 'successful' message. My create ended with: 'git' is not recognized as an internal or external command, operable program or batch file. 'ng serve' produced a couple of things: 1) I do see a "localhost:4200" listening message (good) 2) and a window opened: "Windows defender firewall has blocked some of the features of this app". I will choose cancel over allow access. url is successful, page is displayed Codevolution: I truly am a beginner, I hope those comments help identify beginner concerns. I hope these comments have value. This lesson has been encouraging. ok - if 'ng serve' starts the server, how do I stop the server? ok - i closed visual studio which seems to have killed the angular app. Probably not the correct way.

[@tanvirahmed1676]

type ctrl+c at same cmd. It will ask you if you want to close the server. y for yes and n for no.

[@ahme585]

give that man a medal

[@yucehasankilic8618]

Recommendations when you write local.... 1:17

[@nodetester8682]

I am getting option to create angular routing and also to add css what shall i do?

[@sudhirrao3683]

Good content. very good presentation. for beginners/dummies this video helps a lot

[@JohnWick-zc5li]

Thanks man. Great work

[@vamankumarpatel2652]

sir one request to you sir you had done teaching but plz make a website including normal sign up n sign in and home page....so the WE Come to know how to code. i have understand but I am not able to implement to make a website. plz teach that's also.

[@samsuddinasliwala845]

Very good explaination👍

[@gogilavanivasanthakumar7283]

hi sir, your way of teaching is very nice. i am new to angular. when i try to apply css styles for particular component its not working but its look perfect when i applied in normal html file.

[@everysecond6872]

very well explained

[@priyasuryawanshi1143]

Could not find module ...on ng serve ... Please tell us what is the issue

[@rohansharma4971]

So i just realized that when i run the command ng new it install a file which has a size of 276 MB .. wtf .. am I doing something wrong? i have npm-v 6.4.1 and node -v 8.11.2 and in ng -v, angular cli v6.0.3

[@Skaxarrat]

Nothing is wrong, you're just installing all the modules Angular has in case you need them. After you create your Angular App, you use the 'build' command, only packaging the modules you use, hence having a lightweight application.

[@ravitiwary6894]

It's saying the term 'ng' is not recognized as the name of a cmdlet

[@subhashgn1775]

Thank you. Great explaination.

[@sayakbanerjee9990]

if you can not create hello-world, change your powershell execution policy and set it to Bypass

[@lalitakadganche2249]

can you update videos about how to connect with database and do curd operations

[@ziberbee5460]

i love your videos, well explained. subscribed.

[@godfirst5667]

I know HTML and CSS but I don't know JavaScript can I still proceed?

[@jayashreenair3875]

Thanks for the well - explained tutorial. I would like to know ...how do you get an 'integrated terminal' in Sublime text?i tried 'glue'...however on the site it says 'No longer under active development.' ..so should i still install and use it? appreciate any help!

[@maitreyakanitkar8742]

i dont get angular in my visual studio code

[@aliansari5606]

C:\Users\ansari>ng serve -o The serve command requires to be run in an Angular project, but a project definition could not be found. iam facing this issue

[@sivablaze8680]

Thank you very much. its very helpful for me

[@Gauravkumar-jm4ve]

excellent tutorial

[@yasirtahirkheli74]

Great explanation....simple and elegant......but installing cli takes ages......and by the way...does it install the same amount of data every time we initiate a new project?.....in my case...for "hello world" project took about 280MB space....too much...in my opinion...

[@Dv-pd2ek]

You should use commas instead of ...

[@ahmedlight7669]

Is there an arrangement for Angular 17 Course soon?

[@jpzamarioli]

Great work, dude.

[@gomathirr2062]

Thank you so much Sir!!!

[@lalitakadganche2249]

nice but can you add videos related to database ,how to connect with database in angular 2 and curd operations

[@manikantakotha5362]

i was installed what you said but how can i get angular - visual studio code window. please help out

[@tejashripaithankar2842]

Why the browser get automatically refresh without pressing F5 and updaets the title from app to Codevolution?

[@sakshimishra3970]

Getting error ng is not recognised as an internal or external command

[@Lmao-ke9lq]

my app.component.html file schema looks really differently then yours... i have whole css stacked here and no tags...it is HTML file.....but schema....really different. Even my starting page looks really different (and much better) then yours....probably just updated version of angular....but that css in html file is really weird.

[@ravikishore794]

you mentioned that every angular application is atleast one module which is AppModule. If my application has 3 modules, do i need to create 3 seperate modules or do we need to define them in root module - AppModule? pls clarify

[@riyazullahkhan2469]

When i create a new project using the cli command ng "new myApp" i am getting this in the terminal " Would you like to add Angular routing? (y/N)" What should i do

[@frederickrichard1718]

say yes, and i think it might download something

[@frederickrichard1718]

thats what happened to me

[@farhankayani5324]

SAME Problem...bro kesy solve kiya?

[@mahsangareddikar3830]

y

[@tiparess17]

Is nested module possible I mean can a module contain a module?

[@fadiinaqaba]

Thank you, you are the best.

[@harishbabu1920]

even though I have installed Angular Cli in the node I can't able to get the option integrated terminal in VS

[@AhamedKabeer-wn1jb]

Thank you so much bro....

[@aishwaryanarkar2954]

loved it thankyou

[@its_mekarthik3225]

hello sir i am installed cli but how to do in visual studio can u help plz

[@khadijaaitbouiramouin7776]

You are the best, Thanks

[@error-forgaming2403]

Thanks

[@MuhammadAhmed053]

Please make a video on angular animations.Thanks

[@MohamadMeerasa]

Directory is already under version control. Skipping initialization of git. Nothing to be done. I am getting this only can someone help me ? please

[@simrangupta3805]

PS E:\Angular> ng new hello-world ng : The term 'ng' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + ng new hello-world + ~~ + CategoryInfo : ObjectNo tFound: (ng:String) [], CommandNot FoundException + FullyQualifiedErrorId : CommandN otFoundException getting this error

[@hussamcheema]

did you install angular cli?

[@deepatamizhselvan223]

@enigma How we know that we installed Angular cli

[@sameernand3413]

Can we use semantic UI here.. While building Angular app?

[@anubhavanand2432]

The term 'ng' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + ng new hello

[@nagarajufarmerstips9532]

I have problem about my node js installation please help me

[@kevalshah3024]

It takes me around 10 min to install required folders every time, is there any other better way.....please help

[@Arun-rk4tc]

Error: Cannot find module '@angular-devkit/core' ( while creating new file in angular folder)

[@Isha_Sethi]

import it

[@ArunKumar-sg6jf]

angular awking full bundel libarry is installed it asks yes or no

[@chintan3100]

Not working on IE. Can you please share repo with IE support

[@umairali2360]

please my terminal move in right side by mistake and i want to come back my terminal in bottom/below of code, please tell

[@issaissifou3579]

Thank you

[@JDJD-ev5mu]

superb

[@sivabhavanivalisetti4664]

The Schematic work flow failed error we got

[@CodeRevolutionTV]

Very nice video, congrats! Go Angular, go WordPress!

[@dexkode5558]

npm ERR! Unexpected end of JSON input while parsing near '...jAr5WNvpZQtUGfdEY4Td6' npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Dexter\AppData\Roaming pm-cache\_logs\2019-10-10T00_05_17_777Z-debug.log Package install failed, see above.

[@atulyadav2969]

Nice Video

[@itranjan]

Name of the Video is Angular 8,but you are teaching angular 4?

[@sanaththarun655]

How did you create the folder angular in visual studio code I am unable to create a folder and ng is not at all working.please help me

[@meriemkaroun7626]

Create the folder in the folder explorer wherever you want. Then, click on File. Then, click open and select the created folder.

[@ShortCutStorys]

localhost:4200 not working (web page can't reachable)

[@muhammadadisetiawan7015]

wait until compile succes

[@mohammedrahamatali5298]

Hello I'm getting error while executing "ng new FirstApp", the error is (unexpected end of JSON input while parsing near '... "}}},"modified":"20'). Please tell me how to solve this error.

[@DexterousGirl]

I am facing error plz help me

[@adityajain3803]

Recieving error 'git' is not recognized as an internal or external command'.

[@syedafsahulhaque2394]

You need to install git.

[@shivanshrawat2688]

Can you please send the slides link

[@PradeepKumar-sx6ms]

Hi vishwas i am not able find template project which you shown in angular2 series in your github account

[@Codevolution]

Please don't use template from Angular 2 repo. Use Angular CLI to generate a new project

[@reemal-qahtani5400]

hey when I try to create a new folder it says not found did you create the app before hand

[@isuriarachchige5659]

Reem Al-Qahtani yes

[@umermughal3914]

hello Sir,..I've phase the difficulties in creating project in vs code...kindly tell me what should i do ?? tysm....

[@farhankayani5324]

PROJECT BANA T ?

[@umermughal3914]

@@farhankayani5324 project create hota hain lkn kuch npm, nvm k eerors aaa jaty hain..

[@brianlaudrupchannel]

Is that bootstrap css bootstrap?

[@yatinsharma5637]

Package install failed aa raha hai bhai kya kru

[@fajarahmad5880]

my project is being made tho i'm following this video

[@impossiblehousemarylandsta6266]

Honestly till 4:24 I did not get anything from the video, it does not make sense for me without demonstration

[@harshavardhinisridhar6747]

is this angular7?

[@14Stars]

How should i disable my running scripts please help

[@kholoudaldeyarbi5161]

(search for powershell in the main menu and select Run as administrator from the context menu) and entering: set-executionpolicy remotesigned it will work

[@ravishmughal5828]

what if you have an existing project how would you open it in visual studio and run it on local host 4200 ?

[@meriemkaroun7626]

cd projectPath npm install npm start

[@NishantKumar-dw5er]

Awesome.

[@divyanshbahuguna6324]

ng serve works in VS code terminal but it is not working in normal cmd.

[@ra5898]

Yu can check the project path before before running Ng serve then it work only , otherwise not

[@user-zc7id5in1n]

hello, can you send me the slides please?

[@RahulKumar-vj9dg]

Is this Angular 7?

[@ashwanisekhar2496]

from where can we get the slides ppt file

[@jonstory5337]

wheres the source code, I cant find it 😭😭😭😭😭😭😭😭😭😭😭😭😭😭

[@SofianMW]

thanks!