Ember.js Cookbook

Ember.js Cookbook

By : Erik Hanchett

Buy this Book

Ember.js Cookbook

By: Erik Hanchett

Buy this Book

Overview of this book

Ember.js is an open source JavaScript framework that will make you more productive. It uses common idioms and practices, making it simple to create amazing single-page applications. It also lets you create code in a modular way using the latest JavaScript features. Not only that, it has a great set of APIs to get any task done. The Ember.js community is welcoming newcomers and is ready to help you when needed. This book provides in-depth explanations on how to use the Ember.js framework to take you from beginner to expert. You’ll start with some basic topics and by the end of the book, you’ll know everything you need to know to build a fully operational Ember application. We’ll begin by explaining key points on how to use the Ember.js framework and the associated tools. You’ll learn how to effectively use Ember CLI and how to create and deploy your application. We’ll take a close look at the Ember object model and templates by examining bindings and observers. We’ll then move onto Ember components, models, and Ember Data. We’ll show you examples on how to connect to RESTful databases. Next we’ll get to grips with testing with integration and acceptance tests using QUnit. We will conclude by covering authentication, services, and Ember add-ons. We’ll explore advanced topics such as services and initializers, and how to use them together to build real-time applications.

Ember.js Cookbook

Credits

About the Author

About the Reviewer

www.PacktPub.com

Preface

Free Chapter

Ember CLI Basics

Introduction

Installing Ember CLI

Creating your first project

Exploring pods and the folder layout

Asset compilation

Dependency management

Upgrading your project

Deployment

The Ember.Object Model

Introduction

Working with classes and instances

Working with computed properties

Working with Ember observers in Ember.js

Working with bindings

Using mixins

Using enumerables with arrays

Ember Templates

Introduction

Defining an application template

Working with conditionals in templates

Displaying a list of items

Binding with element attributes and classes

Working with HTML links inside templates

Handling HTML actions

Using template input helpers

Using development helpers

Ember Router

Introduction

Defining an application route

Setting up a route model

Handling dynamic segments inside routes

Defining routes with templates

Using redirection with routes

Working with asynchronous routing

Loading and error handling

Using query parameters

Ember Controllers

Introduction

Storing application properties

Handling actions in controllers

Working with transitions

Managing dependencies between controllers

Ember Components

Introduction

Using components in an application

Using events in components

Implementing actions in components

Passing properties to a component

Using yield with components

Ember Models and Ember Data

Introduction

Understanding the functionalities of Ember Data

Creating, reading, updating, and deleting records with Ember Data

Using fixtures

Customizing the adapter and serializer

Working with relationships

Logging, Debugging, and Testing

Introduction

Using Ember.Logger

Using Ember Inspector

Verifying deprecations and using advanced features of Ember Inspector

Using acceptance testing

Real-Life Tasks with Ember.js

Introduction

Using services with a component

Managing basic authentication

Using OAuth2 with Ember Simple Auth

Using Liquid Fire to create transitions

Working with HTML5 drag and drop

Learning Bootstrap with Ember.js

Awesome Tasks with Ember

Introduction

Using Ember validations

Using D3.js with Ember.js

Using Ember with Sockets

Using Ember with Firebase

Using server side rendering

Real-Time Web Applications

Introduction

Using dependency injection

Working with application initializers

Building a chat application

Creating and working with add-ons

Learning the Ember run loop

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Installing Ember CLI

The installation of Ember CLI is essential to learning Ember and will be used throughout this book.

Getting ready

Before the installation of Ember CLI, we must have the Node Package Manager (npm) installed. npm is a package manager for JavaScript and is installed by default with Node.js.

You must install version 0.12 or later of Node.js for Ember CLI to run. If you can, try to install version 4.0.0 or higher. This is the preferred version.

Node.js is available in several major platforms including Windows, Mac, and Linux. There are several ways to install Node.js:

One-click installers: Many platforms such as Windows and Mac have this available
Homebrew or MacPorts: This is useful for Mac OS users
Download TAR file: Download a TAR file of Node.js and extract
Install via the Linux package management system: Yum, apt-get, or pacman can be used to install on a Linux environment

A one-click installer for Windows or Mac

This method is by far the easiest. To install node, you'll need to open the node website at http://nodejs.org/download. Click on the pkg, msi, or exe installer for Windows or Mac. Run it after it's downloaded.

Homebrew or MacPorts for Mac

If you already have Homebrew installed, just run the following command:

$ brew install node

On the other hand, if you are running MacPorts, you can use the port install command:

$ sudo port install nodejs

Tip

MacPorts can be installed from http://www.macports.org. Homewbrew can be installed from http://brew.sh. Both offer simple package management for OS X systems.

A TAR file

A TAR file is a type of archive file. To install node via a TAR, you will need to download the TAR file from the Node.js website and extract and install it. One way of doing this is to use curl.

I would only recommend this method if you are using a Linux distribution. If you are running on Linux, you'll need the right tools installed to compile from source. On Ubuntu, you'll need to install the build-essential and curl packages:

