Week 8 Angular Study Guide Flashcards
What is a framework?
A framework is a platform for developing software applications. It provides a foundation on which software developers can build programs for a specific platform. A framework may also include code libraries, a compiler, and other programs used in the software development process.
What is Angular?
It is an open-source TypScript-based frontend framework developed by Google (in 2010).
It uses a component structure that represents a view on a webpage
We use Angular to create SPA’s (Single Page Applications)
- SPA’s allow for faster and more responsive web pages and a better user-experience
What makes and Angular app?
TypeScript framework developed and maintained by Google.
Reusbale code through the inclusion of modules Dynamics views through the usage of components and templates DOM manipulation is handled through Directives Single-page applications are created through the use of Routing Handle Dependency Injection through the use of Services
What is TypeScript?
it is open-source and invented & maintained by Microsoft
it is a super-set of JS it is strictly typed Browsers themselves cannot interpret TS, so it must be transpiled into JS. It has syntax closer to higher level languages like Java, and a compiler, therfore it gives us compilation errors.
What is Node JS?
It is a JS interpreter/server environment that allows us to run JS outside of the browser.
What is NPM? What does it stand for?
NPM = Node Package Manager
It is included in the download of Node.js and consists of a CLI (Command Line Interface) that interacts with a remote registry
Similar to maven, it can manage dependencies and versions
- This is done through the package.json file (which acts like the pom.xml).
What is Angular CLI?
Angular CLI (Command Line Interface) is the CLI that is used to scaffold and build the Angular Project using module.
What is the Angular command for the CLI?
ng is the Angular command for the CLI
How do you install Angular?
to install Angualar, we call npm install -g @angular/cli
What is Webpack? What does it do?
The angular CLI uses a tool called webpack which is a build automation tool.
it minifies all of our JS scripts, HTML and CSS files and bundles them together
The webpack traverses our application looking for import statements and builds a dependency graph
What can you compare package.json to? Where is it stored? What is it for?
Think of the pom.xml file within your Angular project
The package.json file is stored in the root of your application This file is used to give information to npm (node package manager) and identify all the project's dependencies and handle them.
What are Angular components?
Components are the most basic block of an Angular app. An Angular App contains a tree of Angular Components
What is the full structure of a component?
mycmp.component.css – the component’s private styling sheet
mycmp.component.html -- HTML Template mycmp.component.ts -- Here we define the module, its properties, lifehooks, etc. mycmp.component.spec.ts -- unit testing file
How do you create a component?
To create a component run: ng g c mycomponent
Where are changes added to after creating a component? What method is created?
As soon as we create a component, all changes are added to our app.module.ts file
As soon as the component is created, ngOnInit method is created
- this method is called by default when the class is executed.
It also has a constructor
the app component is the Parent component and any new components that we create and the Child components
What is Data-Binding?
Data binding is a technique to link your data to your view layer.
By binding a variable, you are telling the framework (in this case, Angular) to watch it for changes.
- If changes are detected, the framework will update the view.
What are the types of Data-Binding?
One-Way Binding
Two-Way Data Binding
Explain One-Way Binding.
One-way binding will bind the data from the component to the view (DOM) or from the view to the component.
This is unidirectional (we change one thing)
For example: Interpolation -> Interpolation refers to binding expressiong into marked up language (we turned the property of the app component into HTML text (as the title like so {{title}})
Interpolation allows you to incorporate properties and embed them into an HTML file with {{}};
What is Class Binding?
Class binding is used to set a class property of a view element. It is a type of One-Way Binding.
Explain Two-Way Binding.
2-way data binding in Angular will help users to exchange data from the component to view, and from view to component (bidirectional)
2-way databinding is a combo of Property Binding and Event Binding 2-way binding can be achieved with the [(ngModel)] directive...think banana in a box!
What are Directives?
Directives change the appearence behavior or layout of the DOM (Document Object Model)
What do Structural Directive do?
These change the DOM layout by adding/removing DOM elements
ngFor and ngIf
What do Attribute Directives do?
These change the appearence or behavior of a particular element, component, or another directive.
We typically build these ourselves
Example:
The @Input directive is an example of and Attribute Directive.
Decorator that marks a class field as an input property and supplies configuration metadata. The input property is bound to a DOM property in the template
What are two types of @Decorators? What do they do?
The @Component decorator tells Angular that we want a class to be treated as a component
- It provides the metadata for how this particular Component Class should be processed, used, and instantiated.
The @NgModule decorator takes a metadata object that describes how to compile a component’s template and how to create an injector at runtime.
- An NgModule is a class marked by the @NgModule decorator.
