week 7 Flashcards
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