NodeJS: IDE/Text Editor Visual Studio Code, WebStorm, Sublime Text etc. Slides & Demos * Refer to README.md for instructions on how to run the projects https://nodejs.org/en/download/current/ https://github.com/newventuresoftware/kendo-ui-for-angular
static typing, it's more predictable. Due to modules, namespaces and stronger OOP, it scales better for larger apps. Due to compilation step, some errors are caught compile-time, not run-time.
CLI Initialize a project Navigate to the project root. Run the project https://nodejs.org/en/download/ npm install -g @angular/cli ng new my-app cd my-app ng serve --open
function that takes a single metadata object whose properties describe the module. Tells Angular how to compile and run the module code. Consolidates components, directives and services into cohesive blocks of functionality. It can import other modules for reusing their Components, Directives etc.
UI building block in Angular. Control the view. Represent anything visible to the end user. Angular creates, updates and destroys components as the user moves through the app. Angular provides view encapsulation by default which enables the Shadow DOM.
normal DOM with two differences: 1. how it's created/used and 2. how it behaves in relation to the rest of the page Shadow DOM is designed as a tool for building component-based apps Angular uses components It addresses the DOM tree encapsulation problem Allows us to hide DOM logic behind other elements
component's DOM is self-contained document.querySelector() won't return nodes in the component's shadow DOM Scoped CSS - CSS de ned inside shadow DOM is scoped to it
encapsulation by default which enables Shadow DOM There are three view encapsulation types available None - no Shadow DOM and no encapsulation Emulated (default) - no Shadow DOM but there is encapsulation of the views Native - native Shadow DOM
a template. Structural - change the DOM layout by adding and removing DOM elements(*ngIf, *ngFor). Attribute - change the appearance or behavior of an element, component, or another directive(NgStyle, NgClass).
to write display-value transformations that can be declared in the HTML. A pipe takes in data as input and transforms it to a desired output. Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, CurrencyPipe... Pipes can be chained together in potentially useful combinations. <p>Name: {{ name | uppercase }}</p>
here? Tight coupling between Car and Engine If the de nition of Engine changes, Car must also change. Engine cannot be shared among Car instances. Is it possible to create an Engine in a test environment? class Car { public engine: Engine; constructor() { this.engine = new Engine(); } }
its dependencies in the constructor. class Car { public engine: Engine; constructor(engine: Engine) { this.engine = engine; } } const engine: Engine = new HybridEngine(); const car = new Car(engine);
a class in Angular. It remains nothing more than a class until registered with an Angular injector. You don't have to create an Angular injector. Angular creates an application-wide injector for you during the bootstrap process.
create or deliver a service. The providers are registered in the app module. @NgModule({ imports: [BrowserModule], providers: [UserService], declarations: [App], bootstrap: [App] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
streams. You are able to create data streams of anything. A stream is a sequence of ongoing events ordered in time. A stream can be used as an input to another one. It emits three different things a value (of some type) an error a complete method
start running upon subscription The observable sequence only starts pushing values to the observers when Subscribe is called Hot observables are ones that are pushing even when you are not subscribed to the observable Like mouse moves, or Timer ticks, etc. It’s not always possible from the subscriber side to know whether you are dealing with a cold or hot Observable
the client/server communication tasks to a helper service called the XHRBackend Register for HTTP services Import the HttpClientModule Can work with both Observables and Promises.
been invoked. OnChanges The data-bound input properties have been (re)set. OnInit The component/directive has been initialized. DoCheck Detect and act upon changes that Angular can't or won't detect on its own. AfterContentInit After Angular projects external content into the component's view. AfterContentChecked After Angular checks the content projected into the component. AfterViewInit After Angular initializes the component's views and child views. AfterViewChecked Called just before Angular destroys the directive/component. OnDestroy After Angular checks the component's views and child views. * TypeScript, Components & Directives, Component Only
UI for Angular?} } Native Angular Component Suite. Each component group represents a separate Angular module. Distributed via NPM (nodejs package manager). Unlimited Product Support.
functions that help you handle the following bulk data operations: sorting, ltering, grouping, aggragates telerik.com/kendo-angular-ui/components/dataquery/api/
Concatenates modules into a single le. Inlining Pulls template html and css into the components. Mini cation Removes excess whitespace, comments, and optional tokens. Ugli cation Rewrites code to use short, cryptic variable and function names. Dead Code Elimination Removes unreferenced modules and unused code. Prune Libraries Drop unused libraries and pare others down to the features you need.