$ curl http://nodejs.org/dist/node-latest.tar.gz | tar xz --strip-components=1
$ ./configure
$ sudo make install

The Linux package manager

All major Linux distributions offer Node.js packages. In Ubuntu, you can simply use apt-get:

$ sudo apt-get install nodejs

In Fedora, you can use yum:

$ yum install nodejs npm

Check with your Linux distribution to find out more details on how to install packages such as Node.js. Be aware that some distributions might offer outdated versions of Node.js. In this case, I would recommend that you use the Node Version Manager (NVM) installation method that will be discussed later.

Test installation

To test your installation, run the –v command:

$ node –v
$ npm –v

This will show the current installed version. Keep in mind that you must run v0.12 or above to run Ember CLI. If possible, try to run v4.0.0 or above.

Tip

The NVM is a bash script that helps manage multiple active Node.js versions. NVM offers a very simple command-line interface to install any version of Node.js without having to visit the Node.js website. It separates each installation making it very easy to change between versions. I would recommend most beginners on Mac and Linux to run this. You can download NVM at https://github.com/creationix/nvm.

How to do it...

We'll need to use npm to install Ember CLI. We'll install it globally with the –g option so that it can be run anywhere from the command line.

Open the command prompt and type the following command:
```
$ sudo npm install –g ember-cli
```
If NVM was installed, you don't need sudo at the start of the command.
After Ember CLI is installed, we'll need to download Bower. Bower is a package manager for client-side programming and another essential component of Ember.js. Node.js and npm must be installed before beginning the installation of Bower. We'll be using Bower to install all our client-side libraries:
```
$ sudo npm install –g bower
```
Similar to the last command, you don't need sudo at the start of the command if Node.js was installed via NVM.
The last step is to install PhantomJS. PhantomJS is a scripted headless browser used to automate and test web pages. It's preferred by Ember CLI and needs to be installed:
```
$ npm install –g phantomjs
```
If you are on Windows, install the Ember CLI Windows tool:
```
$ npm install ember-cli-windows –g
```
Once installed, this tool can be run in any project directory:
```
$ ember-cli-windows
```
Make sure to download and install Git for Windows: https://git-scm.com/downloads
Note
Working with Windows
Build times on Windows can be longer then Mac or Linux. The Ember CLI Windows tool can help speed up and optimize build performance. Just run it in the project directory. You can also download it as an add-on instead.
Another way to help with performance is to always run PowerShell/CMD with elevated privileges. Otherwise, performance issues and errors might occur. Lastly, try to use npm version 3 or higher. You may run into issues with long file paths with older versions in Windows.
Another handy tip is as follows:
Tip
Optional: Install Watchman
Watchman is a file-watching service for OS X and UNIX-like operating systems. It was developed by Facebook and is a more effective way for Ember CLI to watch project changes. If it's not installed, Ember CLI will fall back to using NodeWatcher. NodeWatcher is more error-prone and has trouble observing large trees. Install Watchman if your platform supports it. To download and configure Watchman, visit https://facebook.github.io/watchman/.

How it works...

Ember CLI is written in Node.js and can be installed via npm. The tool interprets commands from the user to help create an Ember.js application. Each command from the user is looked up and then executed. Ember CLI relies on several other dependencies including Bower, Lodash, Broccoli, and Babel, to name a few.

There's more...

Let's take a look at commands and aliases.

Commands

Once Ember CLI is installed, we'll have access to several commands. Here is a short list of some of the more important ones:

Command	Purpose
`ember`	This prints a list of available commands
`ember new <name-of-app>`	This creates a directory called `<name-of-app>` and creates the application structure
`ember init`	This creates an application in the current directory
`ember build`	This builds the application in the `/dist` folder
`ember server`	This starts a web server
`ember generate <generator-name>`	This runs a generator that builds scaffolding for the project
`ember destroy <generator-name>`	This uninstalls the module that was created by the generator
`ember test`	This runs tests using Testem
`ember install <addon-name>`	This installs add-ons

Aliases

Keep in mind that for every command, there is an alias. These aliases make it a little quicker to run commands. Suppose that you wanted to build a new project. Normally, you would type this:

$ ember build

This will work and is fine. It will generate a new project and application structure. You can also use an alias.

$ ember b

Here is a list of some common aliases that you can use. This is optional.

Command	Alias
`ember build`	`ember b`
`ember generate`	`ember g`
`ember init`	`ember i`
`ember server`	`ember s`
`ember destroy`	`ember d`
`ember test`	`ember t`
`ember version`	`ember v`

Ember.js Cookbook

By : Erik Hanchett

Ember.js Cookbook

By: Erik Hanchett

Overview of this book

Related Content you might be interested in

Current Title:

Ember.js Cookbook

Installing Ember CLI

Getting ready

A one-click installer for Windows or Mac

Homebrew or MacPorts for Mac

Tip

A TAR file

The Linux package manager

Test installation

Tip

How to do it...

Note

Tip

How it works...

There's more...

Commands

Aliases