Learn Angular-cli, Tweenlite and Webstorm

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

Setting up a React Playground Dev Environment

Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

webstorm

John Lindquist is a WebStorm wizard. In this lesson, he'll show you some of the tips & tricks he uses to squeeze maximum productivity out of his tool of choice. 

Tips & Tricks

You can easily share your code from WebStorm with others using the "Create Gist" feature. This lesson walks you through how to create a gist from a single or multiples files and also how to use gist.run to share a running version of your code

WebStorm - Sharing a Gist

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

WebStorm can save you tons of time by managing your imports for you. John walks you through a few key WebStorm importing tips to help speed up your importing workflow.

WebStorm - Managing Imports

A quick tutorial covering installing Karma and running tests from the command line and Webstorm.

Introduction to Karma

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application.

3d Animations with Greensock TweenLite

In this lesson John shows some tricks for speeding up your test suite. He digs into some handy features of WebStorm, including the *ddescriber* plugin, as well as some alternative methods for Jasmine for selectively running your tests.

Speed Testing with WebStorm and Jasmine

In this lesson, we'll walk through installing a custom color scheme into our [WebStorm](https://www.jetbrains.com/webstorm/) IDE. Dayle Rees's [daylerees/colour-schemes](https://github.com/daylerees/colour-schemes/blob/master/jetbrains/peacocks-in-space.icls) has a great collection of themes ready to install in different formats for various editors.

For this example, we will install the [Peacocks In Space](https://github.com/daylerees/colour-schemes/blob/master/jetbrains/peacocks-in-space.icls) theme into an OS X [WebStorm 11 EAP](https://confluence.jetbrains.com/display/WI/WebStorm+EAP) installation. _Note: This process will be very similar (or identical) for previous versions of WebStorm and other editors in the [JetBrain's family of editors](https://www.jetbrains.com/)._

WebStorm - Installing Custom Color Schemes (dayleress/colour-schemes)

WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.

WebStorm - Setting Up Angular 2

grunt

In this lesson you will install GruntJS and get up and running with your first task, initial configuration, and how to get Grunt methods auto-completing in WebStorm.

Introduction to Grunt

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.


Configure Defaults for Generating Code with Angular CLI

A default Angular application ships with two default environment files that can store constants that are different for each environment, one for development and the other for production.

We will define the `apiUrl` constant in both development and production environments. 

The value for development is  `http://localhost:3000/api` and the value for production is `https://egghead-products-api.now.sh/api` .

In `angular.json` we can find a `configurations` object where our `production` build is defined. We can see that in a production build, the `environment.prod.ts` will replace `environment.ts`.

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

Topics

Instructors

Content Type