Angular Domain Specific Language (DSL) Syntax Quiz

Introduction to Angular

• Angular is a TypeScript-based open-source front-end platform for building web, mobile, and desktop applications.
• It offers declarative templates, dependency injection, and end-to-end tooling for easy application development.

Angular Application Structure

• An Angular application is divided into separate modules to separate the functionality.
• NgModule is a logical boundary in the application, and the application is divided into separate modules.
• The NgModule decorator has five important options.

Components and Templates

• A template is an HTML view that displays data by binding controls to properties of an Angular component.
• Templates can be defined inline or in a separate HTML file.
• The @Component decorator is used to link to a separate HTML file.

Lifecycle of Angular Application

• The Angular application goes through a lifecycle, which includes initialization and destruction.
• The lifecycle methods are used to perform initialization and cleanup tasks.
• The constructor is a default method of the class that is executed when the class is instantiated.
• ngOnInit is a lifecycle hook that is called by Angular to indicate that Angular is done creating the component.

Dependency Injection

• Angular uses a dependency injector to resolve dependencies between components.
• The dependency injector is used to provide services to components.
• A service is a class that provides a common functionality to various components.
• Services allow for greater separation of concerns and better modularity.

Data Binding

• Two-way data binding allows data to flow both ways, from the component to the template and from the template to the component.
• The [(ngModel)] syntax is used for two-way data binding.
• Event binding is used to bind events to component methods.
• Property binding is used to bind properties to component properties.
• Interpolation is used to add the value of a property to the template.

Pipes

• Pipes are simple functions that use template expressions to accept data as input and transform it into a desired output.
• Pipes can be chained together to perform complex transformations.
• Pipes can accept optional parameters to fine-tune their output.

HTTP and Observables

• The HttpClient is used to make HTTP requests to the server.
• The HttpClient returns an Observable of typed HttpResponse.
• Observables are used to handle asynchronous data.
• Observables can be subscribed to receive notifications.
• The RxJS library is used to work with Observables.

Angular Elements

• Angular Elements are a feature of Angular that allows you to use Angular components as custom elements.
• The Angular Elements are packaged as custom elements.
• The browser support of Angular Elements is the same as custom elements support.

Routing

• The Angular Router is used to navigate between routes.
• The RouterOutlet is a directive that marks the spot in the template where the router should display the components.
• The RouterLink is a directive that gives the router control over anchor tags.
• The RouterLinkActive is a directive that toggles CSS classes for active RouterLink bindings.
• The RouterState is a tree of activated routes.
• The ActivatedRoute contains information about a route associated with a component.
• The RouterModule is used to configure the router with routes.

Compilation

• Ahead-of-Time (AOT) is a type of compilation that compiles your app at build time.
• AOT is the default starting in Angular 9.### Angular Compilation
• Angular compilation depends on the aot property in the build configuration specified in angular.json.
• By default, aot is set to true.
• AOT (Ahead-of-Time) compilation benefits:
  • Faster rendering
  • Smaller bundles
  • Better performance

AOT Compiler

• The AOT compiler supports macros in the form of functions or static methods that return an expression in a single return statement.
• Macros can be used inside metadata as an expression.
• The compiler treats the macro expression as if it was written directly.
• Example of a macro function:
  • let macroFunction = () => { return 'some value'; }

Errors in Metadata

• Errors encountered in metadata:
  • Unable to refer to selector references because they are not exported.
  • Unable to fold some expressions, such as spread operators on arrays, objects created using new keywords, and function calls.
• The compiler can only resolve references to exported symbols in the metadata.

Angular Compiler Options

• Angular compiler options are specified as members of the angularCompilerOptions object in the tsconfig.json file.
• These options are specified adjacent to TypeScript compiler options.
• Example: fullTemplateTypeCheck compiler option to enable binding expression validation.

Dependencies

• The dependencies section of package.json in an Angular application can be divided into:
  • Dependencies
  • DevDependencies
  • PeerDependencies
• Installing Angular Language Service in a project using the npm command: npm install @angular/language-service

Navigation

• Navigation features in Angular:
  • Hovering over a component, directive, or module and clicking F12 to go directly to its definition.
  • Error checking and warnings for mistakes in code.
  • Autocompletion for contextual possibilities and hints as you type.

Web Workers

• Adding web workers to an Angular project:
  • Using the ng generate web-worker command to create a web worker file.
  • Refactoring initial scaffolding web worker code for sending messages to and from.
• Important things to remember when using Web Workers in Angular projects:
  • Web workers run in a separate context from the main thread.
  • Web workers communicate with the main thread using messages.

App Shell

• App shell is a way to render a portion of an application via a route at build time.
• Benefits of using app shell:
  • Faster rendering of the initial page load.
  • The browser can render static HTML and CSS without the need to initialize JavaScript.
• Achieving app shell using Angular CLI, which generates an app shell for running server-side of the app.

Case Types

• Angular follows capitalization conventions to distinguish the names of various types:
  • PascalCase (UpperCamelCase)
  • camelCase (lowerCamelCase)
  • UPPERCASE
  • lowercase
  • kebab-case (lower-kebab-case)

Decorators

• Class decorators:
  • Immediately before a class definition.
  • Declares the class to be of a given type.
  • Provides metadata suitable to the type.
• Class field decorators:
  • Immediately before a field in a class definition.
  • Defines the type of that field.
• Examples: @Input and @Output

DI Tokens

• DI token is a lookup token associated with a dependency provider in the dependency injection system.
• The injector maintains an internal token-provider map that it references when asked for a dependency.
• Example of DI token usage:
  • Providing a token for a service:
    • let token = new InjectionToken('myServiceToken');
    • @Inject(token) private myService: MyService

DSL

• Angular has its own Domain Specific Language (DSL) which allows writing Angular-specific HTML-like syntax on top of normal HTML.
• The DSL is defined in NgModules such as animations, forms, and routing and navigation.
• Angular DSL has its own compiler that compiles this syntax to HTML that the browser can understand.

Subjects

• RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers.
• Subjects maintain a registry of many listeners.
• While plain Observables are unicast, Subjects are multicast.

Bazel

• Bazel is a tool for building and testing software.
• Key advantages of using Bazel:
  • Faster builds
  • Better performance
  • Improved scalability
• Running Bazel directly using the Bazel CLI:
  • Installing the Bazel CLI globally using the @bazel/bazel npm package.
  • Using common commands such as bazel build, bazel run, and bazel test.

Platforms

• A platform is the context in which an Angular application runs.
• The most common platform for Angular applications is a web browser.
• Angular can be used as a platform-independent framework in different environments, such as:
  • Mobile devices
  • Web servers
  • Desktop applications

View Child

• Using the @ViewChild directive to access elements in the view directly.
• Example: accessing an input element with a reference:
  • ``
  • @ViewChild('myInput') myInput: ElementRef

Router

• Subscribing to the router to detect changes:
  • this.router.events.subscribe(event => { ... });

Http Interceptors

• Http Interceptors are part of @angular/common/http.
• They inspect and transform HTTP requests from the application to the server and vice versa.
• Interceptors can perform a variety of implicit tasks, such as authentication and logging.
• Example of an Http Interceptor interface:
  • intercept(request: HttpRequest, next: HttpHandler): Observable>
• Using interceptors by declaring a service class that implements the intercept() method of the HttpInterceptor interface.

Test your knowledge on the syntax of Angular's Domain Specific Language (DSL) used for writing Angular-specific html-like syntax. Learn about how Angular's injector maintains an internal token-provider map and references it when asked for a dependency.