week 7 Flashcards
(57 cards)
Node.js
- open-source, cross-platform run-time environment built on Chrome’s V8 JavaScript engine.
- is used to execute JavaScript code outside of a web browser
- provides a library of various JavaScript modules, which simplifies the development of web applications.
npm (node package manager)
- default package manager for the JavaScript runtime environment -Node.js
- 3 components:
- —- website: discovers packages, set up profiles, and manage access to public or private packages
- —- command line interface (CLI): runs from a terminal and allow us to interact with npm
- —- registry: a public database of JavaScript packages comprised of software and metadata
use of Node.js for Angular
- use Node.js and npm as tools for building Angular or React apps
- Angular is a front-end framework used to create a web application and is written in Typescript
- browser only understands JavaScript code, so need to compile Typescript (.ts file) to plain JavaScript (.js file)
package.json file
- located in project root of all npm packages
- is used to give information to npm that allows it to identify the project as well as handle the project’s dependencies
- contains metadata relevant to the project
- run “npm init” command in terminal to generate package.json file
- dependencies section is essential for running applications
- devDependencies section is used only for developing applications
TypeScript
- typed superset of JavaScript
- open-source and object-oriented programming language, developed by Microsoft
- manipulate the DOM for adding or removing elements
- portable across browsers, devices, and operating systems
- supports strong typing or static typing
- files are saved with a “.ts” extension and then compiled into JavaScript using the TypeScript compiler
- gets compiled to JavaScript, which can run on any JavaScript runtime environment.(Eg: Node.js)
Single Page Application
- web application that fits on a single page in the browser
- all JavaScript, HTML, CSS code retrieved by the browser with a single page load
- navigation between pages performed without refreshing the whole page
- uses AJAX and HTML5 to build responsive web applications
- ex. Gmail, Google Maps, Facebook, Twitter, Trello
Advantages and Disadvantages of SPAs
Advantages:
- fast and responsive
- caching capabilities: caches all received data locally
- pleasant user experience
Disadvantages:
- doesn’t perform well with SEO (search engine optimization)
- less secure towards XSS (cross site scripting) attacks
- first page loads slower
Variable declaration in TypeScript
let [identifier] : [type] = value;
Datatypes in TypeScript
- boolean
- number: store decimal, hexademial, binary and octal literals in a variable
- string: includes template strings which have embedded expressions
- undefined and null
- any: used for ones we do not know when writing application
- void: not useful, can only assign null or undefined to values
- arrays: use the type of the elements followed by [] or use a generic array typeArray for declaring the array type
- tuples: array with a fixed number of elements whose types are known
- enum: declare a set of named constants. a collection of related values that can be numeric or string values
- never: a type of values that never occur. return type for a function that always throws an exception or one that never returns.
Classes, Access Modifiers, Modules, Accessors and Mutators in TypeScript
Classes:
- “class” keyword: declare a class
- “new” keyword: create an instance of the class
- “extends” keyword: implement an inheritance hierarchy
Access Modifiers:
- public: default
- private: member cannot be visible outside of the class
- protected: member can be accessed only by its containing class and deriving classes
- “readonly” keyword: make properties accessible but immutable
Modules:
- to restrict scopes and also to organize and maintain a large codebase
- all variables, classes, and functions declared in a module are not accessible outside the module
- “export” keyword: create a module
- “import” keyword: use module in another module. syntax is “import { export name } from “file path without extension”;”
Accessors and Mutators:
- “get” and “set” keywords: create getter and setter methods
Decorator
- special kind of declaration attached to a class declaration, method, accessor, property, or parameter
- defined in the @expression format, where expression evaluates a function that called at runtime
- in tsconfig.json file, set the experimentalDecorators compiler option property to true, in order to use decorators in code.
Types of Decorators
Class decorators:
- declared before a class declaration
- applied to the constructor of the class
- used to observe, modify, or replace a class definition
Method decorators:
- declared before a method declaration
- applied to the Property Descriptor for the method
- used to observe, modify, or replace a method definition
Property decorators:
- used to listen to state changes on a class
Parameter decorators:
- declared before a parameter declaration
- applied to the function for a class constructor or method declaration
Accessor Decorators:
- applied to the property descriptor for the accessor
Interfaces
- allow us to create contracts that other classes/ objects can implement
- defined using the interface keyword that includes properties and methods
- optional properties are marked with a “?” that do not have to be implemented
- TypeScript compiler does not convert the interface to JavaScript. Instead they are only used for type checking
- can also contain functions without the function body which is used to ensure the function signature
Webpack
- powerful static module bundler for JavaScript applications that packages all modules in our application into a bundle and serves it to the browser
- builds a dependency graph when it processes the application. It starts from a list of modules defined in its config file (webpack.config.js) and recursively builds a dependency graph that includes every module our application needs, then packages all of those modules into a small bundle that can be loaded by the browser
- solution to having many javascript files in HTML pages: bundling several files together into one file to be downloaded by the browser in one single request
- module bundlers: used to bundle a group of JavaScript modules with their dependencies and merge them into a single file in the correct order, which can be executed by the browser
Angular CLI
- command-line interface for Angular, helps with getting started to create an Angular app
- creates an Angular application and uses the Typescript programming language, Webpack for Module bundling, Karma for unit testing, and Protractor for end-to-end testing
- takes care of the configuration and initialization of various libraries
- allows to add components, directives, services, etc, to already existing Angular applications
Angular file structure
- e2e folder: source files for a set of end-to-end tests and test-specific configuration files
- node_modules folder: provides npm packages to the entire workspace
- src folder: contains the source files which give information about application logic, data, and assets
- app: contains component files
- —- app.component.ts - used to define the logic for the app’s root component (AppComponent).
- —- app.component.html - used to define the HTML template associated with the root AppComponent.
- —- app.component.css - used to define the base CSS stylesheet for the root AppComponent.
- —- app.component.spec.ts - used to define the unit test for the root AppComponent.
- —- app.module.ts - used to define the root module (AppModule) and helps the Angular to assemble the application. All components, including the AppComponent, must be declared inside the AppModule.
- assets - contains image and other asset files.
- environments - contains build configuration options for particular target environments.
- favicon.ico - an icon to used for an application in the bookmark bar
- index.html - the main HTML page that is served when someone visits your site
- main.ts - main entry point for an application
- polyfills.ts - provides polyfill scripts for browser support.
- styles.css - lists CSS files that applies the styles for a project.
- test.ts - main entry point for unit tests used in the application.
- .editorconfig - this file contains configuration for code editors.
- .gitignore - it specifies untracked files that Git should ignore.
- angular.json - holds CLI configuration defaults for all projects in the workspace. It includes configuration options for the build, serve, and test tools.
- browserslist - used to configure the sharing of target browsers and Node.js versions among various front-end tools.
- karma.conf.js - it contains application-specific Karma configuration.
- package-lock.json - this provides version information for all packages installed into node_modules by the npm client.
- package.json - used to configure npm package dependencies that are available to all projects in the workspace.
- README.md - an introductory documentation for the root app.
- tsconfig.app.json - it holds application-specific TypeScript configuration, including TypeScript and Angular template compiler options.
AngularJS vs Angular 4+
AngularJS:
- uses JavaScript
- uses scopes and controllers (MVC architecture) for control logic
- have to remember the right ng directive in order to bind an image/property or an event
- doesn’t support mobiles
- about to finish its support lifecycle
Angular 4+:
- uses TypeScript (powerful type checking and object-oriented features)
- uses components as its main architectural design
- has more emphasis on modularity
- focuses on “( )” for event binding and “[ ]” for property binding
- supports mobiles
- more modern and has upgrades
Component Life Cycle Hooks
constructor():
- executed first
- inject any dependencies into the component
ngOnChanges():
- called whenever the input properties of the component change
- returns a SimpleChanges object which holds any current and previous property values
ngOnInit():
- called once to initialize the component and set the input properties
- initializes the component after Angular first displays the data-bound properties
ngDoCheck():
- called during all change-detection runs that Angular can’t detect on its own
- also called immediately after the ngOnChanges() method
ngAfterContentInit():
- invoked once after Angular performs any content projection into the component’s view
ngAfterContentChecked():
- invoked after each time Angular checks for content projected into the component.
- called after ngAfterContentInit() and every subsequent ngDoCheck()
ngAfterViewInit():
- invoked after Angular initializes the component’s views and its child views
ngAfterViewChecked():
- invoked after each time Angular checks for the content projected into the component
- called after ngAfterViewInit() and every subsequent ngAfterContentChecked()
ngOnDestroy():
- invoked before Angular destroys the directive or component
Angular Components
- the basic building blocks in the Angular application
- contain the data & UI logic that defines the view and behavior of the web application
- defined using a @Component decorator
- includes a selector, template, style, and other properties, and it specifies the metadata required to process the component.
- Angular app has one root component (AppComponent) which is specified in the bootstrap array under the main ngModule module defined in the app.module.ts file
@Component decorator
- app.component.css - holds all the CSS styles
- app.component.html - this is template contains typical HTML elements and alters the HTML based on our app’s logic and DOM manipulations
- app.component.ts - contains typescript code to control the component behavior
- selector: a CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML
- templateUrl: the module-relative address of this component’s HTML template
- styleUrls: an array of relative paths to where the component can find the styles used to style the HTML view
- create component in Angular: run “ng generate component “ or “ng g c “ in terminal
Angular Directives
- allow us to manipulate the DOM
- a marker on a DOM element that tells Angular to change the appearance, behavior, and layout of the DOM element and its children
- most directives begin with ng, where ng stands for Angular, and extend the HTML.
Types of directives:
- Component Directives - alter the details of how the component should be processed, instantiated, and used at runtime.
- Structural Directives - used to manipulate and change the structure of the DOM elements.
- Attribute Directives - used to change the look and behavior of the DOM elements.
Structural Directives
- used for adding, removing, or manipulating DOM elements
- start with an asterisk (*) followed by a directive name
- can work with the HTML5 element, which is designed to hold template code.
3 built-in directives:
- *ngIf: allows to add or remove DOM Elements based upon the Boolean expression
- *ngFor: used to repeat a part of the HTML template once per each item from an iterable list
- ngSwitch:
- —- attribute directive that controls the behavior of the other two switch structural directives - NgSwitchCase and NgSwitchDefault. write NgSwitch as [ngSwitch], NgSwitchCase as *ngSwitchCase, and NgSwitchDefault as *ngSwitchDefault
- —- NgSwitchCase displays its element when its value matches the switch value. NgSwitchDefault displays its element when no sibling NgSwitchCase matches the switch value
Attribute Directories
- used to change the look and behavior of the DOM elements
[ngClass]:
- used for adding or removing the CSS classes on an HTML element. allows to apply CSS classes dynamically based on expression evaluation
- syntax is “ ….”. value can be string, array, object
[ngStyle]:
- allows to dynamically change the style of HTML element based on the expression
- syntax is “…”
custom directives:
- use CLI command “ng generate directive “
@NgModule decorator
NgModule takes metadata and describes how to compile a component’s template and how to create an injector at runtime. It identifies the module’s own components, directives, and pipes and makes them public through the export property which can be used by external components.
takes metadata to launch the app:
- declarations: contains a list of components, directives, and pipes, which belong to this module.
- imports: contains a list of modules, which are used by the component templates in this module reference. For example, we import BrowserModule to have browser-specific services such as DOM rendering, sanitization, and location.
- providers: the list of service providers that the application needs.
- bootstrap: contains the root component of the application