Angular Flashcards
What is Angular?
What is an Angular ‘workspace’?
Angular is a JavaScript (or client-side) framework, i.e. a toolkit, that helps you to build a web application. It is ‘opinionated’, meaning they have their own philosophy of how the web app should be built and how the code should be organized.
It was built with the Model-View-Controller concept in mind, though authors of the framework often called it “Model-View-*” or even “Model-View-Whatever”.
It’s written in pure JavaScript,and is intended to decouple an application’s logic from DOM manipulation, and aimed at dynamic page updates. Still, it isn’t very intrusive: you could have only a part of the page controlled by Angular.
You develop apps in the context of an Angular workspace. A workspace contains the files for one or more projects. A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests.
What is Typescript?
TypeScript does for JS what sass does for CSS. They are super sets of it, which means that every JS code you write is valid TypeScript code. Plus you can use the other goodies that it adds to the language, and the transpiled code will be valid js. You can even set the JS version that you want your resulting code on.
Currently TypeScript is a super set of ES2015, so might be a good choice to start learning the new js features and transpile to the needed standard for your project.
What does the following command do?
ng serve –open
The ‘ng serve’ part of the command builds the app, starts the development server, watches the source files, and rebuilds the app as you make changes to those files.
The –open flag opens a browser to http://localhost:4200/.
Explain what the following is?
application shell
components
The page you see (i.e. website rendered) is the application shell. The shell is controlled by an Angular component named AppComponent.
Components in Angular display the DATA. Components are the fundamental building blocks of Angular applications, i.e. like the pieces in a lego block. They display data on the screen, listen for user input, and take action based on that input.
You then use the double curly braces of interpolation to display that data in the view (html).
An Angular component will be distributed over 3 files; a .ts file, an .html file, and a .css file. Explain each.
app. component.ts— the component class code, written in TypeScript.
app. component.html— the component template, written in HTML.
app. component.css— the component’s private CSS styles.
Explain the concepts of ‘databinding’ and ‘directives’.
Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.
At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell Angular’s HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.
What are the double curly braces used for?
<h1>{{title}}</h1>
The double curly braces are Angular’s interpolation binding syntax. This interpolation binding example presents the component’s “title” property value inside the HTML header tag.
In Angular project, explain what these are:
Module Component Services Pipes Injectables
Simplest Explanation:
Module is like a big container containing one or many small containers called Component, Service, Pipe
A Component contains :
- HTML template or HTML code
- Code(TypeScript)
- Service: It is a reusable code that is shared by the Components so that rewriting of code is not required. Service is a broad category encompassing any value, function, or feature that an app needs. A service is typically a class with a narrow, well-defined purpose.
- Pipe: pipes are a good way to format strings, currency amounts, dates and other display data. Angular ships with several built-in pipes and you can create your own.
***
Think of a module as being a place to wire up a number of other things, such as directives, services, constants etc. Modules can be injected into other modules giving you a high level of reuse.
When writing an angular app, you would have a top-level module which is your application code (without templates). Angular needs to know how the pieces of your application fit together and what other files and libraries the app requires. This information is called metadata. The top-level AppModule class does this, sticks it all together so to speak.
Some of the metadata is in the @Component decorators that you added to your component classes. Other critical metadata is in @NgModule decorators.
The most important @NgModule decorator annotates the top-level AppModule class.
Components control views (html). They also communicate with other components and services to bring functionality to your app.
Modules consist of one or more components. They do not control any html. Your modules declare which components can be used by components belonging to other modules, which classes will be injected by the dependency injector and which component gets bootstrapped. Modules allow you to manage your components to bring modularity to your app.
***
Component is the template(view) + a class (Typescript code) containing some logic for the view + metadata(to tell angular about from where to get data it needs to display the template).
Modules basically group the related components, services together so that you can have chunks of functionality which can then run independently. For example, an app can have modules for features, for grouping components for a particular feature of your app, such as a dashboard, which you can simply grab and use inside another application.
***
down vote
accepted
Component
It is basically a class with a decorator @Component which tells angular that the class is a component.
They are always associated with an HTML template and some CSS.
When a part of html gets repeated with a similar functionality it is always best to put it into a component. This component can be called where ever the same functionality is required.
Services
They are cenral units for some common functions across the application.
They are simple classes with functions and members.
Used when - Duplication of code exists, Access/store data.
No decorator exists for Services unlike @Component and @Directive. @Injectable is used only when one service needs to be used by a component, directive or another service.
We uses @Injectable for services. Services are used for common methods for some common functions across the different Component.
When you create a new component, it is always annotated with @Component, which contains 3 metadata properties. Explain each:
selector
templateUrl
styleUrls
You always import the Component symbol from the Angular core library and annotate the component class with @Component.
@Component is a decorator function that specifies the Angular metadata for the component.
The CLI generated three metadata properties:
1) selector— the component’s CSS element selector
2) templateUrl— the location of the component’s template file.
3) styleUrls— the location of the component’s private CSS styles.
Best practice: why should you always export the component class?
Always export the component class so you can import it elsewhere … like in the AppModule.
[(ngModel)] is Angular’s two-way data binding syntax. Explain what that means in the context of the below code.
<div>
name:
</div>
Here it binds the hero.name property to the HTML textbox so that data can flow in both directions: from the hero.name property to the textbox, and from the textbox back to the hero.name.
Explain the following in a module:
Imports
Exports
Declarations
Providers
Components are declared, Modules are imported, and Services are provided.
Imports: is used to import supporting modules likes FormsModule, RouterModule, CommonModule, or any other custom-made feature module.
Exports: makes the components, directives, and pipes available in modules that add this module to imports.
Declarations: is used to declare components, directives, pipes that belongs to the current module. Everything inside declarations knows each other.
Providers: is used to inject the services required by components, directives, pipes in our module. A provider is something that can create or deliver a service.
Explain what *ngFor is and how it works here:
<li>
</li>
The *ngFor is Angular’s repeater directive. It repeats the host element for each element in a list.
In this example
<li> is the host element
heroes is the list from the HeroesComponent class.
hero holds the current hero object for each iteration through the list.</li>
What does a click event binding do? Example below.
<li>
</li>
This is an example of Angular’s event binding syntax.
The parentheses around click tell Angular to listen for the <li> element’s click event. When the user clicks in the </li><li>, Angular executes the onSelect(hero) expression.
onSelect() is a HeroesComponent method that you’re about to write. Angular calls it with the hero object displayed in the clicked </li><li>, the same hero defined previously in the *ngFor expression.</li>
In Angular, what is a ‘decorator’?
In angular you create classes for everything, be it components, services, directives, etc. They are normally prefixed with an ‘@’.
Attaching a decorator (a.k.a. metadata) tells Angular how to process a class. In a simple terms, decorators allows you to attach meta data with the given type script class to tell Angular whether that class is a component or directive or module or etc.
There are four main types:
1) Class decorators, e.g. @Component and @NgModule . These are the top-level decorators that we use to express intent for classes. They allow us to tell Angular that a particular class is a component, or module, for example. And the decorator allows us to define this intent without having to actually put any code inside the class.
2) Property decorators for properties inside classes, e.g. @Input and @Output
3) Method decorators for methods inside classes, e.g. @HostListener
4) Parameter decorators for parameters inside class constructors, e.g. @Inject
