oogle — Traducido al Mostrar texto original Opciones ¥ Angular 4 Cheat Sheet 01. Componentes Los componentes son bloques de construccién de una aplicacién angular. Un componente es una combinacién de plantila HTML y una clase de TypeScript (0 JavaScript). Para crear un componente en Angular con TypeScript, cree una clase y decore con el decorador de componentes. Considere la muestra a continuacién import { Component } from 3 @Component({ selector template ») export class HelloWorld { + ~chipHello Angular world* El componente se importa del paquete angular central. El decorador de componentes permite especificar metadatos para el componente dado. Si bien hay muchos campos de metadatos que podemos usar, estos son algunos importantes: selector : es el nombre dado para identificar un componente. En la muestra que acabamos do ver, hello- ng-world se usa para referirse al componente en otra plantilla 0 cédigo HTML, plantilla : es el marcado para el componente dado. Mientras se utiliza el componente, se aplican enlaces con variables en la clase de componente, el estilo y la l6gica de presentacién, templateUrl : es la url de un archivo extern que contiene una plantila para la vista. Para una mejor organizacién del cédigo, la plantilla podria moverse a un archivo separado y la ruta podria especificarse como un valor para templateUrl estilos : se usa para estilos especificos para el componente dado, Ellos tienen alcance al componente.Google Tadicio a: espatol [Mostar texto ofgina Opciones ¥ styleUrls : define los archivos CSS que contienen el estilo del componente, Podemos especificar uno 0 mas archivos CSS en una matriz. A partir de estos archivos CSS, las clases y otros estilos se podrian aplicar en la plantila para el componente. 02. Enlace de datos La interpolacién de cadenas es una manera facil de mostrar datos en una aplicacién angular. Considere la siguiente sintaxis en una plantilla angular para mostrar el valor de una variable, *chiHello {{title}} world” titulo es el nombre de la variable. Observe las comillas simples (retroceso *) alrededor de la cadena, que es la sintaxis de ES6 / ES2015 para mezclar variables en una cadena. El fragmento de cédigo completo para el componente es el siguiente: import { Component } from ‘@angular/core'; @Component ({ selector: 'hello-ng-world’, template: * ») export class HelloWorld { title = ‘angular 4°; + Para mostrar el valor en un campo de texto, use la propiedad DOM " valor” envuelta entre corchetes. Como usa un atributo DOM, es natural y facil de aprender para cualquier persona nueva en Angular. "Titulo" es el nombre de la variable en el componente. Tal enlace podria aplicarse a cualquier atributo HTML. Considere el siguiente ejemplo donde el titulo se usa como un marcador de posicién para el campo de texto. 03. Eventos Para enlazar un evento DOM con una funcién en un componente, use la siguiente sintaxis. Envuelva el evento DOM en paréntesis circular, que invoca una funcién en el componente update Time 3.1 Aceptacién de la entrada del usuario A medida que el usuario introduce valores en campos de texto o realiza selecciones en un ment desplegable o un bot6n de opcién, los valores deben actualizarse en variables de componentes / clases. Podemos usar eventos para lograr esto. El siguiente fragmento de actualizaciones actualiza el valor en un campo de texto, a una variable en el ‘componente. updateValue(event: Event){ // event.target.value has the value on the text field. // Tt is set to the label. ‘this.label = event.target.value; }Google — Traducido al: espafiol | Mostrar texto original Opciones ¥ Nota : Considerando que es un ejemplo basico, el parametro de evento para la funcién anterior es de tipo any . Para una mejor verificacién de tipos, es recomendable declararlo de tipo KeyboardEvent. 3.2 Aceptar la entrada del usuario, una mejor manera En la muestra de entrada de usuario aceptada, $ event expone mucha informacién a la funcién / componente. Encapsula el evento DOM completo desencadenado originalmente. Sin embargo, todas las funciones que necesita son el valor del campo de texto. Considere la siguiente pieza de cédigo, que es una implementacién refinada de la misma. Use la variable de referencia de la plantilla en el campo de texto. Observe la funcién updateValue en change , que acepta el campo de valor en label (variable de referencia de plantilla). La funcién de actualizacién ahora puede establecer el valor en una variable de clase. updateValue(value: any){ // It is set to the label. this.label = value; } 3.3 Platano en una caja Desde Angular 2 en adelante, el enlace de datos bidireccional no esta implicito. Considera la siguiente muestra. A medida que el usuario cambia de valor en el campo de texto, no actualiza instantaneamente el titulo en ht chi> {{title}) Use la siguiente sintaxis para el enlace de datos bidireccional. Combina el enlace de valor y el enlace de evento con la forma abreviada - [()]. En una nota mas ligera, se llama platano en una caja. {{title}) , »Google Tadicio a: espatol [Mostar texto ofgina Opciones ¥ Para completar el proceso DI, especifique el servicio como una propiedad de parametro en el constructor. export class SampleComponent { ‘timeValue: string = this.tine.getTime(); // Tenplate shows constructor(private time: TimeService){ + y Consulte la implementacién de TimeService a continuacién, import { Injectable } from “@angular/core’ ; @Injectable() export class TimeService { constructor() { } getTime(){ let datedbj: Date = new Date(); return *${dateObj.getDay()}/${dateObj .getMonth()}/${datedbj.getFullYear()}” + } 6.3 Proporcionar un servicio a nivel de médulo Cuando TimeService se proporciona a nivel de médulo (en lugar del nivel de componente), la instancia de servicio esta disponible en todo el médulo (y la aplicacién). Funciona como singleton en toda la aplicacién @NgHodule({ declarations: [ ‘AppComponent,, SampleConponent L imports: [ BrowserModule 1, providers: [TimeService], bootstrap: [AppComponent] » export class AppModule { } io 6.4 Sintaxis alternativa para proporcionar un servi En la muestra anterior, la declaracién del proveedor es un atajo para lo siguiente, // instead of providers: [TimeService] you may use the following, providers: [{provide: TimeService, useClass: TimeService}] Permite usar una implementacién especializada o alternativa de la clase (TimeService en este ejemplo). La nueva clase podria ser una clase derivada o la que tenga firmas de funcién similares a la clase original providers: [{provide: TimeService, useClass: AlternateTimeService}] En aras de un ejemplo, el AlternateTimeService proporciona un valor de fecha y hora. Original TimeService proporcioné solo el valor de la fecha.Google Tadicio a: espatol [Mostar texto ofgina Opciones ¥ @injectable() export class AlternateTimeService extends TimeService { constructor() { super(); getTime(){ let dateobj: Date = new Date(); return ~${dateObj..getDay()}/${dateobj .getMonth()}/${dateObj . getFullvear()} ${dateObj.getHours()}:${dateObj.getMinutes()} "5 + , Nota : Cuando la instruccién siguiente se utiliza para proporcionar un servicio, el inyector angular crea una nueva instancia del servicio. [{provide: TimeService, useClass: AlternateTimeService}] Para usar una instancia existente del servicio, use useExisting en vez de useClass providers: [AlternateTimeService, {provide: TimeService, useExisting: AlternateTimeService}] 6.5 Proporcionar una interfaz y su implementacién Puede ser una buena idea proporcionar una interfaz e implementacién como una clase o un valor. Considera la siguiente interfaz. interface Time{ getTime(): string export default Times Podria ser implementado por TimeService @injectable() export class TimeService implements Time { constructor() { } getTime(){ let dateddj: Date = new Date(); return ~${dateObj..getDay()}/${dateobj .getmonth()}/${dateObj.getFullYear()}" } } En este punto, no podemos implementar la interfaz Time y la clase TimeService como la muestra anterior. La siguiente pieza de o6digo no funciona, porque una interfaz de TypeSoript no se compila con ningtin equivalente en JavaScript. providers: [{provide: Time, useClass: TimeService}] // Wrong Para que esto funcione, importe Inject (Decorator) e InjectionToken desde @ angular / core // create an object of InjectionToken that confines to interface Time let Time Service = new InjectionToken( ‘Time Service’); // Provide the injector token with interface implementation. providers: [{provide: Time Service, useClass: TimeService}] // inject the token with @inject decorator constructor(@Inject(Time Service) ts,) { this.timeService = ts; }Google — Traducido al: espafiol | Mostrar texto original Opciones ¥ 6.6 Proporcione un valor Es posible que no siempre necesitemos que se proporcione una clase como servicio. La siguiente sintaxis permite proporcionar un objeto JSON. Observe que el objeto JSON tiene Ia funcién getTime (), que podria usarse en los componentes. providers: [{provide: TimeService, useValue: getTime: () => “${dateObj.getDay()} - ${datedbj.getMonth()} - ${dateObj.getFullYear()} 1 Nota : Para una implementacién similar a la seccién " Proporcionar una interfaz y su implementacion", proporcione useValue en lugar de useClass . El resto de la implementacién permanece igual providers: [provid getTime: () oY Time_Service, useValue: { ‘A date value’ 07. Directivas Desde Angular 2 en adelante, las directivas se clasifican ampliamente de la siguiente manera: 1. Componentes - Incluye plantilla. Ellos son los principales bloques de construccién de una aplicaci6n angular. Consulte la seccién Componente en el articulo. 2. Directivas estructurales : una directiva para gestionar el disefio. Se agrega como un atributo en el elemento y controla el flujo en DOM. Ejemplo NgFor, Ngff, etc. 3. Directivas de atributos : agrega comportamiento dinémico y estilo a un elemento en la plantilla Ejemplo NgStyle. 7.1 Ng-si... else Una directiva estructural para mostrar una plantilla condicionalmente, Considera la siguiente muestra. La directiva ngif evita que se muestre medio string Tiempo: [sin valor] cuando el titulo esté vacfo. La condicién else muestra una plantila cuando no se establece ningiin valor para el titulo Observe la sintaxis aqui, la directiva tiene el prefijo con un asterisco.

I show-up when isTrue is true. I show-up when isTrue is false Nota : En lugar de ng-if... else (como en la seccién ng-if... else ), para una mejor legibilidad del cédigo, podemos usar if... then ... else. Aqui, el elemento que se muestra cuando la condicién es verdaderaGoogle Tadicio a: espatol [Mostar texto ofgina Opciones ¥ 7.3 Ng-contenedor Ng-container es otra directiva / componente para agrupar elementos HTML. Podemos agrupar elementos con una etiqueta como div o span. Sin embargo, en muchas aplicaciones podria haber estilos predeterminados aplicados en estos elementos. Para ser mas predecible, se prefiere Ng-Container. Agrupa elementos, pero no se presenta como una etiqueta HTML. Considera seguir muestra, // Consider value of title is Angular Welcome

to the {{title}} world.

Se representa como Welcome to the Angular world. EI HTML resultante es el siguiente, *Anguter BOD un Yieiv _ngcoare ese ce _ngcontent-c0)thes/i * Angular world.” idiv No se procesé en una linea debido a div. Podemos cambiar el comportamiento con CSS. Sin embargo, podemos tener un estilo aplicado para div por defecto, Eso podria resultar en un estilo inesperado para la cadena dentro del div. Ahora, en cambio, considere usar ng-container. Consulte el fragmento a continuacién. Welcome to {{title}} world. El resultado en la pagina web es el siguiente Welcome to the Angular world. EI HTML resultante es el siguiente, Observe que ng-container no aparecié como un elemento. Welcone <}-binaings: _ngcontent-cO>thec/i: Angular world." 7.4 NgSwitch y NgSwitchCase Podemos usar declaracién de mayuisculas y mintisculas en plantillas angulares. Es similar a la instruccién switch. ,case en JavaScriptGoogle Tadicio a: espatol [Mostar texto ogi Opciones ¥ Observe que ngSwitch es una directiva de atributos y ngSwitchCase es una directiva estructural.

Degree Celsius

Fahrenheit

7.5 Funcién decorador de entrada Una variable de clase se podria configurar como una entrada a la directiva. El valor sera proporcionado por el componente utilizando la directiva Considere el siguiente fragmento de cédigo. Es un componente que muestra campos de inicio de sesién (Un componente es un tipo de directiva). EI Componente que invoca el componente de inicio de sesién puede establecer showRegister en verdadero, lo que resulta en que se muestre un bot6n de registro. Para hacer una entrada de variable de clase, anételo con la funcién Decorador de entrada. Import Input() import { Component, OnInit, Input } from ‘@angular/core' Anotar con la funcién de decorador @Input() showRegister: boolean; Use el valor de entrada en el componente que esté en una plantilla en este ejemplo.

Register Go

Mientras usa el componente, proporcione la entrada: Podriamos proporcionar un nombre diferente al atributo que el de la variable. Considere el siguiente fragmento: @Input("should-show-registen") showRegister: boolean; Ahora, use el atributo should-show-register en lugar del nombre de la variable showRegister.Google Tadicio a: espatol [Mostar texto ogi Opciones ¥ 7.6 Funcién de decodificador de salida Los eventos emitidos por una directiva se envian al componente (o una directiva) utilizando la directiva dada. En el ejemplo de inicio de sesién, al hacer clic en iniciar sesién, se puede emitir un evento con identificacién de usuario y contrasefia. Considere el siguiente fragmento. Funcién decoradora de salida de importacién y EventEmitter , import { Component, OnInit, Input, Output, Eventemitter } from ‘@angular/core'; Dectarar un evento de salida de tipo EventEmitter @Output() onLogin: Eventémitter<{userid: string, password: string}>; Observe el tipo genérico (anénimo) en EventEmitter para onLogin. Se espera que emita un objeto con identificacién de usuario y contrasefia. Luego, inicializa el objeto. constructor() { ‘this.onLogin = new Eventemitter(); + El componente emite el evento. En la muestra, cuando el usuario hace clic en iniciar sesién, emite el evento con una funcién siguiente ‘Aqui esté la plantilla: Go x el controlador de eventos: loginClicked(userld, password) { this.onLogin.next({userTd, password}); 3 Mientras utiliza el componente, especifique el controlador de inicio de sesién para el evento de salida onLogin . El controlador de inicio de sesién recibe la identificacién de usuario y la contrasefia del componente de inicio de sesién oginHandler (event ){ console. log(event) ; // Perform login action. 3 // Output: Object {userl sampleUser", password: amplePassword"} De forma similar al decorador de entrada, el decorador de salida podria especificar un nombre de evento para exponer el componente / directiva consumidor. No necesita ser el nombre de la variable. Considere el siguiente fragmento. @Output(“login") onLogin: EventEmitter<{userId: string, password: string}>; .mientras usa el componente: 08. Estrategia de deteccién de cambiosGoogle — Traducido al: espafiol | Mostrar texto original Opciones ¥ Los propagados angulares cambian de arriba hacia abajo, desde los componentes principales hasta los componentes secundarios. Cada componente en Angular tiene una clase de deteccién de cambio equivalente. A medida que se actualiza el modelo de componente, compara valores anteriores y nuevos. Luego los cambios en el modelo se actualizan en el DOM, Para entradas de componentes como ntimero y cadena, las variables son inmutables. A medida que el valor cambia y la clase de deteccién de cambio marca el cambio, se actualiza el DOM Para los tipos de objeto, la comparacién podria ser una de las siguientes, Comparacién superficial : Comparar referencias de objetos. Si se actualizan uno o mas campos en el objeto, la referencia del objeto no cambia. El control superficial no notard el cambio. Sin embargo, este enfoque funciona mejor para tipos de objetos inmutables. Es decir, los objetos no pueden ser modificados Los cambios deben ser manejados creando una nueva instancia del objeto. Comparacién profunda : itera a través de cada campo en el objeto y compara con el valor anterior. Esto identifica el cambio en el objeto mutable también. Es decir, si se actualiza uno de los campos del objeto, se notardé el cambio. 8.1 Estrategia de deteccién de cambios para un componente En un componente, podemos anotar con una de las dos estrategias de deteccién de cambios. ChangeDetectionStrategy Default : Como su nombre indica, es la estrategia predeterminada cuando no hay nada anotado explicitamente en un componente. Con esta estrategia, si el componente acepta un tipo de objeto como entrada, realiza una comparacién profunda cada vez que hay un cambio. Es decir, si uno de los campos ha cambiado, recorrera todos los campos e identificard el cambio. A continuacién, actualizara el DOM. Considere la siguiente muestra: import { Component, OnInit, Input, ChangeDetectionstrategy } from '@angular/core’; @component ({ selector: 'app-child", template: *

{{values.title}}

{{values.description}}

', styleUrls: ['./child.component.css'], changeDetection: ChangeDetectionStrategy.Default » export class ChildComponent implements OnInit { // Input is an object type. @Input() values title: string; description: strings + constructor() { } ngontnit() () + Aviso, la estrategia de deteccién de cambios se menciona como ChangeDetectionStrategy.Default , es el valor establecido por defecto en cualquier componente. La entrada al componente es un tipo de objeto con dos campos titulo y descripciénGoogle Tadicio a: espatol [Mostar texto ofgina Opciones ¥ ‘ Un controlador de eventos en el componente principal se menciona a continuacién. Esto se desencadena, posiblemente por una accién del usuario u otros eventos. updateValues(param1, param2){ ‘this.values.title = parami; this.values.description = param2; } Aviso, estamos actualizando el objeto de valores. La referencia del objeto no cambia. Sin embargo, el ‘componente secundario actualiza DOM a medida que la estrategia realiza una comparacién profunda. ChangeDetectionStrategy .OnPush : La estrategia predeterminada es efectiva para identificar cambios. Sin embargo, no es efectivo ya que tiene que recorrer un objeto completo para identificar el cambio. Para un mejor rendimiento con la deteccién de cambios, considere usar la estrategia OnPush . Realiza una comparacién superficial del objeto de entrada con el objeto anterior. Es decir, compara solo la referencia del objeto, El fragmento de cédigo que acabamos de ver no funcionara con la estrategia de OnPush . En la muestra, la referencia no cambia a medida que modificamos los valores en el objeto. El componente Child no actualizard el DOM. Cuando cambiamos la estrategia a OnPush en un componente, el objeto de entrada debe ser inmutable, Deberiamos crear una nueva instancia de objeto de entrada, cada vez que haya un cambio. Esto cambia la referencia del objeto y, por lo tanto, la comparacién identifica el cambio. Considere seguir el fragmento para manejar el evento de cambio en el padre. updatevalues(param1, param2){ this.values = { // Create a new object for each change. title: paranl, description: paran2 } + Nota : Aunque la solucién anterior para el controlador de eventos updateValues podria funcionar bien con la estrategia OnPush , es aconsejable usar la _implementacién —_inmutable.js (https://facebook.github io/immutable-js/) para imponer la inmutabilidad con objetos u objetos observables usando RxJS 0 cualquier otra biblioteca observable. 09. Transclusion en Angular En las dos secciones anteriores (decorador de entrada y decorador de salida), hemos visto cémo usar los atributos de los componentes para entrada y salida Qué hay de acceder al contenido dentro del elemento, entre las etiquetas de inicio y fin? AngularJS 1.x had transclusion in directives that allowed content within the element to render as part of the directive. For example, an element can have elements, expressions and text within the element. The component will apply blue background color and show the content, sample text In the blue component's template, use ng-content to access content within the element, Consider the following. The CSS class blue applies styling,

ene-contentsGoogle Tadicio a: espatol [Mostar texto ofgina Opciones ¥ ng-content shows sample text from above example. It may contain more elements, data binding expressions etc. 10. Using observables in Angular templates Observable data by definition, may not be available while rendering the template. The *ngff directive could be used to conditionally render a section. Consider the following sample.

Title: {{title))

Loading... response. json()) Note: Shown here is one of the ways to import map operator. import 'rxjs/add/operator/map'; // Preferred way to import Otherwise, we may use the following import statement for the entire ras library. import ‘rxjs'5 However, it still returns an observable. An observable has a subscribe function, which accepts three callbacks. a) Success callback that has data input b) Error callback that has error input ) Complete callback, which is called while finishing with the observable. Consider the following snippet,Google Tadicio a: espatol [Mostar texto ogi Opciones ¥ this http «get (https: //dinosaur- facts. firebaseio.com/dinosaurs -map((response) => response. json()) ‘subscribe((data) => console.log(data), // success (error) => console.error(error), // failure © => console. info("done")); //’ done json") Figure 3: console output of observable. You may set the observable result to a class/component variable and display it in the template. A better option would be to use async pipe in the template. Here's a sample dino: Observable; // class level variable declaration 7] in the given function, where the API call run set returned observable to the // class variable this.dino = this.http // Set returned observable to a class var: «get (“https://dinosaur- facts. firebaseio. com/dinosaurs. json” .map((response) response. json()); ble In the template use async pipe. When the dino object is available, use fields on the object. 13. Take me back to Promises We may use an RxJS operator to convert the observable to a promise. f an API currently returns a promise, for backward compatibilty, i's a useful operator. Import toPromise operator: import 'rxjs/add/operator/toPromise’ ; Use toPromise on an observable: getbata(): Promisecany>{ return this.http -get("https: //dinosaur-facts. firebaseio.com/dinosaurs. json”) ‘map( (response) => response. json()) stoPromise(); } Use data returned on the success callback, Set it to a class variable to be used in the template. this.getoata() -then((data) => this.dino = data) leatch((error) => console.error(error)); Review the following template:

Bruhathkayosaurus appeared {{ dino.bruhathkayosaurus. appeared }} years ago

Google Tadicio a: espatol [Mostar texto ofgina Opciones ¥ 14. Router Routing makes it possible to build an SPA (Single Page Application). Using the router configuration, components are mapped to a URL. To get started with an Angular application that supports routing using Angular CLI, run the following command. ng new sample-application --routing To add a module with routing to an existing application using Angular CLI, run the following command ng g module my-router-module --routing 14.41 Router Outlet Components at the route (URL) are rendered below router outlet, in general, RouterOutlet is placed in the root component for routing to work. 14.2 Route configuration Create a routes object of type Routes ( in@angular/router package) which is an array of routes ISON objects. Each object may have one or more of the following fields path: Specifies path to match component: At the given path, the given component will oad below router-outlet redirectTo: Redirects to the given path, when path matches. For example, it could redirect to home, when, no path is provided. pathMatch: It allows configuring path match strategy. When the given value is full, the complete path needs to match. Whereas prefix allows matching inital string. Prefixis the default value. Consider the following route configuration for sample: const routes: Routes = [ path: ‘hone’, component: Sample1Component, path: ‘second2', component: Sample2Component Lb path: "', redirectTo: '/home", pathMatch: ‘full' t 1: 14.3 Child Routes For configuring child routes, use children within the route object. The child component shows-up at the router-outlet in the given component. The following sample renders Sample1Component. it has a router-outlet in the template ‘Sample2Component renders below it.Google Tadicio a: espatol [Mostar texto ofgina Opciones ¥ const routes: Routes = [ path: ‘home’, component: Sample1Component,, children: [ { path: ‘second’, component: Sample2Component t }e // rest of the configuration. // Template for Sanple1Component

sample-1 works!

14.4 Params Data can be exchanged between routes using URL parameters. Configure variable in the route: In the sample below, the details route expects an id as a parameter in the URL. Example http://sample.com/details/10 { path: details/:id, component: DetailsComponent + Read value from the URL: Import ActivatedRoute from @angular/router. Inject ActivatedRoute and access params. I's an observable to read value from the URL as seen in the sample: // inject activatedRoute constructor(private activeRoute: ActivatedRoute) { } // Read value from the observable this.activeroute -params ssubscribe((data) => console. log(data[id])); Conclusion Angular as a JavaScript framework has been evolving fast. From being an MV" framework in AngularJS 1.x, it has become a framework that approaches Ul development with reusable components, With Angular 2 and above (current version being 4.x) performance has improved and new features are continuously added. The newer versions are referred to as just Angular, instead of qualifying it with a version number. Angular with TypeScript has multitude of features that make development in JavaScript faster and easier. The article described some of the features to begin developing with Angular. Happy coding with the super heroic framework, Angular! Download this Angular cheat sheet (http:/www.dotnetcurry.net/s/dnc-mag-angular-cheatsheet) in a PDF format. References Angular documentation — https://angular.io/docs (https://angular.io/docs)

Você também pode gostar

• Ionic React Documentation

  

  Documento11 páginas

  Ionic React Documentation

  Iván Peralta

  Ainda não há avaliações
• Program Overview: #Datascience - Data Science in Iot

  

  Documento9 páginas

  Program Overview: #Datascience - Data Science in Iot

  Iván Peralta

  100% (1)
• Angular - Cheat Sheet

  

  Documento9 páginas

  Angular - Cheat Sheet

  Iván Peralta

  Ainda não há avaliações
• • Revistas
  • Podcasts
  • Partituras
• D75058GC20 Ep

  

  Documento326 páginas

  D75058GC20 Ep

  Iván Peralta

  Ainda não há avaliações
• Shoe Dog: A Memoir by the Creator of Nike

  

  No Everand

  Shoe Dog: A Memoir by the Creator of Nike

  Phil Knight

  Nota: 4.5 de 5 estrelas

  4.5/5 (537)
• The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life

  

  No Everand

  The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life

  Mark Manson

  Nota: 4 de 5 estrelas

  4/5 (5794)
• Hidden Figures: The American Dream and the Untold Story of the Black Women Mathematicians Who Helped Win the Space Race

  

  No Everand

  Hidden Figures: The American Dream and the Untold Story of the Black Women Mathematicians Who Helped Win the Space Race

  Margot Lee Shetterly

  Nota: 4 de 5 estrelas

  4/5 (895)
• The Yellow House: A Memoir (2019 National Book Award Winner)

  

  No Everand

  The Yellow House: A Memoir (2019 National Book Award Winner)

  Sarah M. Broom

  Nota: 4 de 5 estrelas

  4/5 (98)
• Grit: The Power of Passion and Perseverance

  

  No Everand

  Grit: The Power of Passion and Perseverance

  Angela Duckworth

  Nota: 4 de 5 estrelas

  4/5 (588)
• The Little Book of Hygge: Danish Secrets to Happy Living

  

  No Everand

  The Little Book of Hygge: Danish Secrets to Happy Living

  Meik Wiking

  Nota: 3.5 de 5 estrelas

  3.5/5 (400)
• The Emperor of All Maladies: A Biography of Cancer

  

  No Everand

  The Emperor of All Maladies: A Biography of Cancer

  Siddhartha Mukherjee

  Nota: 4.5 de 5 estrelas

  4.5/5 (271)
• Never Split the Difference: Negotiating As If Your Life Depended On It

  

  No Everand

  Never Split the Difference: Negotiating As If Your Life Depended On It

  Chris Voss

  Nota: 4.5 de 5 estrelas

  4.5/5 (838)
• The World Is Flat 3.0: A Brief History of the Twenty-first Century

  

  No Everand

  The World Is Flat 3.0: A Brief History of the Twenty-first Century

  Thomas L. Friedman

  Nota: 3.5 de 5 estrelas

  3.5/5 (2259)
• On Fire: The (Burning) Case for a Green New Deal

  

  No Everand

  On Fire: The (Burning) Case for a Green New Deal

  Naomi Klein

  Nota: 4 de 5 estrelas

  4/5 (74)
• Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future

  

  No Everand

  Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future

  Ashlee Vance

  Nota: 4.5 de 5 estrelas

  4.5/5 (474)
• A Heartbreaking Work Of Staggering Genius: A Memoir Based on a True Story

  

  No Everand

  A Heartbreaking Work Of Staggering Genius: A Memoir Based on a True Story

  Dave Eggers

  Nota: 3.5 de 5 estrelas

  3.5/5 (231)
• Team of Rivals: The Political Genius of Abraham Lincoln

  

  No Everand

  Team of Rivals: The Political Genius of Abraham Lincoln

  Doris Kearns Goodwin

  Nota: 4.5 de 5 estrelas

  4.5/5 (234)
• Devil in the Grove: Thurgood Marshall, the Groveland Boys, and the Dawn of a New America

  

  No Everand

  Devil in the Grove: Thurgood Marshall, the Groveland Boys, and the Dawn of a New America

  Gilbert King

  Nota: 4.5 de 5 estrelas

  4.5/5 (266)
• The Hard Thing About Hard Things: Building a Business When There Are No Easy Answers

  

  No Everand

  The Hard Thing About Hard Things: Building a Business When There Are No Easy Answers

  Ben Horowitz

  Nota: 4.5 de 5 estrelas

  4.5/5 (345)
• Yes Please

  

  No Everand

  Yes Please

  Amy Poehler

  Nota: 4 de 5 estrelas

  4/5 (1891)
• The Unwinding: An Inner History of the New America

  

  No Everand

  The Unwinding: An Inner History of the New America

  George Packer

  Nota: 4 de 5 estrelas

  4/5 (45)
• Rise of ISIS: A Threat We Can't Ignore

  

  No Everand

  Rise of ISIS: A Threat We Can't Ignore

  Jay Sekulow

  Nota: 3.5 de 5 estrelas

  3.5/5 (137)
• Principles: Life and Work

  

  No Everand

  Principles: Life and Work

  Ray Dalio

  Nota: 4 de 5 estrelas

  4/5 (599)
• Fear: Trump in the White House

  

  No Everand

  Fear: Trump in the White House

  Bob Woodward

  Nota: 3.5 de 5 estrelas

  3.5/5 (738)
• Angela's Ashes: A Memoir

  

  No Everand

  Angela's Ashes: A Memoir

  Frank McCourt

  Nota: 4.5 de 5 estrelas

  4.5/5 (440)
• Bad Feminist: Essays

  

  No Everand

  Bad Feminist: Essays

  Roxane Gay

  Nota: 4 de 5 estrelas

  4/5 (1016)
• Steve Jobs

  

  No Everand

  Steve Jobs

  Walter Isaacson

  Nota: 4.5 de 5 estrelas

  4.5/5 (806)
• The Glass Castle: A Memoir

  

  No Everand

  The Glass Castle: A Memoir

  Jeannette Walls

  Nota: 4.5 de 5 estrelas

  4.5/5 (1713)
• The Gifts of Imperfection: Let Go of Who You Think You're Supposed to Be and Embrace Who You Are

  

  No Everand

  The Gifts of Imperfection: Let Go of Who You Think You're Supposed to Be and Embrace Who You Are

  Brené Brown

  Nota: 4 de 5 estrelas

  4/5 (1090)
• John Adams

  

  No Everand

  John Adams

  David McCullough

  Nota: 4.5 de 5 estrelas

  4.5/5 (2409)
• The Outsider: A Novel

  

  No Everand

  The Outsider: A Novel

  Stephen King

  Nota: 4 de 5 estrelas

  4/5 (1839)
• The Light Between Oceans: A Novel

  

  No Everand

  The Light Between Oceans: A Novel

  M.L. Stedman

  Nota: 4.5 de 5 estrelas

  4.5/5 (789)
• Manhattan Beach: A Novel

  

  No Everand

  Manhattan Beach: A Novel

  Jennifer Egan

  Nota: 3.5 de 5 estrelas

  3.5/5 (792)
• The Sympathizer: A Novel (Pulitzer Prize for Fiction)

  

  No Everand

  The Sympathizer: A Novel (Pulitzer Prize for Fiction)

  Viet Thanh Nguyen

  Nota: 4.5 de 5 estrelas

  4.5/5 (121)
• The Woman in Cabin 10

  

  No Everand

  The Woman in Cabin 10

  Ruth Ware

  Nota: 3.5 de 5 estrelas

  3.5/5 (2322)
• Brooklyn: A Novel

  

  No Everand

  Brooklyn: A Novel

  Colm Tóibín

  Nota: 3.5 de 5 estrelas

  3.5/5 (1937)
• A Man Called Ove: A Novel

  

  No Everand

  A Man Called Ove: A Novel

  Fredrik Backman

  Nota: 4.5 de 5 estrelas

  4.5/5 (4610)
• The Perks of Being a Wallflower

  

  No Everand

  The Perks of Being a Wallflower

  Stephen Chbosky

  Nota: 4.5 de 5 estrelas

  4.5/5 (2104)
• Wolf Hall: A Novel

  

  No Everand

  Wolf Hall: A Novel

  Hilary Mantel

  Nota: 4 de 5 estrelas

  4/5 (3811)
• Little Women

  

  No Everand

  Little Women

  Louisa May Alcott

  Nota: 4 de 5 estrelas

  4/5 (104)
• Her Body and Other Parties: Stories

  

  No Everand

  Her Body and Other Parties: Stories

  Carmen Maria Machado

  Nota: 4 de 5 estrelas

  4/5 (821)
• The Art of Racing in the Rain: A Novel

  

  No Everand

  The Art of Racing in the Rain: A Novel

  Garth Stein

  Nota: 4 de 5 estrelas

  4/5 (4200)
• Sing, Unburied, Sing: A Novel

  

  No Everand

  Sing, Unburied, Sing: A Novel

  Jesmyn Ward

  Nota: 4 de 5 estrelas

  4/5 (1103)
• The Constant Gardener: A Novel

  

  No Everand

  The Constant Gardener: A Novel

  John le Carré

  Nota: 3.5 de 5 estrelas

  3.5/5 (104)
• A Tree Grows in Brooklyn

  

  No Everand

  A Tree Grows in Brooklyn

  Betty Smith

  Nota: 4.5 de 5 estrelas

  4.5/5 (1929)