Angular Topics

Angular topics:
In order to learn angular the first thing we need to learn is node so without node we can't even
install angular . Because the angular installation is so Complex so that we need a framework to
do that .
Node JS is a JavaScript runtime built on chromes V8 javascript engine. We can run the
JavaScript only inside the browser right. If we can run the javascript outside the browser ,then
we can create the desktop applications,web applications etc.
If we want to run JavaScript outside the browser then you have to take away the V8 javascript
engine . A package manager is a software application which is used to find the software
package and get the metadata of the software package, install it in your local system,manage
the software package in your local system and uninstall if we want it. Using the npm commands
we are going to get the angular. First install the angular cli then create a new application .
when we do ng serve it makes compiling and bundling .we have
to create the angular cli globally.
In memory inside the RAM it is taking the whole application and compiling and then hosting this
application in localhost 4200.
Typescript is a typed superset of javaScript that compiles to plain JavaScript. Linting Is the
process of running a program that will analyse code for potential errors. Angular is a binding
framework Which binds the view(html) and model (ts).
Actually component helps in binding the view and the model.
The group of components will together called as the module.
If we export in the component.ts then we can import the component in module.ts and also in
declarations.
So now angular needs to know that from all of these modules which one is the starter module.
So that is decided by the main.ts file. Then in the main dot TS file we are going to import the
app module and then say to the platformbrowserdynamic to bootstrap the app module .The
main.ts file will decide which will be the starter module. So now someone has to go and invoke
this main.TS file right. That is done by index.html Now the index.HTML starts then the end-user
loads this index.html. The index . HTML calls the main.ts.The main.ts then calls appmodule by
using platform browser dynamic then app module then goes and loads the appcomponent by
using Bootstrap . Then the app component goes and loads your HTML because in the template
URL the html name is specified after that the bindings will start working .
Once the HTML page is loaded once the app component is loaded then app- root is a selector
in that section inside which app component HTML will run. polyfills are nothing but they are the
open source frameworks which helps in running the newer ES version JavaScripts in old
browser. Polyfills ensures nice compatibility browser.
All TS file has to complied into jS files and then we have to bundle all those jS files in bundle.js
to dist folder
In general all these things is done by web pack package management. whenever we are
doing ng build or ng serve all these compiling and building process everything is done by
webpack. So internally angularcli does that.
Angular runs on a component tree model. A component in angular is used to render a portion of
HTML and provide functionality to that portion it does this through a component class in which
we can define the application logic for the component.
An angular provides an easy syntax known as the template syntax to wire up to dom events
within your template. So you can wire up the click event on a button to the on deleteclick
method. You can even use the components within components you can build out your angular
apps by having components rendering components within their templates.each component gets
configured with a selector which tells angular what markup element tag to associate the
component class logic with.when you build a component in angular you are creating support for
a new custom element for the dom.
Dependency injection:
At the heart of Angular, and one of its most

powerful features as a framework, is how it
brings dependency injection to JavaScript.
Dependency injection, or DI for short, is the
concept of inversion of control, or loc for short,
where you architect code in a way that you
provide modules with other modules it needs to
get some work done, instead of having your
modules go out and get other modules on their
own. Di allows you to write decoupled code that
is easier to unit test and to work with. In the
Angular world, this allows you to write these modular components, and even services within
your applications, and simply tell Angular what
you want to use and where you want to use
them. Angular will handle constructing instances
of those and sending them to your code where
needed. The most common place you use Dl is
in your class constructors. So constructors for
components directives, pipes, and services you
write can leverage the way Angular does Di. You
can simply declare types on your constructor
parameters with some help from TypeScript and
Angular will interpret that and make sure you
receive an instance of that type when your
constructors run. You can also leverage DI through things like component metadata,
properties, for directives and providers. You can
even do some Dl at the bootstrap phase of an
Angular app, setting up your dependency graph
when your app starts up, and getting that
delivered through all aspects of your app. And
one of the powers of Dl is the ability to replace a
dependency at any phase of application code.
Angular has support for this, so you can even do
things like set up a dependency for a service at
bootstrap, and then replace that dependency
with a different version of it for a specific
component. There's a ton of power you can get
out of Angulars dependency injection
framework.

Angular Topics

Uploaded by

Angular Topics

Uploaded by

Angular topics:

At the heart of Angular, and one of its most

You might also like