阅读(12.3k) 书签赞(1) 我要纠错

EmberJS 环境配置

2021-11-29 10:55 更新

通过将JavaScript库文件包含在HTML文件中的<script>标记中，可以轻松配置Ember.js;这可以通过以下两种方式完成：

您可以从其官方网站下载最新版本的Ember.js JavaScript库文件。
您可以从官方网站包括最新版本的CDN。

下载JavaScript库

在安装emberjs之前，它应该要求在具有兼容浏览器的系统上安装nodejs。在nodejs命令行界面中使用以下命令安装emberjs：

npm install -g ember-cli

要创建应用程序，请使用以下命令 -

ember new my-app

CDN来自官方网站

CDN或内容传送网络是设计为向用户提供文件的服务器网络。如果您在网页中使用CDN链接，它将托管文件的责任从您自己的服务器迁移到一系列外部服务器。这也提供了一个优点，如果您的网页的访问者已经从相同的CDN下载了Ember.js的副本，则不必重新下载。

在使用Ember.js时，你需要把这些CDN的js文件引入：

jQuery
Handlebars
Ember.js

所有CDN都从这里获取

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"</script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="https://builds.emberjs.com/release/ember.debug.js"></script>
<script src="https://builds.emberjs.com/beta/ember-data.js"></script>

以下是成功生成的不同软件包：

ember.debug.js：这是一个完整的开发版本。它包括几乎所有的包。
jQuery-2.1.3.min.js：它删除不必要的字符，使文件大小更小。
ember.prod.js：生产文件删除任何调试语句和/或断言。它包括所有包，除了：

handlebars.min.js
ember.debug.js

handlebars.min.js：它用于有效地构建语义模板。
ember-template-compiler.js：模板编译器可以用于服务器端进行预编译。
ember-data.js：它用于处理Ember数据。

在本教程程序的所有章节中，我们引用了Ember.js JavaScript库的最新CDN。

例子

让我们创建一个使用Ember.js一个简单的例子：

<!DOCTYPE html>
<html>
   <head>
      <title>Ember.js Application example</title>
      <!-- CDN's -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <!-- Your JavaScript -->
      <script type="text/x-handlebars">
         <!-- this is default application template -->
          <h1>{{App.name}}</h1>
          {{outlet}}
      </script>

      <script type="text/javascript">
         //App is the object of the Ember.Application
         //create() is the constructor of the Ember.Application
         App = Ember.Application.create();

         //App.name is the variable that holds the string values
         App.name= "Hello... Welcome to TutorialsPoint";
      </script>
   </body>
</html>

代码中的注释是自解释的。代码的一些更多细节如下：

App.name是一个变量，它保存要使用Handlebars在Web浏览器上显示的String值。

输出

让我们执行以下步骤，看看上面的代码如何工作：

将上面的代码保存在hello_emberjs.html文件中
在浏览器中打开此HTML文件。

以上内容是否对您有帮助：

← EmberJS 概述

EmberJS 应用 →

写笔记

我要补充