What is Angular?
The Complete Angular Course: Introduction
What is Angular
Setting up for Angular Web Development
Angular: Components
Event Handling
Interpolation
Understanding Inputs and Ouputs
Template Reference
Understanding Routing in Angular
Navigation - Navigate between routes
Attribute Directives in Angular
Angular ngClass Directive
ngIf Directive in Angular
ngSwitch Directive in Angular
ngFor Directive in Angular: Repeating HTML
Route Parameter - In Angular
Pipes in Angular
Loading and Using JavaScript in Angular
Hosting Your Angular Website
Dependency Injection
Project 1: Building a Social Media Site Part 1: Setup
Project 1: Building a Social Media Site Part 2: Home Page
Project 1: Building a Social Media Site Part 3: Authenticator
Project 1: Building a Social Media Site Part 4: Login System Part 1
Angular Project 1: Building a Social Media Site Part 5: Login System Part 2
Angular Project 1: Building a Social Media Site Part 6: User Profiles with Cloud Firestore Database
Angular Project 1: Building a Social Media Site Part 7: Create Post Component
Angular Project 1: Building a Social Media Site Part 8: Uploading Posts
Angular Project 1: Building a Social Media Site Part 9: Displaying Posts
Angular Project 1: Building a Social Media Site Part 10: Reply Component
Angular Project 1: Building a Social Media Site Part 11: Leaving Comments
BehaviorSubject
What is Angular
Learn what is Angular and how it is structured.
Angular is a front-end framework based on the concepts of components. It takes the old way of how we used to build websites and enhances it by adding new features and advantages to building single-page applications.
Why Angular?
Consider this example:
We have a simple app to view user information and the post he has made. There is a user profile section that displays their photo, name, and bio. Underneath the profile section, is a list of posts that the user has posted.
Our code may look something like this:
<div id=”profile”>
<img src=”” />
<div id=”user-info”>
<h1>John Doe</h1>
<p>Handsome young man and loves to play poker.</p>
</div>
</div>
<div id=”posts”>
<h3>Posts</h3>
<div class=”post-item”>
<p>6/5/2020 8:09 a.m. </p>
<p>...</p>
</div>
<div class=”post-item”>
<p>6/3/2020 8:43 a.m. </p>
<p>...</p>
</div>
</div>
There is a lot of code. And even worst, if we want to display more posts or add more information about the user, we will have to add more code or even repeat some of the existing code to make that happen. It gets harder and harder to maintain.
It would be nice if we could separate our code and bring it into our DOM whenever we need to use it
We can do that with Angular. One major feature that Angular utilizes is the approach to break our application into tiny small parts call components. This helps developers, like you and I, separate our code into modules that we can easily maintain and reuse.
Lets take a look at the same example when we apply Angular. Our code may look something like this
<div id=”profile”>
<profile></profile>
</div>
<div id=”posts”>
<h3>Posts</h3>
<post-item></post-item>
<post-item></post-item>
</div>
We took the code from the profile and posts section and then separated them into 2 modules. Then, we included it in our application with a simple syntax.
There is a lot more you can do Angular. We will learn more of its features and advantages as we dive deeper into the course.
AngularJS vs Angular
The last thing I want to mention is the difference between Angular and AngularJS. Angular is developed by Google in 2010 and that is version 1. Ver sion 1 of Angular is called AngularJS and Angular is versions 2 and above.
What makes an application single-paged?
In the past, websites operated differently. It worked like this. There is a browser and a web server. When you enter the web address you want to go to on the browser, it will send a request to the web server and ask for a web page. Then, when the web server received the request, it will send a page back. This process is repeated every time you go to a different page on the site.
However, this can be slow. The approach for single-page applications is totally different. When you enter the website, your browser will download a JavaScript program and run it. This program will then handle all page routes and interactions of that site. It does not need to go to the web server and ask for a new page to load. This makes developing a single-page application more responsive and dynamic.
