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文件。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号