Learn Angular-cli, Mongodb and Nightmare

MongoDB has a quite powerful aggregation framework that allows you to write data processing pipelines. Documents in the MongoDB collection go through a series of stages or a pipeline that transforms them into an aggregated result. In this short video series, you will learn how to write aggregations in MongoDB.

mongodb

MongoDB Aggregation Framework

Aggregation in MongoDB is really powerful and allows you to create solid pipelines to extract and transform data. This is an introductory video that aims to demonstrate the basics of aggregation — we will see how to create some basic pipeline to extract data using `$match` and manipulate the output using `$project` stages.

The aggregation stages/operators covered in this video are:

* [`$match`](https://docs.mongodb.com/manual/reference/operator/aggregation/match/index.html)
* [`$project`](https://docs.mongodb.com/manual/reference/operator/aggregation/project/index.html)
* [`$concat`](https://docs.mongodb.com/manual/reference/operator/aggregation/concat/)

You can see the list of all the [available operators in the MongoDB docs](https://docs.mongodb.com/manual/reference/operator/aggregation/)


Find and Manipulate Data using Aggregation in MongoDB

In our last lesson, we learnt the basics of MongoDB aggregation and saw how we can [find and manipulate data](https://egghead.io/lessons/mongodb-find-and-manipulate-data-using-aggregation-in-mongodb). In this continuation, we will see how we can sort, skip and limit records during our aggregation stages.

The aggregation stages/operators covered in this video are:

* [`$sort`](https://docs.mongodb.com/manual/reference/operator/aggregation/sort/index.html)
* [`$skip`](https://docs.mongodb.com/manual/reference/operator/aggregation/skip/index.html)
* [`$limit`](https://docs.mongodb.com/manual/reference/operator/aggregation/limit/index.html)

You can see the list of all the [available operators in the MongoDB docs.](https://docs.mongodb.com/manual/reference/operator/aggregation/)

Sort, Skip and Limit Records in MongoDB Aggregation

Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks and more, out of the box.

mongoose

One of the great things about NoSQL databases is that you do not have to decide on your data schema while developing. As you get closer to production though, you'll often want to more clearly define the shape of the data you are working with.

Enforce Schemas in MongoDB using Mongoose Models

Unlike the relational databases, MongoDB doesn't allow you to join collections using the simple `find` queries, but you can write the join queries using the aggregation framework. In this lesson, we learn how to join two collections to get the data in the format we want.

The aggregation operators that we cover in this video are:

- [`$lookup`](https://docs.mongodb.com/manual/reference/operator/aggregation/lookup/index.html)
- [`$project`](https://docs.mongodb.com/manual/reference/operator/aggregation/project/index.html)
- [`$arrayElemAt`](https://docs.mongodb.com/manual/reference/operator/aggregation/arrayElemAt/index.html)

You can see the list of all the [available operators in the MongoDB docs.](https://docs.mongodb.com/manual/reference/operator/aggregation/)

Write Joins in MongoDB

[In our last lesson](https://egghead.io/lessons/mongodb-group-by-and-sum-in-mongodb?pl=mongodb-aggregation-framework-3e5d), we saw how we can use `$group` operator to simulate `GROUP BY` operations that you might be aware from SQL. A minor gimmick with `$group` is that it only works with the scalar field values and not arrays. There might be times when you would want to group by some array fields; in this lesson, we learn how to do that using `$unwind` operator

Here is the list of operators that we cover in this lesson:

- [$unwind](https://docs.mongodb.com/manual/reference/operator/aggregation/unwind/index.html)
- [$group](https://docs.mongodb.com/manual/reference/operator/aggregation/group/index.html)
- [$sort](https://docs.mongodb.com/manual/reference/operator/aggregation/sort/index.html)
- [$limit](https://docs.mongodb.com/manual/reference/operator/aggregation/limit/index.html)

You can see the list of all the [available operators in the MongoDB docs](https://docs.mongodb.com/manual/reference/operator/aggregation/).


Perform Group Operations on Array Fields in MongoDB

In this lesson, we learn how to group documents in a collection using `$group` operator similar to `GROUP BY` in SQL. We also look at `$sum` operator and see how we can use it to count the number of documents as well as get sum of some field in our grouped results.

Here is the list of operators that we cover in this lesson:

* [`$group`](https://docs.mongodb.com/manual/reference/operator/aggregation/group/index.html)
* [`$sum`](https://docs.mongodb.com/manual/reference/operator/aggregation/sum/index.html)
* [`$sort`](https://docs.mongodb.com/manual/reference/operator/aggregation/sort/index.html)

You can see the list of all the [available operators in the MongoDB docs](https://docs.mongodb.com/manual/reference/operator/aggregation/).


Group By and Sum in MongoDB

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Mongoose allows you to easily select resources by ID from your MongoDB. This is an important aspect to creating an API.

Select by ID with Mongoose and Express

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Learn how to import data into your MongoDB and then use Express to serve a simple Node.js API.

First API with Node.js, Express and MongoDB

Nightmare is a high-level browser automation library.

The goal is to expose just a few simple methods, and have an API that feels synchronous for each block of scripting, rather than deeply nested callbacks. It's designed for automating tasks across sites that don't have APIs.

nightmare

Many pages you'll want to grab data from will require you to log in first. This video demonstrates how to log in and grab whatever data off the page you will need.

Scraping Data from Sites with Login Forms with Nightmare

angular-cli

Generating components with the Angular CLI allows for scaffolding applications quickly. Learn what will be generated for you and how to generate quickly with shortcuts in the desired directory.

Generate components with the Angular CLI

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Getting started with angular development can be difficult, with a lot of moving parts. Allow the Angular CLI to handle those complexities so you can focus on creating great applications.

In this lesson you will learn how to install the Angular CLI from npm, create a new application, serve the new application in the browser and edit it with live-reload.

Install the Angular CLI to Create and Serve an Angular Application

Many websites have more than just simple static content. Dynamic content which is rendered by JavaScript requires browser to be able to scrape data. This video demonstrates how to use Nightmare (which is a wrapper around Electron) to launch a url and scrape dynamic data.

Scraping Dynamic JavaScript Websites with Nightmare

In this lesson we will our `UiModule`, that has a `LayoutComponent`, `HeaderComponent` and `FooterComponent`. 

We generate `UiModule` by running the following command:
```
ng generate module ui --module app
```

This generates the new module and imports it in our `AppModule`.

We'll create the `LayoutComponent` using:
```
ng generate component ui/containers/layout
ng generate component ui/containers/header
ng generate component ui/containers/footer
``` 

We update our `AppRoutingModule` and add this component to our first route to make it visible. 

The `HeaderComponent` and `FooterComponent` are referenced in the LayoutComponent and we implement the actual templates!

Create Application Layout with Components in an Angular CLI Project

In this lesson we will add the `ProductModule`, where our actual application code will live.

```
ng g m product --routing
``` 

We will add 2 routes to `AppRoutingModule`,  the first is a redirect route that redirects any unhandled paths to `products`. The second route is the actual `products` route, that 'lazy-loads' the `ProductModule`.

We use the `ng` command to create the `ProductListComponent` and `ProductDetailComponent`, which are so called 'containers components'.

Container components are responsible for fetching data, handling routes and passing data into the 'presentational components' 

We will add 2 routes to `ProductRoutingModule`,  one to each of our new Container Components.

Lastly we will use  `ActivatedRoute` in `ProductDetailComponent` to fetch the `:id` from the route.

Create Container Components for Retrieving Data in an Angular CLI Project

In this lesson we will create the presentational components for the product list and detail pages. These components define how the data is displayed and are being referenced from the Container components.

The new components are `ProductsComponent` and `ProductComponent`.

After using `ng generate` to generate these components, we will update the `ProductListComponent` to invoke `ProductsComponent` and pass in our local `products` array.

In `ProductsComponent` we loop over each of the items we get from the `@Input() products` and pass each one into our `ProductComponent`.

The `ProductComponent` has 2 `Inputs()`, one for the `Product` and a `boolean` that toggles showing the product details. This is useful because don't want to show product details in the list view.

After the `ProductComponent` is implemented the last step is to reference it from the `ProductDetails` container component. 

Create Presentational Components for Displaying Data in an Angular CLI Project

In this lesson we will create the `ProductsService` that is responsible for the interaction with our API. 

We will inject the `HttpClient` that we get from `@angular/common/http`. To make this working we need to import `HttpClientModule` in our `AppModule`.

We define a `getProducts` and `getProduct` method so we can get a list of products and an single product which we will use in respectively the `ProductList` and `ProductDetail` components. 

In both components we will use the `ngOnInit` lifecycle hook to invoke the methods on the service, and retrieve the data by subscribing to it. 

[Link to product api used in lessons](https://github.com/beeman/egghead-products-api)

Create an Angular Service to Retrieve Data from an API 

In our 'container components' we use the `ngOnInit` lifecycle hook to subscribe to our service. While this works, there is a downside: the components get loaded before the data is available, which results in that we show empty components. This is particularly visible on slow connections.

To fix this we create a `ProductsResolver`, and implement the `resolve` method that fetches the data from the service. In `ProductRoutingModule` we add the `resolve` property to our route, and add make the `ProductsResolver` resolve and store the data in the `products` property.

Inside our `ngOnInit` in `ProductListComponent` we can now subscribe to the route data, which makes the usage of the service in this component obsolete.

We do the same for the `ProductDetailComponent`. After this there are no longer empty components, the router will not navigate after the data is retrieved.

Create Angular Resolvers to retrieve the product data from the Service

In this lesson we will install the latest version of Angular CLI and use the `ng new` command to scaffold out the application.

Scaffold a New Angular App using Angular CLI

In this lesson we will add Bootstrap to our project. This allows us to focus on building our app without having to spend too much time writing custom CSS.

We will use grab the URL too the Bootstrap CSS from [bootstrapcdn.com](https://www.bootstrapcdn.com/)  and add it to our project by adding a `@import url('')` statement to `src/styles.scss`.

Add Bootstrap to an Angular CLI Project

The default Angular CLI configuration generates components that consist of 4 files. The component class, an HTML template, a stylesheet and a spec file that contains the unit test.

In order to keep our components concise we  update our `AppComponent` and move the template and style from an external file to inline. This allows us to delete the 2 external files. 

We can configure our project to generate the template and the style 'inline' by default.

To do this we run the commands:
```
ng config schematics.@schematics/angular.component.inlineStyle true
ng config schematics.@schematics/angular.component.inlineTemplate true
```

The changes are made to `angular.json` in the project root.


Topics

Instructors

Content Type