Angular is a TypeScript development platform and framework that’s used to create single-page applications.
Angular has a complex history.
The developers used JavaScript to build the first version of this framework (AngularJS).
As of 2021, the latest version of Angular is 12.0.
In this article, youll learn all you should probably know about the Angularframework.
What Is Angular?
Angular is also a development platform.
This means that it has a hardware and software system, which runs Angular applications.
Like most frameworks, Angular is component-based.
Related:What Is ReactJS, and What Can It Be Used For?
One of the more important files within the main project folder is thepackage.jsonfile.
Your main project folder also contains two foldersnode_modulesandsrc.
Thesrcfolder is where youll do all of your development; it contains several files and folders.
Exploring the app.component.ts File
Theapp.component.tsfile uses theapp-rootselector, which is located in theindex.htmlfile above.
It uses theapp.component.htmlfile as a template and theapp.component.cssfile for style.
Each tool contains at least oneNgModule.Angulargenerates two modules from theng newcommand (app-routing.module.tsandapp.module.ts).
Theapp.module.tsfile contains the root module, which must be present for the software to run.
The@NgModuledecorator comes after the imports.
It indicates that theapp.module.tsfile is indeed aNgModule.
The@NgModuledecorator then configures several arrays: thedeclarations, theimports, theproviders, and thebootstrap.
Thedeclarationsarray stores the components, directives, and pipes that belong to a specificNgModule.
Theimportsarray imports the otherNgModulesthat youre using in the program.
Understanding Angular Components
Each Angular component is generated with four specific files.
Theapp.component.tsfile uses the JavaScript import statement to import Component from Angulars core.
Then the@Componentdecorator identifies the class as a component.
The@Componentdecorator contains an object comprised of aselector, atemplateUrl, and astyleUrlsarray.
The main app component file also links to the template file, using thetemplateUrlproperty.
This is theapp.component.htmlfile, which outlines how a specific component should be rendered in an Angular program.
The final property in the object is thestyleUrls.
Understanding Angular Templates
Theapp.component.htmlfile is an example of an Angular template.
This file is an HTML file as well as a component file (the app component).
Whats Next?
Understanding the DOM is your next best move.
Taking on the Angular platform and framework is undoubtedly challenging.
