Angular - 1 - Introduction
Angular is a framework that is
used to build client-side applications. It is especially great for building
single page applications where parts of the view get refreshed asynchronously
without having to reload the entire page... Angular is also a product from the
Google team and makes use of typescript language from Microsoft, so it is safe
to angular is here to stay. you should learn angular with all the version
changes happening and if this series will still hold good as the versions
change I 've seen comments like I did not even get too angular 4 yet and there’s
already angular 5 and I 'm pretty sure that this is a concern with a lot of us
so let me clear things out in any framework. There is always room for improvement.
Google team has decided they will upgrade Angular twice a year and stick to
semantic versioning.
Angular - 2 - Getting Started
This series is not a tutorial on the new features in
Angular 5. Learning about the changes will hardly take your day. My intention
with this series is to have it like a crash course for a complete beginner, so
a person new to Angular itself and not necessarily the latest version will find
it useful. So this series will cover all the main concepts in angular and not
just the changes from a particular version. make sure you add angular Cli to
the path environment variable. have angular Cli installed so to check my
current version of Angular Cli i can run the command Ng V. i will be using
visual studio code, but feel free to use any editor that you are comfortable
with.
Angular - 3 - Hello World App
Visual studio code has
an integrated terminal from where you can run your commands, so 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. an
angular application is just a collection of many individual modules. Every
module represents a feature area in your application.. angular apps contain one
or more modules. Each module contains components and services. modules export
and import code as and when required and finally render the view in the
browser.. modules can also have services which contains the business logic of
your application. The modules export or import code when required.. modules are
the entry point to our angular application. When you run the command Ng serve
it starts with main dot Es going to app module and then goes to app component
the data. Property title gets rendered in the Html.. components represent
different portions of view in the browser and make up for a major portion of
your angular application.. for the next couple of videos let 's take a more
detailed look at components.
Angular - 4 - Components
A component is made up of three parts: the first one is a
template, which represents the view and a class, which is nothing but code that
supports the view. The metadata is defined using a decorator, which is a
feature in typescript. This is the information that Angular needs to decide if
the particular class is in fact an angular component or just a regular class.
Four new files were created and also there was an update to the app module so
let's take a look and see what happens in the folder itself. In the app folder,
a new folder called test was created specifically for this component within
this folder the type grid file, the html and the css were created. A spec file
for testing was also created but we don't really need this so we deleted it.
The test component is app tests so let's go back to ab dot component html,
which represents the view for app component. If we save this and head over to
the browser, you can see that our application still works fine; test works is
still displayed on the browser. We have successfully added a new component to
our angular application.
Angular applications are made up of components, which
contain a class, decorator, and template. The component class contains data
that can be displayed in the view, and it is possible to nest components within
other components and reuse them when required. The next thing we can change is
the style URLs property which points to the CSS files but just like the HTML
you can have the CSS inline.
Angular - 5 - Interpolation
In this video, we'll be learning about interpolation. I've
created a new project called binding and within the project, I have generated a
new component called test component. I've also simplified the HTML in the app
component so this displays just from the app component in an h1 tag and in the
test component, I have moved the template inline so it's in the same typescript
file and the template just displays welcome bishwas. Angular evaluates the
expression and displays the result in the browser so if you go back to the
browser you can see four which is two plus two similarly you can perform a
string concatenation as well. Apart from the built-in JavaScript methods you
can also call methods define in the component class. The syntax is double curly
braces and within the braces, you have a property or an expression so you can
evaluate any JavaScript expression and the result will be displayed in the
browser. You can also perform string concatenation you can use JavaScript
properties and methods as well you can even call methods that you have defined
in the components class within interpolation.
Angular - 6 - Property Binding
In Angular property binding is going to seem like we binding
to the html attribute while we are actually binding to dom property. Attributes
and properties are not the same; attributes are defined by HTML but properties
are defined by the Document Object Model. Attributes can not change once they
are initialized, but property values can change. A problem with boolean
attributes such as disabled when you add the disabled attribute its presence
alone initializes the inputs disabled property to true, so the input is
disabled. Setting the value to false has no effect. The solution here is to use
property binding, so instead of using double curly braces which does not work,
we are going to enclose disabled within square brackets and then assign it
either true or false. You can control the property based on user interactions
or some other data. is an alternate syntax for property binding, so instead of
using the square brackets you can use bind. is an alternative syntax. So if we
take a look at the browser both inputs are enabled, well that is about property
binding in Angular.
Angular - 7 - Class Binding
Angular provides us with the ng class directive which
allows us to dynamically add or remove classes to html elements based on
certain user interactions or state of our application. We can change the
classes being applied by changing the properties in our component class.
Angular - 8 - Style Binding
Now that we have the
basic syntax down, let's look at an example. I'm going to add a new h2 element
and let the text be style binding to the color css property. Here is the
syntax: style binding 3 { color: blue; font-style: italic; }
Angular - 9 - Event Binding
To respond to user events, such as most clicks or keyboard
events, we need the data flow in the other direction as well. That is from the
template to the class so to capture events, we make use of event binding. The
data flow was from the component class to the component template and the view
gets updated as well. Event binding even binding lets us capture any DOM event
and perform some action all right. By using dollar event you can get access to
all the properties of the DOM event all right. Finally, sometimes when you work
with event binding a separate event handler may not be necessary for instance
in our example right now the method body is very small so you can have this as
a template statement right in the HTML itself.
Angular - 10 - Template Reference Variables
Angular provides us with template reference variables to
easily access dom elements and their properties. The syntax is pretty simple in
the opening tag of the element you want a reference to so the input element add
a hash symbol followed by the variable name. The reference variable can be used
to refer to an html element and all of its dom properties, including attributes
and children. This makes it easy to access the element's value or to modify it.
Angular Forms - 11 - Form validation
Angular automatically attaches the ng form directive to
the form tag. g form provides the overall form validation and this can be used
to disable the submit button of the form until the form is valid. The submit
button gets disabled when the userform is invalid or the topic field has an
error
Angular - 12 - ngIf Directive
Structural directives
are directives that let you add or remove html elements from the DOM. The three
common built-in structural directives, namely ngif, ngswitch, and ngfor, are
used to conditionally render html elements. Angular checks if there is an else
statement in our case, and if so, it checks which html element needs to be
rendered. The else block is a reference to this block of html. The ng template
tag is basically a container for other elements that the ngif directive can use
to properly add or remove locks of html from the DOM. If we go back to the
browser and change the display name to "true", we can see that the
code evolution is now displayed well.
Angular Forms - 13 - Express Server to Receive Form Data
In this video, we will see how to set up a basic express
server that can receive form data. I'm going to create a new folder called
"server" which contains the server code here. We create a constant
for the port number that our express server will run on, which is equal to
3000. We also specify body parsing to handle form data, and the
"course" package to make requests across ports. When our form is
submitted, we don't get any indication that the data is in fact submitted. When
I save this, Go back to the terminal in VS Code and you can see that the user
object is being logged the data has been posted to the server from our Angular application.
Angular - 14 - ngFor Directive
The ng4 directive is
pretty much like the for loop in any programming language, the only difference
being that here we render HTML instead of executing some logic. Let’s
understand the usage with an example first. I’m going to create a new property
this is going to be public colors = an array of colors red, blue, green, and
yellow. ngif directive can also have odd and even indications so if I start
with <art> as oh and then bind o you can see that it says true for odd
items in the iteration so remember this is 0 1 2 3 so 1 & 3 are true which
are odd but 0 & 2 are false which are even.
Angular15 - Angular 6 New Features and Changes
Angular 6 has been officially released with no major
breaking changes. Angular 6 depends on RxJS version 6 which unfortunately has
breaking changes, but we can easily fix that. The Angular 6 release
synchronizes the major version number of the Angular framework and the Angular
CLI. The Angular CLI is now version 6.0 with this release, two really cool
commands have been added to the cli. The first command is the new command that
analyzes your package.json and uses its knowledge of Angular to recommend updates.
The second command is the ng add command - it is a way to seamlessly add new
capabilities to your application. The next addition is Angular Material started
templates with Angular. Angular Material will give us the ability to use
Angular components in other environments, such as React. IB IB is the next
generation rendering engine which aims to increase the speed and decrease the
application size. However, this was mentioned during the ng conference, but it
is not part of this particular release - it is being actively developed.
Angular 16 - Updating your app to angular
we'll
show you how to update an Angular 5 app to Angular 6. The Angular team has put
together a nice tool to help us with upgrading from one version to the other.
The first step is to make sure you're using Node 8 or later, so open Command
Prompt and run the command node v. This gives us the version of Node installed
in our system. I have version 8.9.1. All of the commands are present right here
to update English CLI, I prefer using their own GitHub repo page. I'm not going
to run these commands because I've already run them, but you make sure that you
have the latest version of Angular CLI installed and how do you verify the
version of CLI installed in your machine? Open Command Prompt and run the
command ng v. The third command is to run ng update at Angular
slash.slash.core. The command completed successfully and made a couple of
updates. The major change here is that Angular.dot.json has been created, this
Angular dot.json is the new config file moving forward in version 6.
The recommended approach
is to use the rxjs ts lint package and that is what you can see here in the
update guide as well. So remove the features deprecated features using
rxgstslinautoupdate tools and for most applications this will mean running the
following two commands. The final part of our application we have to remove.
The last step is once you and all your dependencies have updated to rx gs6
remove the rxjs compat package so over here npm and install rxjs compat. Now if
i open package dot json you can see that we do not have the compatible package
anymore it has been successfully removed from our application. Now I can run
the command ng serve. Oh our application works as expected but this time with
our xj6.
Angular - Angular 17 Features and Changes
Angular version 8 was released a couple of days ago. This
is a major release spanning across the framework itself, Angular Material, and
Angular Material. The new features include differential loading for performance
improvement and dynamic imports for lazy loading routes. The syntax which was
custom to Angular has now been migrated into the industry standard. Ivy is the
rendering engine that the Angular team is currently working on it handles
translating the templates and components into regular HTML and JavaScript that
the browser's can understand. Ivy has the potential to generate considerably
smaller bundles make incremental compilation easier and is also going to be the
basis for future innovations in Angular. Fingers crossed; it will soon be
stable. Angular dot io and follow the guide when updating your Angular
application with version 8. Let's talk about the series in this channel with
the Angular tutorial playlist. Every concept you learn still holds good, but
one section that needs your attention is services and http videos on services
and http were updated when the version changed from 5 to 6.