Ember.js quickly build an application project (1)

Steps:

1. Install Ember.
2. Create a new application.
3. Define the route.
4. Write a UI component.
5. Build your application to deploy to a production environment.

Installing Ember

You can use NPM (node. JS Package Manager, you need to install node. js) to install ember using a single command. Enter the following in the terminal:

Ember New Ember-quickstart

Create a new application

Once you have installed the Ember CLI via NPM, you will be able ember to access a new command in your terminal . You can use this ember new command to create a new application:

Ember New Ember-quickstart

This command will create a new directory, ember-quickstart and create a new Ember application in it. Your application will include:

• A development Server ember server.
• Handlebar Template compilation.
• JavaScript and CSS compression packages.
• Through the Babel ES2015 function (ES6).

By providing all the features you need, you can build a Web application for your production environment in your integration package, and Ember makes it possible to start a new project with ease.

Start Project

在终端中键入cdgo to the application directory ember-quickstart and type the following command to start the development server:

CD Ember-quickstartember serve

(To stop the server at any time, type ctrl-c in the terminal.) ）

in the browser of your choice Open http://localhost:4200 . you will see a Ember Welcome page where you have just created and booted your first Ember application.

we will start editing application The template changes the contents of the page: .

App/templates/application.hbs
123	{outlet}}

Defining Routes

Let's build an app page that shows the list, to do this is to create a route to switch.

ember with boilerplate code that can automate common tasks Generator . to generate a route, enter it in ember-quickstart the new terminal window in the project Files directory:

Ember Generate route scientists

The command created the following:

1. The template to display when the user accesses it /scientists.hbs .
2. One Route is to get the model object used by the template.
3. An entry in the application router (located app/router.js ).
4. Unit tests for this route.

Open the newly created template app/templates/scientists.hbs and add the following HTML:

App/templates/scientists.hbs
1

Open in your browser http://localhost:4200/scientists . You should see scientists.hbs templates in template application.hbs content :

{{outlet}} 

create a UI component

as your application (page routing) grows, you'll notice that you share UI elements across multiple pages, or use them multiple times on the same page. ember can easily refactor your templates into reusable components.

Let's create a people-list You can display a list of people by using components that are reused on multiple pages . Enter the following to create a new component:

Ember Generate Component People-list

Then scientists copy and paste the template into people-list The template for the component and edit it as follows:

App/templates/components/people-list.hbs
1234567	{{ title}} <ul> { {#each people as | person|}} <li>{{ person}} </li> {{/ each}} </UL>

App/templates/scientists.hbs
12345678	<ul> {{#eachModelAs|Scientist|}} <li>{{scientist}}</li> {{/each}}</ul>{ { People-list title="list of scientists" people=Model}}

Click events

so far, your application is listing data, but users cannot interact with the information. in a Web application, you often want to listen for user events such as click or hover.

Ember makes this easy to do, you just need to Add a action Event:

App/components/people-list.js
1234567	'@ember/component'; Default Component.extend ({actions: { Showperson (person) { alert (person); } }});

Packaging Projects

We have written our application and verified its role in development, and it is time to package the deployment to our users directly.

Use build the command packs all the asset classes that make up the application: JavaScript, templates, css,web fonts, images, etc. :

Ember Build--env Production

For details, please refer to the official website: https://guides.emberjs.com/v3.0.0/getting-started/quick-start/

Ember.js quickly build an application project (1)