这篇文章是写在公司项目结束之后的，因为我个人不太会把没有实践过的东西写出来，实践是检验真理的唯一标准么，用的怎么样，好不好用，在成熟实践过的项目上能体现出来。我们公司一开始技术选型的时候是考虑用angularjs的，但是公司高层为了市场容量 说最好需要支持下 ie , 然而angularjs 对ie8的支持都不是很好，所以最后使用了能够兼容所有浏览器的avalon, 正如司徒大大自己说的，国内的环境就是这样，ie 还是有大量的市场份额的。 （现在微软终于痛定思痛 决定放弃了ie , 不支持ie的安全更新，对我们前端来说，真的是重大利好啊）
言归正传，这篇文章的目的就是把怎么用 avalon 构建一个单页面程序 介绍以下， 是对自己的一个总结，也喜欢对大家有一定的借鉴作用，写的不好不对的地方希望大家多评论评论, 谢谢。
建立项目结构
这个我参考了司徒正美写的结构目录。 js 文件夹是放置所有的js 引用类库的，无论是其他类库还是自己公司写的类库也好，我把自己写的类库放在了 js/common文件夹下面； modules 是放置不同的业务模块的，如图，我建立了一个 sub1业务，还有一个 sub2业务， 后面我们就根据这两个子业务来进行开发讲解； 其它css,fonts,images 目录就不用讲大家也都知道了；然后main.js为入口文件，与index.html 主页面放在根目录下面
编写index主页
主页很简单，新建一个常规html页面，引用require.js, 定义入口main.js位置。其中ms-controller="root"就是avalon的一个controller, 一个model 对应一个controller , 规定一个作用域，这个跟angularjs差不多,也有mvc的思想. 一个页面可以定义多个controller
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>avalon工程</title>
<script src="js/require/require.js" data-main="main"></script>
</head>
<body ms-controller="root">
{{name}}
</body>
</html>下面我们再来看看main.js文件
第一块内容配置了requirejs ，配置了avalon的引用位置
第二块内容通过require引入avalon
requirejs的学习请参考官网 http://requirejs.org/
然后定义了一个 avalon的model, 这个其实就是一个对象，里面可以封装html controller中需要用到的数据和方法， 默认$id属性是必须要的，这个id 会找到html页面的对应的controller, 如前面我们定义的controller叫 root. 最后又添加了一个属性name, html页面对应 {{name}}
require.config({//第一块，配置
baseUrl: '',
paths: {
avalon: ["js/avalon/avalon"]//必须修改源码，禁用自带加载器，或直接删提AMD加载器模块
}
});
require(['avalon'],function(avalon){
avalon.log("引入avalon");
var model = avalon.define({
$id: "root",
name: "tangolivesky"
})
});
执行结果如下
这就是一个经典的MVVM
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。