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

Dependency management

Let's look at dependency management and how we can use it in our Ember projects.

How to do it...

Bower is used for dependency management for Ember CLI. Bower is a frontend tool that is used to help fetch and install packages that you might need.

The bower.json file is located in the root folder of your project. It contains all the dependencies. Let's say that we want to install the Bootstrap library:
```
$ bower install bootstrap --save
```
This command will install bootstrap in the bower_components folder and save the package information in the bower.json file.
Tip
Ember add-ons
Another popular way of adding third-party libraries to Ember is using add-ons or addons as you sometimes see it. An add-on is Ember's way of sharing libraries between applications. There are well over a thousand of them available.
You can install add-ons using Ember CLI. For example, to install Bootstrap, you'd type this on the command line in the project directory:
$ ember install ember-bootstrap
You can easily find a list of add-ons at these websites:
http://www.emberobserver.com
http://www.emberaddons.com
This will be discussed in more detail in the Working and creating add-ons recipe in Chapter 11, Real-Time Web Applications.
If, for some reason, you need to reinstall your dependencies, you can run the install command by itself:
```
$ bower install
```
This will install all dependencies that are listed in the bower.json file.

The app.import code

Ember CLI allows you to load Asynchronous Module Definition (AMD) and non-AMD assets. It's a way of defining code modules and their dependencies.

To load a non-AMD asset, you'll need to import it using the ember-cli-build.js file:
```
…
app.import('bower_components/moment/moment.js');
```
This is useful as you can use Bower to install components, and then use the app.import AMD so that it's available in the program. You'll need to consult the package specification to see how to use it.
Tip
Tip on JSHint
JSHint is a community-driven tool that detects errors and potential problems with JavaScript code. It's built-in in Ember CLI. When using non-AMD assets, you may get errors with JSHint if you have global variables. To fix this, add /* global MY_GLOBAL */ at the top of your module page. In the moment example, it would look like /* global moment */.

AMD assets are imported in a similar way. You add the path in the first argument and a list of exports and modules in the second:

app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
  exports: {
    'ic-ajax': [
      'default',
      'defineFixture',
      'lookupFixture',
      'raw',
      'request',
    ]
  }
});

To use this asset in your application, you can import it as follows:
```
import { raw as icAjaxRaw } from 'ic-ajax';;
```

How it works...

Dependency management is done via Bower. After the dependency is installed, the Broccoli library is called on to add the assets to the pipeline. Both these tools are written in node and are built-in in Ember CLI.

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

Dependency management

How to do it...

Tip

The app.import code

Tip

How it works...