Difference between revisions of "Angular"

From Grundy
Jump to navigation Jump to search
(Created page with "Coming up soon")
 
m (Added See also)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
Coming up soon
+
Before we jump right into learning “[https://en.wikipedia.org/wiki/Angular_(web_framework) 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.
 +
 
 +
==Why anything other than Javascript?==
 +
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.
 +
 
 +
Enter Javascript frameworks. Javascript frameworks are not exactly libraries, but they are entire application design setups which handles all of the library calling, all of the setting up of code, code separation, making the code more modular and everything else for you. Javascript frameworks are a category of Web Application frameworks, all of which serve the same purpose, it’s just that Javascript frameworks are written in JS. Some examples of Javascript frameworks are [https://en.wikipedia.org/wiki/AngularJS AngularJS], [https://en.wikipedia.org/wiki/Ember.js Ember.js], [https://en.wikipedia.org/wiki/Meteor_(web_framework) Meteor.js], and [https://en.wikipedia.org/wiki/Vue.js Vue.js].
 +
Angular (different from AngularJS) is also a web application framework developed by Google, but it is written in a language called TypeScript. Don’t worry, it is pretty similar in syntax to JavaScript. In the end it is indeed all the same, because the Typescript code is essentially transpiled (converted) to JS code before being served to the browser. (Of course, because your browser does not support TypeScript). Because in the end everything you write in Angular is converted to HTML+CSS+JS, you could theoretically do everything in vanilla HTML+CSS+JS, but why make things harder for yourself?
 +
 
 +
You can understand better what a framework is by reading through [https://hashnode.com/post/vanilla-javascript-vs-frameworks-and-libraries-finding-a-good-balance-civ1zfus90pphdc53q8vtakz5 this]
 +
 
 +
==Installation==
 +
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 <code>npm install</code>. 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 <code>ng new</code> command 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 <code>ng serve</code> command 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 <code>NgModule</code> (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
 +
 
 +
==What Next?==
 +
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.
 +
 
 +
==Conclusion==
 +
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!
 +
 
 +
==See also==
 +
 
 +
* [[Web Development]]
 +
* [[HTML]]
 +
* [[JavaScript_Basics|JavaScript]]
 +
* [[CSS]]
 +
* [[Django]]
 +
* [[Django_REST_Framework|Django REST API]]

Latest revision as of 03:06, 18 May 2020

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.

Why anything other than Javascript?

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.

Enter Javascript frameworks. Javascript frameworks are not exactly libraries, but they are entire application design setups which handles all of the library calling, all of the setting up of code, code separation, making the code more modular and everything else for you. Javascript frameworks are a category of Web Application frameworks, all of which serve the same purpose, it’s just that Javascript frameworks are written in JS. Some examples of Javascript frameworks are AngularJS, Ember.js, Meteor.js, and Vue.js. Angular (different from AngularJS) is also a web application framework developed by Google, but it is written in a language called TypeScript. Don’t worry, it is pretty similar in syntax to JavaScript. In the end it is indeed all the same, because the Typescript code is essentially transpiled (converted) to JS code before being served to the browser. (Of course, because your browser does not support TypeScript). Because in the end everything you write in Angular is converted to HTML+CSS+JS, you could theoretically do everything in vanilla HTML+CSS+JS, but why make things harder for yourself?

You can understand better what a framework is by reading through this

Installation

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 new command 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 serve command 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

What Next?

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.

Conclusion

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!

See also