最近公司需要用到Ember.js做管理后台,所以学习一番。
一、环境搭建
开发Ember程序需要搭建Ember环境(windows)1、nodejs 2、安装npm 3、git 4、bower
1、安装nodejs
nodejs的安装需要到https://nodejs.org 去下载安装包,安装过程中自动添加path的系统环境变量,变量的值就是你的安装路径,这一步自动完成,不需要自己添加。输入"node -v"
查看版本
2、npm安装
由于新版的NodeJS已经集成了npm,所以在上一步npm也一并安装好了。以管理员身份运行cmd,输入 “npm -v”
3、git安装
git在Windows下需要下载安装包。最后输入“git --version”查看版本
4、bower 是Bower是Web的包管理器。Bower可以方便的管理应用的依赖,包括Ember和Ember Data。
npm install -g bower
到此为止,emberjs的环境搭建就完成了。
二、emberjs例子
1、通过ember new myemberjs创建一个名字为myemberjs的项目
2、通过bower install 命令添加依赖
3、通过ember s 命令运行程序
4、访问:http://localhost:4200
5、创建路由about
ember generate route about
6、创建模型about
ember g model about
7、在/app/routes/about.js添加代码
import Ember from 'ember';
//app/routes/about.js
export default Ember.Route.extend({
model: function() {
var blogPost = this.store.createRecord('about', {
title: 'title1', // 属性默认为string类型,可以不指定
intro: "intro1",
author: 'author1'
});
// 直接返回一个model
return blogPost;
},
setupController: function(controller, model){
controller.set('content', model)
}
});
8、在/app/templates/about.hbs修改为
<h1>{{model.title}}</h1>
<h2>{{model.author}}</h2>
<div class="intro">
{{model.intro}}
</div>
<hr>
9、修改app/models/about.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr(),
intro: DS.attr(),
author: DS.attr()
});
这里我举了个小例子将数据通过model的数据在页面中渲染。以后会进行深入了解。