Angular Tutorial - 3 - Hello World App

alright guys in this video let's create and run a hello world angular application for this series I have created a new folder called angular and we will mainly be working within this folder so let's create a very first angular application and for that we make use of the angular CLI and Visual Studio code has an integrated terminal from where you can run your commands so go to view and click on integrated terminal and over here make sure you're inside the angular folder to create a new angular project run the command ng new followed by the project name which in our case is going to be hello world so hello - world the command takes a few minutes to run but once it completes you must have a HelloWorld folder created now back in the terminal run the command CD hello world to navigate inside the project folder and then run the command ng serve to run your application once we get the message compiled successfully from web pack you can go back to your browser and open the URL localhost colon 4200 and you can see some HTML from the angular application being displayed so your very first angular application up and running by executing just a couple of commands this is the power of angular CLI but of course it is important to understand how exactly the control flows when you run an angular application and from where all this HTML is being displayed so let me go over on a high-level angular's architecture and explain the flow of execution of any basic angular application now the first building block is a module angular apps are modular in nature so an angular application is just a collection of many individual modules every module represents a feature area in your application for example we can have a user's module that is related to the application users and an admin module that is related to the application administrators but at the end of the day an angular module is just lines of code that can be imported or exported keep in mind though every angular application has at least one module which is the root module and by convention this is called as the app module now each module is in turn made up of components and services the component controls a portion of the view on the browser for example we can have a component for navigation one for sidebar and one for the main content but again your angular application will have at least one component which would be the root component of your application and this is again called the app component by convention all other components will be nested inside this root component each component will have an HTML template to represent the view in the browser and a class that controls the logic of that particular view module will also have services which is basically a class that contains the business logic of your application in addition to components and services a module can contain a few more pieces of your angular application but for now components and services will be something we will be focusing a lot in the series so to summarize this architecture angular apps contain one or more modules each module contains one or more components and services each component contains an HTML template and a class to control the logic for that particular view module can also have services which contains the business logic of your application the modules export and import code as and when required and finally render the view in the browser alright with this understanding let's take a look at some of the files in our project folder and how the execution flows in Visual Studio code we have the hello world project folder and there are a lot of files so I'm gonna go over only a few of them that are really important at this stage the first one is the package.json file now this file contains the dependencies and the dev dependencies which are nothing but the libraries or modules there that are required for your angular application to work the packages listed here get installed when you run the command in gnew hello world and all the packages get installed inside the node modules folder we also have some of the scripts that can be executed the ng self command is one of them which runs our application you can also execute npm start which will internally call the ng serve command alright next we have the source folder which is what we will be concerned with most of the time in this series in this source folder we have the main dot ES file which is the entry point to our angular application we also have the app folder which contains the file AB dot module dutyies which is the root module of our application and also AB dot component dirtiest which is the root component of our application when we run the command in G serve to start our application the execution comes to the main dot TS file over here we bootstrap or kickstart the app module in our app module you can see that we in turn bootstrap or again kickstart the app component if this app component has two things the HTML template and the class to control the view logic so we have the HTML template over here and the typescript file which contains the class that contains the logic or the data for the view in the class we have a property title is equal to a string app and inner HTML we have welcome to title but at runtime this title gets replaced by this property app and then we also have some other HTML that get rendered in the browser so we have welcome to and then app which is nothing but the property in the class that gets bound to the HTML template so we have welcome to app and the rest of the HTML elements now back in an app component class which contains the property title if I change app to code evolution save this and head over to the browser you can see that the browser automatically refreshed and the message welcome to code evolution is now displayed well that is the basic functioning of a hello world angular application when you run the command ng serve it starts with main dot es goes to app module and then goes to app component the data property title gets rendered in the HTML which is what you will see in the browser now as I mentioned in the architecture components represent different portions of view in the browser and they make up for a major portion of your angular application so for the next couple of videos let's take a more detailed look at components

Channel: Codevolution

Views: 792,382

Rating: 4.8565531 out of 5

Keywords: Angular, Angular Tutorial for Beginners, Angular 5, Angular 5 Tutorial, Angular 5 Tutorial for Beginers, Angular 6, Angular 6 Tutorial

Id: mDoHtD1hI3I

Length: 7min 53sec (473 seconds)

Published: Mon Nov 20 2017