Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.

Normal Size Small Size show me how

Angular

Question	Answer
What is Angular?	Angular is a TypeScript-based open-source front-end web application platform.
Are Angular JS and Angular the same thing?	No. Angular JS (1) is based on JavaScript while Angular (2+) utilizes TypeScript, which is then transpiled to JavaScript. Angular JS is based on the MVC design pattern whereas Angular 2+ is based on a component structure.
What are some of the technologies you might include in your environment to create an Angular application?	NodeJS - A JavaScript runtime built on Chome's V8 JavaScript engine. NPM - Stands for Node Package Manager. It is the default package manager for NodeJS. Angular CLI - A command line interface used to scaffold and build angular applications.
What is the Angular CLI?	Angular CLI is the Command Line Interface. It allows you to scaffold and build angular apps using NodeJS style modules. It also handles many common tasks for you, such as generating directives, services, and components.
How would i create a new project using the Angular CLI?	ng new <project-name>
What is the folder structure of an Angular 4 application as created by the Angular CLI?	e2e - The end-to-end test forlder mainly used for integration testing. node_modules - Where NPM packages are installed. src - Contains all of the files for the actual Angular project itself.
What are some of the files you can find in the root directory of an Angular 4 application as created by the Angular CLI - .angular-cli.json	.angular-cli.json - Hold project name, version of CLI, etc.
root directory of an Angular 4 application as created by the Angular CLI - .gitignore	.gitignore - Should be committed into the repository, in order to share the ignore rules with any other users cloning the repository
root directory of an Angular 4 application as created by the Angular CLI - package.json	package.json - Tells which libraries will be installed into node_modules when you run npm install.
Where is the app folder located?	The app folder is located within the project's src folder. It contains the following files:
What files does it contain if the project is created by the Angular CLI?	app.component.css - Contains the CSS structure for the component. app.component.html. Contains the html template for the component.
What .ts files does it contain if the project is created by the Angular CLI?	app.module.ts - Contains references to different libraries used within the project app.component.ts - Contains the class for the component. Holds the logic to manage the functionality of the component.
What is a decorator?	A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. They are functions that called at declaration.
Decorators (2)	Decorators look a lot like annotations and are used to hold meta data in angular 2+.
What is a module?	In Angular, a module is a mechanism to group components, directives, pipes and services that are related, in such a way that can be combined with other modules to create an application
What is @NgModule?	Used to create a module. Configures the injector and the compiler and help organize related things together.
What are some of the attributes inside of the @NgModule decorator?	Declarations - Stores the references to components Imports - Stores the references to imported modules above Providers - Stores the references to the services created Bootstrap - Has the reference to the default component created (e.g. AppComponent);
What is bootstrapping?	the bootstrapped component is created and inserted into the browser DOM. we have to tell it which component is the starting point for our application.
What is a component?	Components are the fundamental building block of our applications. From Angular’s documentation, “A component controls a patch of the screen real estate that we could call a view, and declares reusable UI building blocks for our application.”
What is @Component?	The @Component decorator is added to the top of the component's class definition inside its component.ts file.
What are some of the attributes inside of the @Component decorator? selector	selector - CSS selector that identifies this component in a template. (eg selector: 'app-metahuman' or selector: '#app-metahuman' )
What are some of the attributes inside of the @Component decorator? templateUrl	templateUrl - URL to an external file containing a template for the view
What are some of the attributes inside of the @Component decorator? stylesUrls	stylesUrls - List of URLs to stylesheets to be applied to this component's view
How would you add a new component to your project using the Angular CLI?	1. Create the component.ts file 2. Add the @Component decorator to the top of the class. 3. Import the component into the app.module.ts file. 4. Add a reference to the imported component into the @NgModule declarations attribute
How would I include a component on another component's HTML template page?	You would use the component's selector inside of element tags (e.g. <app-comp></app-comp>)
What is a directive?	custom markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell Angular 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 some of the different kinds of directives provided by Angular? -component	Component directives - Directives with a template
What are some of the different kinds of directives provided by Angular? structural	Structural Directives - Change the DOM layout by adding and removing DOM elements. Examples include ngFor, ngIf, and ngSwitch & ngDefault
What are some of the different kinds of directives provided by Angular? attribute	Attribute Directive - Changes the appearance or behavior of an element, component, or another directive. An example would be ngStyle
How could we create an attribute directive?	If we use @Input() in front of a component class property then that property will now represent an attribute directive for its component directive.
What is *ngIf and how does it work?	*ngIf is an Angular-provided structural directive. It conditionally includes a template based on the value of an expression
What is *ngFor and how does it work?	*ngFor is an Angular-provided structural directive. It instantiates a template once per item from an iterable.
What is data binding?	Binding coordinates communications between the component’s class and its template. Often involves passing data. If the class' property changes the view in html also changes.
What are some different data binding options provided through Angular? interpolation	Interpolation - {{{ myProperty }} - is an easy way to acheive one way binding. Put class property between double curly braces. We can also evaluate expressions using interpolation {{ myProperty + myOtherProperty + 5 }}
What are some different data binding options provided through Angular? one-way	One-way data binding - is binding from the component property to the component template
What are some different data binding options provided through Angular? two-way	Two-way data binding - [(ngModel)] - is binding between the component property and the component template. The html can update the class property and vice versa.
What are some different data binding options provided through Angular? property	Property Binding - Binds an attribute directive to an element. The directive is wrapped by square brackets [attrDirective].
What is event binding?	Event binding is used by directives and components to define element behavior for a particular event. Use the event emitter (event) = "behavior" to bind event behavior to the element.
What are event emitters?	EventEmitter is a way to emit events from a child component to the parent component. Use @Output in front of a class property eventEmitter to be able to use the eventEmitter as a custom event for the class' element directive.
What is a pipe in Angular?	A way to write display-value transformations that you can declare in your HTML.
What are some pipes that come with Angular?	A pipe takes integers, strings, arrays, and dates as input to be converted in the format as required and display the same in the browser. the input and pipe are separated by a vertical bar and wrapped by the double curly braces {{ x \| pipe }}. Pipes tha
What does a pipe do?	A pipe takes integers, strings, arrays, and dates as input to be converted in the format as required and display the same in the browser. the input and pipe are separated by a vertical bar and wrapped by the double curly braces {{ x \| pipe }}.
Can we create custom pipes in Angular?	Yes. Using @Pipe() on a class. Also implementing PipeTransform. And to use the pipe you'll need to add it to a module.
What are filters in Angular?	Filtering is a way to select a subset from a group of items. It is a function attatched to an array and that function returns an array containing the subset.
What is a SPA?	Single-Page Application. This means that your web app has only a single html page and each "view" that the user sees is actually a fragment of code being added/removed.
What is routing?	Routing refers to how the application will navigate between pages.
Why does Angular implement its own routing module?	Angular implements its own routing module in order to allow for single-page web applications.
How to implement routing module? part 1 of 2	We first need to add the router to our module, then use the forRoot() function to define all the paths that the router will be able to handle.
How to implement routing module? part 2 of 2	The router will load the html fragment whereever it sees the <router-outlet> tag. You can use the [routerLink]="/path" attribute inside of html to tell the router to switch views.
What are Angular services?	Angular services provide the ability to inject certain functionality into one or more components. Requires @Injectable() decorator to let angular know that it can be injected "
What is an advantage of using services? 1 of 2	"It's a typescript object with reusable fields and methods that can be injected into components. Must be added to the providers of both the root module and the components that you want to use them in.
What is an advantage of using services? 2 of 2	Any class that is marked with @Component doesn't NEED the @Injectable() decorator because by default Angular already checks if components need any services.
What is Dependency Injection?	Dependency Injection (DI) is a subset of Inversion of Control (IOC). Specifically, DI gives up the process of managing dependencies to another entity.
Use of Dependency Injection in Angular?	In Angular, we give up the ability to create and manage services to Angular itself. Angular will inject dependencies through the constructor after we've put that service as a parameter in our constructor.
How would you add a new service to your project using the Angular CLI?	ng generate service <serviceName> ng g s <serviceName> ng g s <serviceName> --flat
How would you add a new service to your project without the Angular CLI?	1. Create the service.ts file inside of the src folder. 2. Import the service into the app.module.ts file. 3. Add the @Injectable decorator to the top of the class. 4. Add a reference to the imported service into the @NgModule providers attribute
How do you perform HTTP requests in Angular? 1 of 3	1. Import the HttpClient module and include it in the ngModule imports attribute.
How do you perform HTTP requests in Angular? 2 of 3	2. Inject an object of type HttpClient inside of the constructor of the class you want to make an HTTPRequest in.
How do you perform HTTP requests in Angular? 3 of 3	3. Use the HTTPClient property in your object and call one of the HTTPRequest functions included with HTTP client such as get() or post().
Does the HttpClient object create synchronized requests?	No, it uses AJAX requests.
What is a Promise?	A promise is a placeholder for a future value.
What is an Observable?	An observable provides support for passing messages between publishers and subscribers in an application.
How does an Observable work?	A function is defined for publishing values, but is not executed until a consumer subscribes to it. They receive notifications until the function completes or the subscriber unsubscribes.
What must you do in order to use Observables?	You must import the Observable from 'rxjs/observable' library
What is the difference between a Promise and an Observable.	Observables are declarative (they don't execute until subscription) while Promises execute upon creation. Observables are cancellable, while Promises are not. Observables return many values while a promise only returns one value.
What is the lifecycle of a component?	Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.
What are the lifecycle hooks for a component? 1 of 2	"ngOnChanges - called when an input binding value changes (in short, when the component's state changes) ngOnInit - after the first ngOnChanges ngDoCheck - after every run of change detection ngAfterContentInit - after component content initialized
What are the lifecycle hooks for a component? 2 of 2	ngAfterContentChecked - after every check of component content ngAfterViewInit - after component's view(s) are initialized ngAfterViewChecked - after every check of a component's view(s) ngOnDestroy - just before the component is destroyed"
What is the ngOnInit() function?	The ngOnInit() function gets called by default in any component created. It contains the logic to be executed upon the initialization of a component.
How would I check the version of Node on my computer? How about NPM?	node -v, npm -v.
What command would you use to install the Angular CLI using Node Package Manager locally? What about for global use?	npm install @angular/cli. Add -g for global usage.
How would I start a server using the Angular CLI?	ng serve
What is the name and default port of this server?	localhost:4200.
What interface does a component class implement and what method does it require the class implement?	Component classes extend the OnInit interface, which requires that you provide an implementation for the ngOnInit lifecycle hook.
How would you work with a form using the Template-Driven method? 1 of 3	1. Import the FormsModule from @angular/forms and add it to the imports attribute of @NgModule in app.module 2. Using the template-driven method, add the ngForm directive to the form.
How would you work with a form using the Template-Driven method? 2 of 3	3. You will then need to create the model form controls by adding the ngModel directive and the name attribute to each form input. 4. Bind an ngSubmit event listener to the form and set the value equal to the name of the function you want to execute.
How would you work with a form using the Template-Driven method? 3 of 3	5. inside of the component class, implement the function associated with ngSubmit().
What are the two different ways that you can work with forms in Angular?	1. Template-Driven - Most of the work is done in the component template 2. Model-Driven - Most of the work is done in the component class
What is linting?	"Linting is the process of checking the source code for programmatic and stylistic errors. It is useful in keeping code consistent as well as pointing out common mistakes that could potentially be problematic.
What is bundling?	Bundling is the process of rolling up a number of distinct resources together into a single downloadable resource. For example, a bundle may consist of multiple JavaScript or CSS files you bring down to the local machine by making a single HTTP request.
What is webpack?	Webpack is a module bundler, this is useful because our client side application has many files and many dependencies, webpack can be used to bundle these files together so that our server has to send less files.
What does TypeScript webpack do?	This is even more important in Angular 2, since we are working with TypeScript webpack can also transpile the files into es5 standard of JavaScript.
How does Angular Cli use webpack?	Angular Cli uses Webpack under the hood for bundling functionality, but it also gives us additional functionality. The cli can be used to start projects, create new components, services, pipes, etc.
Explain the difference between server-side and client-side rendering
Explain the relevance of npm to Angular projects. Which file does npm use to track dependencies?
What is the “spec” file used for?
What is the benefit of using a directive like NgClass over the class attribute, or even property binding to the class attribute?
What’s the difference between a JavaScript module and Angular module? What are some common Angular modules?
How would you lazy load a module?
What is an EventEmitter and when would you use one?
What’s the difference between using reactive and template-driven forms? How would you setup each?
How would you run your unit tests for an Angular project?	Karma and Jasmine

Created by: wahoo99

Popular Computers sets

Definitions for Word Processing and the main parts of the MS Word 2010 window

WP Page Formatting

WP Paragraph Formatting terms

Review business letter parts

Review the three paragraph formats (block, indented, hanging indent)

WP font formatting features in Word 2010

Arkansas CBA unit 1 Hardware

"Know" box contains:
Time elapsed:
Retries: