What Is Ember.js?
Previously Ember.js is known as SproutCore MVC frameworks.
What Is Ember.Namespace.Class?
Ember CLI commands -
Ember.js is a free, open source, front-end
technology based on MVC (Model View Controller) pattern and written in
JavaScript.
Ember.js was developed by Yehuda Katz in Dec 08, 2011. Now upgraded versions are take care by
Ember core team.
Ember.js allows developers to create scalable,
single page applications by incorporating common practice.
In the Ember.js -
·
Route is used as model
·
Template as view and
·
Controller manipulates the data in
the model
Previously Ember.js is known as SproutCore MVC frameworks.
Why you use Ember.js?
1. Open
source JavaScript framework
2. Flexible
framework that embraces the concept of fast web page
3. It
has smaller size as compare to other library
4. Data
binding Support
What Are the Features of Ember.js?
1. Creating
reusable modules
2. Easy
to configure
3. Handlebars
Templates
4. Automatic
determines the route and controller during declaration of the route resources
5. Used
routes
What Are the benefits of using Ember.js?
1. It
is free and open-source.
2. Unlimited
access
3. It
doesn’t need server requests to perform its task
4. DOM
can directly be updated
How to install Ember using npm?
npm install -g ember-cli
How to get to know the Version of Ember?
ember –v
What Is npm install?
NPM is a Node.js package manager. It is used to
install the node programs.
How to Install NPM on windows?
Download for Windows (x64) by using the URL -
https://nodejs.org/en/
Write the steps to create an app in Ember.js?
Steps -1, Install NPM are a Node.js package
manager.
Install an ember-cli
Steps -2, Create a new application by using –
ember new projectName
Steps -3, Create components by using –
ember g component
Steps -4, Define your routes in router
What Are different commands available in ember-cli?
The below commands is use to display the list of
-
ember g route about
What Are the core concepts of Ember.js?
1. Store
- It is central repository and cache records which are available in the apps.
It also can be accessed by controller.
2. Models
- A model is a class which defines the data of properties and its behavior.
3. Records
- A record is an instance of a model which contains information that is loaded
from a server.
4. Adapter
- It is responsible for translating requested records into the appropriate
calls.
5. Serializer
- Translating JSON data into a record object.
6. Automatic Caching
– It is used for caching the records
What Are basic models of Ember.js?
1. Routes
- State of application is represented by URL and each URL has a corresponding
route object that.
2. Models-
Use to load data from Server.
3. Templates
- This is html of layout.
4. Components
- It is custom tag.
5. Services
- Services are just singleton objects to hold long-lived data such as user
sessions
What Is Ember data?
Ember data is a data management library that
retrieves records from a server, store them, and update them in the browser and
save them back to the Server.
We can generate ember-data model using Ember CLI.
The main purpose of ember-data is -
1. Easily
retrieve records from a server
2. Cache
the data for increase the performance of apps.
3. Create
new records on the client, if required.
What is Application Template?
Application Template is html of layout that
contains the header, footer and body of page. A template can contain multiple
templates.
What are different template components in Ember.js?
1. Partial
2. View
3. Render
4. Yield
5. Outlet
What Is Ember.Namespace.Class?
The Ember.Namespace.Class is used to define an
object which contains other objects and data.
What Is ember.mixin class?
The Ember.mixin class can create objects that are
methods and properties can be shared with other classes and instances.
Is it possible to define a new Ember class?
Yes, it is possible! We can define an extent ()
method to achieve this. There is no limit on defining the same in some special
cases.
What Is the directory structure in Ember.js?
Directory structure of a project -
1. I-app
- It contains models, components, routes, templates, and styles files.
2. I-bower_components/ bower.json
- it used to manage front-end plugins and components.
3. I-config
- This is the configure settings sections where store all environments related
info.
4. I-dist
- The output files are created here, when your app is build.
5. I-node_nodules/package.json
- It is a directory and npm files.
6. Public
- This directory contains assets such as image and fonts.
7.
Vendor
8. Tests/testem.js
- This is automated tests for our app.
9. Tmp
- Ember CLI's temporary files.
10. Ember-cli-build.js
- This file tell us how CLI should build our app.
What Is ember Router?
Router is basically a medium that connects the
application with browser’s address.
In other words, Router takes the responsible for
connecting point between browser’s address bar and our application.
The Router using a route and resource might look
like -
App.Router.map(function() {
this.resource("posts", { path: "/" }, function() {
this.route("new", { path: "/new" });
});
this.route("another", { path: "/another" });
});
What Is ember route?
Route is a location where the request of a user
reaches first after it is made or translated by a Router.
Route decides what data should be provided to the
Template.
Example -
App.Router.map(function() {
this.resource("posts", { path: "/" }, function() {
this.route("new", { path: "/new" });
});
this.route("another", { path: "/another" });
});
Other example -
App.Router.map(function() {
this.resource("posts", { path: "/" }, function() {
this.resource("post", { path: "/:post_id" }, function() {
this.route("edit", { path: "/edit" });
});
this.route("new", { path: "/new" });
});
});
How to create multiple nested resources?
Example for multiple nested resources -
App.Router.map(function() {
this.resource("posts", { path: "/" }, function() {
this.route("new", { path: "/new" });
this.resource("comments", { path: "/comments" }, function() {
this.route("new", { path: "/new" });
});
});
this.route("another", { path: "/another" });
});
How can you generate a route in ember.js?
We can generate a route using Ember CLI.
Defining Your Routes -
ember generate route route-name
Steps -
1. Installing
route
2. Create
app/routes/about.hbs
3. Create
app/templates/about.hbs
4. Updating
router
5. Add
route about
6. Installing
route test
Ember CLI commands -
ember generate route about
//OR
ember g route about
//OR
//You can generate certain blueprints with a pods structure by passing
the --pod option -
ember generate route about –pod
It looks like -
installing route
create app/routes/about.js
create app/templates/about.hbs
updating router
add route about
installing route-test
create tests/unit/routes/about-test.js
Other commands are -
ember g resource events
ember g route events/view
Example looks like -
App.Router.map(function() {
this.resource('events', function() {
this.route('view', { path: "/view/:id" });
})
});
What Are enumerable in ember.js?
An enumerable is any object in ember.js which
contains a number of child objects and allows us to work with those children
using “ember.enumerable” API.
What Are services in ember.js?
An Ember.Service is a class singleton object that
holds on to state. It's never destroyed as long as the application runs.
Services are generated with the help of ember
CLI service generator.
Services can be helpful in diffrents situations
i.e.
1. Session
Data
2. Server-sent
events or notifications
3. APIs
that talk to a server
4. Web
Sockets
5. Geo
Location data
6. Events
pushed from a server
7. Third-party
APIs
8. Logging
Example - Services must extend the Ember.Service
base class
import Ember from 'ember';
export default Ember.Service.extend({
});
Is it possible for the users to modify the objects without
changing the model of model under concern?
Yes, it is possible!
What Are the common functions that you can find in the Ember
Package?
1. Empty
2. isEqual
3. Compare
4. Typeof
5. isArray
6. Inspect
7. Log
Binding - It is a Boolean function in Ember.js
8. And
many more
What Is the use of Ember.TrackedArray?
The Ember.TrackedArray is used for tracking Array
operations.