Angular

Angular

Angular installation and basics
  • Angular is a software framework (framework) designed for creating the client side of web applications.
  • Angular was developed by Google and was first released in 2010.
  • The first version of Angular was called AngularJS and was significantly different from what Angular is today.
  • Angular CLI is a CLI tool used to set up a development environment for building Angular applications.
  • Angular CLI is installed as a global npm package using the command npm install -g @ angular/cli .
  • After installation, the Angular CLI is available within the console or terminal, using the name ng .
  • ng is short for Angular .
  • The command to create a new Angular workspace with the default project is ng new my-first-app , where my-first-app refers to the name of the project.
  • Angular applications are developed in the context of workspaces that can be made up of one or more projects.
  • The Angular application can be run on the development server using the ng serve -open command .
  • The build of the Angular project is initiated using the ng build -prod command .
TypeScript from Angular’s point of view
  • TypeScript was created by the Microsoft company in 2012, to allow the creation of presentation logic for web applications, using languages ​​with a set of functions richer than those offered by the JavaScript language at that time.
  • .ts  is an extension used to store TypeScript language code.
  • Web browsers cannot understand program code written in the TypeScript language.
  • Before a web browser can execute the code, TypeScript must be compiled into JavaScript, using tools called transcompilers.
  • A tool that compiles TypeScript code into JavaScript is called a TypeScript compiler, or  tsc for short .
  • The TypeScript compiler can be installed as a global npm package using the npm install -g typescript command .
  • TypeScript is a strongly typed language that allows type checking during the compilation process.
  • The type of a variable is defined in TypeScript by its name, separated from it by a colon character.
  • Build configuration options can be defined using the tsconfig.json file , which must be placed in the root folder of the TypeScript project.
  • TypeScript allows declaring a variable without defining its type by using the any keyword .
  • The absence of a type in TypeScript can be defined by the void keyword .
  • The void keyword is most commonly used when defining functions that do not have a return value.
  • The never type is used to indicate the return value of functions that will never complete successfully.
  • Tuple is a type that allows you to create strings with a predetermined length and types that can be found within it.
  • TypeScript introduces the enum type, which are actually constants that can be accessed using plain text identifiers.
  • In TypeScript, it is possible to define a variable that can have one of several predefined types, by separating the types using the | character.
  • TypeScript allows you to define optional parameters, that is, parameters whose values ​​do not need to be defined, by using the ? character after the parameter name.
  • Using the access modifiers public , private , and protected , you can influence the availability of class members outside the boundaries of classes and objects created based on such classes.
  • Interfaces are defined in TypeScript using the interface keyword .
  • The implementation of the class interface is done using the implements keyword .
  • Decorators allow declarations of classes, functions, and properties to be decorated using special tags that ultimately transform or modify the element on which they are defined.
  • To group code, TypeScript uses ES6 modules and namespaces.
  • Namespaces are specific to TypeScript and allow code to be grouped into JavaScript objects, as opposed to the file-level grouping provided by modules.
  • Namespaces are created in TypeScript using the namespace keyword .
Angular modules and components
  • Each Angular application is based on the structure of certain predefined terms, which have a special meaning within the Angular ecosystem.
  • Angular applications are made up of modules, from a special type of modules that is illustratively called NgModules.
  • NgModules serve as containers for the elements that make up an Angular application or part of it.
  • Angular modules are not the same as ES6 modules; both types of modules are used during the development of Angular applications and complement each other.
  • Every Angular application has at least one NgModule which is called the root Angular module.
  • Angular modules are defined using regular classes, which are decorated with a special @NgModule() decorator .
  • Angular is a software framework consisting of a multitude of Angular modules that provide a set of built-in functionalities; they are called Angular libraries.
  • Angular components define a part of the user environment of the Angular application, that is, a part of the display that the user sees in the web browser.
  • Angular components are defined as ordinary classes, which are decorated using a special @Component() decorator , to which an object with metadata is passed to configure the component.
  • The presentation of a component is defined using templates.
  • The new component using Angular CLI can be created by executing the command ng generate component name , where name refers to the name of the component.
Angular templates and directives
  • Angular templates are built using clean HTML.
  • Angular does not allow defining a script element within a template.
  • Data binding is a term used in programming to denote an approach that allows the automatic propagation of data exchange between different layers of an application.
  • The simplest way to list data in an Angular template is to use interpolation, which is characterized by the use of two pairs of braces – {{} } .
  • Property Binding ensures you bind to the properties of DOM objects.
  • To bind to an attribute that does not have a corresponding DOM property, the attr prefix must be placed in the square brackets that define the binding.
  • Square brackets are used to link to the HTML attribute of type class , within which the class prefix is ​​specified .
  • To influence the style value of an HTML attribute, Angular defines the style prefix , which is used in square brackets.
  • Event listening in the Angular component template can be done using the DOM event name, which is enclosed in a pair of single (round) brackets.
  • Angular has a large number of built-in directives that can be used to perform various interventions on the template.
  • The NgClass directive is used to set classes on DOM elements.
  • The NgStyle directive is used to define linear styling on DOM elements.
  • The NgModel directive is used to achieve bidirectional binding.
  • A prerequisite for using the NgModel directive is the inclusion of FormsModule in the current project.
  • In the @angular/forms module you can find the functionalities necessary for the NgModel directive to work .
  • The NgModel directive is enclosed in two pairs of parentheses – [()]; the outer brackets are straight, and the inner ones are simple, i.e. round, which is why this syntax is very often called banana in a box .
  • The structural directives in Angular are NgIf , NgFor , and NgSwitch .
  • The NgIf directive allows you to conditionally create or destroy elements from an Angular component template.
  • The NgFor directive allows you to generate a presentation using a loop, that is, repeating some logic multiple times.
  • The NgSwitch directive allows the conditional generation of elements, using the conditional switch construction syntax .

Leave a Reply

Your email address will not be published. Required fields are marked *