EmberJS 环境配置
通过将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文件。