2

Ember.js Application initializer() Method

 3 weeks ago
source link: https://www.geeksforgeeks.org/ember-js-application-initializer-method/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Ember.js Application initializer() Method

Last Updated : 10 Jul, 2022

Ember.js is a JavaScript web framework that utilizes a component-service pattern. It is Open-Sourced. The Ember Js Applications when booted up can use initializers to set up the environment and its functionality by the user.

Syntax:

ember generate initializer <initializer-name>

Attributes: The Initializer object has four attributes that are used to define its execution process:

  1. name: this is used to define the name of the initializer. This must be unique.
  2. before: this is used to ensure that the current initializer is run before the given initializer
  3. after: this is used to ensure that the current initializer is run after the given initializer
  4. initialize: this is used to call the initialize() function of the initializer object.

Method: 

  • initialize(): It is the function where the code which is to run during this initializer process is specified.

Create An Ember App: Now we need to create an Ember app. Go to the directory where you want to save the application and run the command:

ember create my-app
create.gif

Create Ember Application

Example 1: We will create an initializer ‘first’ which will be the first one to be called after the application starts.

Run the command:

ember generate initializer first

Add the following code in the first.js file created by the command in the initializer command.

  • Javascript
import { debug } from '@ember/debug';
export function initialize() {
debug('This is The First initializer!');
}
export default {
name: 'first',
initialize
};

Output:

This is The First initializer!

Example 2: If we want we can just use one initializer but in some situations, we might need more than one initializers. Then we need to define which initializer is executed in which order. Now to use the functionality of ‘before’ and ‘after’ we will create two more initializers ‘start’ and ‘second’.

Run the commands:

ember generate initializer second
ember generate initializer start

Now paste the following code into the second.js.

  • Javascript
import { debug } from '@ember/debug';
export function initialize() {
debug('This is The Second initializer!');
}
export default {
name: 'second',
after: 'first',
initialize
};

Now paste the following code in start.js:

  • Javascript
import { debug } from '@ember/debug';
export function initialize() {
debug('This is The Starting initializer!');
}
export default {
name: 'start',
before: 'first',
initialize
};

As we used the before attribute in start.js it is executed before first.js and second.js is executed after first.js because we used the after the keyword.

Run the command:

ember server

Output: Go To localhost:4200 and open the console to see the desired behavior.

initializersoutput.gif

Initializers Output

“This course was packed with amazing and well-organized content! The project-based approach of this course made it even better to understand concepts faster. Also the instructor in the live classes is really good and knowledgeable.”- Tejas | Deutsche Bank

With our revamped Full Stack Development Program: master Node.js and React that enables you to create dynamic web applications.

So get ready for salary hike only with our Full Stack Development Course.

Like Article
Suggest improvement
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK