Ember.js创建应用程序

EmberJS 是一个开源的JavaScript框架。它是一个非常高效的框架，用于构建Web应用程序。它遵循MVC架构。EmberJS应用程序准备好用于专业级应用程序，它们配备了许多内置工具，使任务更容易。一些工具包括：

构建管道
路由
数据层
单元测试

特点：

MVC模式
客户端渲染
高性能
模板机制
URL支持

安装Ember CLI： 首先，我们需要使用npm（Node.js包管理器）安装Ember。因此，在终端中运行以下命令。

npm install -g ember-cli

这将在我们的系统上全局安装Ember.js CLI。从现在开始，无论我们在系统的哪个位置，都可以创建Ember应用程序。请注意，npm软件包管理器随Node.js一起提供。您需要在系统中安装Node.js才能使用Ember应用程序。

Ember.js创建应用程序

创建新应用程序：

Ember.js使用以下命令来创建新的应用程序。有些导航到您想要的目录，Ember会自动创建一个包含所有已安装文件的文件夹。

ember new ember-tutorial-gfg

这将创建一个名为 ember-tutorial-gfg 的新文件夹。打开该文件夹中的代码编辑器以开始编辑所创建的项目。

注意：安装过程可能需要几分钟的时间，具体取决于您的电脑。

项目结构： 项目的结构应该类似于以下内容。

Ember.js创建应用程序

理解项目结构：

app： 这个文件夹包含应用程序的UI和模型相关的文件。
config： 这个文件夹包含ember应用程序的配置文件。
node_modules： 这个文件夹包含项目所需的node模块。
public： 这个文件夹包含用于托管的文件。
tests： 这个文件夹包含用于单元测试的文件。
vendor： 第三方插件或依赖项应放置在此文件夹中。
app文件夹： 在这个文件夹中，我们主要关注开发我们的第一个应用程序。你的app文件夹应该如下所示：

Ember.js创建应用程序

你可以检查组件、控制器、助手、模型和路由只包含.gitkeep文件。styles文件夹中有一个app.css文件，templates文件夹中有一个application.hbs文件。这是Ember应用的经典结构，我们将继续使用这个结构。

运行应用： 在终端/命令提示符中输入以下命令来运行应用：

ember serve

这将构建应用程序并默认在 http://localhost:4200 上提供网站。您还可以在Ember.js的文档或项目文件夹中的README.MD文件中找到更多详细信息。

项目构建完成后，您将找到类似以下的输出。任何更改都会自动更新，类似于React.js项目。

Ember.js创建应用程序

现在打开任何浏览器并导航到 http://localhost:4200/ ，并查看结果。您将看到以下网页。

Ember.js创建应用程序

示例： 创建一个基本的EmberJS应用程序。

文件名：application.hbs

HTML

{{page-title 'EmberTutorialGfg'}} 
<h1 id='body-title'>Welcome to GeeksforGeeks Ember Tutorial</h1> 
<h4 id='body-subtitle'>Creating first website using Ember.js</h4> 
{{outlet}}

文件名: app.css

输出: 网站将如下所示。

Ember.js创建应用程序

说明： app.css 文件是不言自明的，但我们需要理解 application.hbs 文件。

{{page-title 'EmberTutorialGfg'}}

这是设置我们网页标题的部分。然后是我们网页的内容。最后，我们有 {{outlet}}, 用于路由目的。

创建一个路由： 现在我们将为我们的网站创建另一个路由，即“关于”页面。在这里您可以提供关于我们网站的一些细节。在终端/命令提示符中，输入以下命令。

ember generate route about

Ember.js创建应用程序

它将创建三个文件并更新router.js文件。请按以下方式编辑它们。

app/templates/about.hbs

{{page-title 'About'}} 
<h2>Tutorial</h2> 
<h3>Data Structures and Algorithms</h3> 
<h4 class='contents'> 
  <a href='https://www.geeksforgeeks.org/data-structures/?ref=shm'>Data 
    Structures</a> 
</h4> 
<h4 class='contents'> 
  <a
    href='https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm'
  >Algorithms</a> 
</h4>

文件名：app/styles/app.css

现在导航到 http://localhost:4200/about, 结果将如下所示。

Ember.js创建应用程序

我们的关于页面出现在application.hbs的内容之下，这是因为我们在application.hbs文件底部提供了{{outlet}}，它将不同路由的内容放置在此处。

将路由添加到application.hbs： 我们可以使用LinkTo标签将任何路由链接到任何模板页面。

文件名：app/templates/application.hbs

HTML

{{page-title 'EmberTutorialGfg'}} 
<h1 id='body-title'> 
  Welcome to GeeksforGeeks Ember Tutorial 
</h1> 
<h4 id='body-subtitle'> 
  Creating first website using Ember.js 
</h4> 
<div class='navigation'> 
  <LinkTo @route='home' class='navigation-item'> 
    Home 
  </LinkTo> 
  <LinkTo @route='about' class='navigation-item'> 
    About 
  </LinkTo> 
</div> 
{{outlet}}

文件名： app/router.js

Javascript

import EmberRouter from '@ember/routing/router'; 
import config from 'ember-tutorial-gfg/config/environment'; 
  
export default class Router extends EmberRouter { 
  location = config.locationType; 
  rootURL = config.rootURL; 
} 
  
Router.map(function () { 
  this.route('home', { path: '/' }); 
  this.route('about'); 
});

文件名：app/styles/app.css

输出：

Ember.js创建应用程序