home
  • Blog
1.10
  • Getting Started
    • Getting Started
    • Planning The Application
    • Creating a Static Mockup
    • Obtaining Ember.js and Dependencies
    • Adding the First Route and Template
    • Modeling Data
    • Using Fixtures
    • Displaying Model Data
    • Displaying a Model's Complete State
    • Creating a New Model Instance
    • Marking a Model as Complete or Incomplete
    • Displaying the Number of Incomplete Todos
    • Toggling between Showing and Editing States
    • Accepting Edits
    • Deleting a Model
    • Adding Child Routes
    • Transitioning to Show Only Incomplete Todos
    • Transitioning to Show Only Complete Todos
    • Transitioning back to Show All Todos
    • Displaying a Button to Remove All Completed Todos
    • Indicating When All Todos Are Complete
    • Toggling All Todos Between Complete and Incomplete
    • Replacing the Fixture Adapter with Another Adapter
  • Getting Ember
  • Concepts
  • The Object Model
  • Application
  • Templates
  • Routing
  • Components
  • Controllers
  • Models
  • Views
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Cookbook
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.10.0.
Go to v5.0.0

Obtaining Ember.js and Dependencies

Edit pencil

TodoMVC has a few dependencies:

  • jQuery
  • Handlebars
  • Ember.js
  • Ember Data 1.0 beta

For this example, all of these resources should be stored in the folder js/libs located in the same location as index.html. Update your index.html to load these files by placing <script> tags just before your closing </body> tag in the following order:

<!-- ... additional lines truncated for brevity ... -->
  <script src="js/libs/jquery-1.11.2.min.js"></script>
  <script src="js/libs/handlebars-v1.3.0.js"></script>
  <script src="js/libs/ember.js"></script>
  <script src="js/libs/ember-data.js"></script>
</body>
<!-- ... additional lines truncated for brevity ... -->

Reload your web browser to ensure that all files have been referenced correctly and no errors occur.

If you are using a package manager, such as bower, make sure to checkout the Getting Ember guide for info on other ways to get Ember.js (this guide is dependant on ember-data v1.0 or greater so please be sure to use the latest beta/).

Live Preview

Ember.js • TodoMVC

Additional Resources

  • Changes in this step in diff format
left arrow
Creating a Static Mockup
Adding the First Route and Template
right arrow
On this page

  • Live Preview
  • Additional Resources
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue