Angular 9 Tutorial - 3 - How to start writing code | Angular basics скачать в хорошем качестве

Angular 9 Tutorial - 3 - How to start writing code | Angular basics

Music credits : https://www.bensound.com/ Github repo link for this video - https://github.com/outOfOfficeCode/An... Visual Studio Code official website - https://code.visualstudio.com/ Angular cli - https://cli.angular.io/ Angular official website - https://angular.io/ Check out other videos on our channel & Don’t forget to subscribe. Transcript Hi, in the previous video we completed the setup process and ran our first angular application. In this video we will try to make some changes to it. To make changes we need an IDE. We will be using Visual Studio code since it is free to use and on par with the paid IDEs but you are free to work on whatever IDE you are comfortable with. First we need to open the folder in the IDE which has our angular project. As you can see there are lot of files and it may seem intimidating but most of the files are for configuration work and you won't need to touch them. We will take a quick look at the package dot JSON file where we have all dependencies which include core dependencies of angular as well as third-party dependencies. Dev dependencies is used for those dependencies which are required when developing locally and not required when the application runs in production. We will find many examples for each category as we move ahead in this course. Let's start with editing our application. The e2e folder is for end-to-end testing we can ignore that for now. Node modules is where all dependencies we saw in the package.json are actually installed. The SRC folder is where we have some config files and the app folder. We will discuss in detail what each file in the app folder does as the course progresses. Let's start with the app component HTML file. the HTML written here looks similar to what we see when we run our application. Note, that you should have your server running using the ng serve command which we discussed in the previous video. If you want to stop the server you can use ctrl+C when in the terminal. We can also open a terminal inside visual studio code using ctrl + ~ (tilde) as shortcut. Visual Studio code has many shortcuts so make sure you google them out to speed up your development process once the server is started we can make changes to the code and save the server will automatically pick those changes and reflect them in the running application. As you can see we don't have edit have written in the HTML. This is because angular helps us to create dynamic content using variables and not just static content like HTML. Whatever logic we have is present in the .TS file and written in typescript which is converted to JavaScript after build. The complete app folder here is what we refer to as a component in angular which has different files solving different purposes, like the HTML file, the CSS and the typescript file. We'll discuss on this in the coming videos along with in-depth explanation of what each line in the app component TS file means. For now in layman's terms we can see that a variable 'title' holds the string that is actually shown in the HTML of our running application and we can prove this by making some changes here and checking if it gets reflected in our application on saving. The proper term for what we just did is data binding and we will discuss this in depth in the coming videos. If we see the page source we don't see the actual HTML rather we see something called app root along with some scripts at the bottom app root is something that appears in our component.ts file as well let's check out the index.html file. Here, as you can see, we don't have the script imports because those are injected dynamically which in turn helps angular render the HTML content present in the app root components HTML file. Also, we can have more than one component in angular, app root is just the starting point. if all this seems complex at this moment don't worry you are not alone. As the course progresses everything will become clearer Let us try using something a little more complex than just showing a text. The code present here uses the ng model directive about which we will discuss in the coming videos as well this basically binds whatever we type in the input field to the variable and using the curly braces we can display that in real-time in the HTML as well as you can see we get an error saying ng model isn't a known property whenever you get this kind of error with angular it means that whatever we want to use has not been found by angular. Next question is how does angular find files and other stuff ? The answer is modules. angular uses modules which works somewhat similar to packages in Java in the modules you have to provide two things. First, for typescript to know where the file path is we use the import keyword and specify what we need and from which path.....