Before we jump right into learning “Angular”, whatever that may be, we must first look into what is the need for learning such a thing, and what solution is it exactly trying to achieve.
The typical web development stack
By now you know how the web development stack works.
- You open a website on your browser which sends an HTTP request to a server where the website is hosted.
- The server then sends back the HTML+JS+CSS code which is downloaded to your computer
- Then the browser uses that code to display the website.
- As and when needed, the browser or more exactly, the front-end code running on your browser, sends an HTTP request to the server where the website is hosted.
- The request is processed by the back-end code in the server, which sends back data to your browser.
- The front-end code running on your browser then processes that data and displays it on your screen.
All good and fine, you can achieve all that with a server running some Django code and some good old HTML+JS+CSS. Why would you need anything else?
The same reason you need the standard library for C++ even though you can code up a vector class or a sorting algorithm yourself.
You can understand better what a framework is by reading through this
Now let us get into the installation and setting up of Angular in your computer: You can refer to the instructions given in this link: https://angular.io/guide/setup-local
Ultimately, you’ll need to do the following:
- Install npm. Why? npm is a package manager (nodejs package manager to be precise), and Angular depends on packages provided by npm to work.
- Install the Angular CLI package through npm using
npm install. Why? Because you need a command line interface to transpile your TypeScript to JS and also to serve your webpage (more on that later)
- Use the
ng newcommand to set up an Angular directory. Why? Because Angular manages the directory structure, the code separation, the filenames, really everything for you. You could do it manually yourself too, but why would you do that?
- Use the
ng servecommand to serve your webpage. Why? Remember, that in a real web application, your HTML+JS+CSS code is stored in some server where the website is hosted. Now you’re not gonna run off and buy server space for your first tutorial web application are you? Angular provides a way to set up your own little local server on your own PC. Whenever you visit the URL or the IP address of your website in any browser, the server will cough up the HTML+JS+CSS code for your browser to display. Note that you’ll need to start the server when you want to visit your website.
Your first Angular App
Now that your Angular directory and server is setup, we can move on to actually creating a web application for yourself. And what better way than to peruse the tutorial hosted on the official Angular site: https://angular.io/tutorial
Now before you jump right in, you need to understand how the Angular workflow architecture works. You can learn it in detail here: https://angular.io/guide/architecture
- Modules: Now the nice thing about Angular is that it is completely modular. And appropriately named, the basic building blocks of an Angular app is an
NgModule(remember, most Angular things have the suffix Ng. It’s after aNGular, it’s not a racist thing). Each module provides a set of closely related functionalities to the application. The application mandatorily has a root module which has the feature of starting the app and calling other modules (kinda like the main() function)
- Components. They basically are bound to a part of the screen (called a view), and use some services to get data displayed in that view. They may use functionalities provided by modules
- Services. They are kinda like functions, except that they are called whenever an event (like some data came in from the back-end) happens. They are called upon by the components
Now that you are somewhat familiar with the Angular architecture, you can start building your own web application: https://angular.io/tutorial
Now that you know the basics of Angular, the world is your oyster! You can explore various things and functionalities you can do with Angular, and here are a few things to get you started:
- Angular Material: Brings Material Design UI components to Angular. These can make your website pretty cool and have a more “Google” type of flat and modern design (understandable, since Angular is developed by Google): https://material.angular.io
- Back-end Integration: Integrate your Angular front-end with some back-end, like Django, using a an API called REST: https://bezkoder.com/django-angular-crud-rest-framework/
- API integration: You can even build your own API in Django for your Angular to interact with. You just need to keep in mind in what format the data is being passed from front-end to back-end (which ultimately is through HTTP requests)
- Animations: Include some sexy animations in your components: https://angular.io/guide/animations
- Deployment: Till now you have been building demo applications on your pretty little local server. What will you do when your boss at your first internship at a company starts asking you to "deploy your app to their production servers"? You gotta learn how to deploy your app: https://angular.io/guide/deployment
Personally I would recommend you to explore the things given in https://angular.io/docs, which is a pretty excellent guide in general.
I hope I could excite you enough so that you start exploring the vast and expanding world of web development on your own. These initial tutorials will enough for you to understand more advanced things that may follow. It of course goes without saying that your learning will go only as far as your curiosity and willingness to put in time and effort will take you. There are boundless number of resources and communities you can find on the internet to help you in this voyage. As I said, the World (Wide Web) is your oyster!