1.原型设计

1.1 AvalonJs原型

var vm = avalon.define({
    $id: 'xxxxCtrl',
    version: '1.0',
    xxxxCollection:{
        data: [ 
            { value:'value1' },{ value:'value2' },{ value:'value3' }
        ],
        count: 3
        OnClick: function(){
            var self = vm.xxxxCollection;
        },
        Init: function(){

        }
    }
});
avalon.scan(document.body);

<div ms-controller="xxxxCtrl">
    <h2 ms-text="version"><h2>
    <ul>
        <li ms-repeat-item1="xxxxCollection.data" ms-text="item1.value"><li>
    </ul>
</div>

1.1 AngularJs原型

$scope.vm = {
    version: '1.0',
    xxxxCollection:{
        data: [ 
            { value:'value1' },{ value:'value2' },{ value:'value3' }
        ],
        count: 3
        OnClick: function(){
            var self = vm.xxxxCollection;
        },
        Init: function(){

        }
    }
};

<div>
    <h2 ng-bind="vm.version"><h2>
    <ul>
        <li ms-repeat="item1 in vm.xxxxCollection.data" ng-bind="item1.value"><li>
    </ul>
</div>

2. 命名规则和语法

• 所有字符串必须使用单引号
• 属性必须以小写开头，并以驼峰式命名法，例：isPass、name
• 方法必须以大写开头，并以驼峰式命名法，例：OnClickSave、OnSearch
• vm对象集合必须以Collection结尾，元素内部必须使用data、count初始化。例：xxxxCollection

3. 参考资料

• avalonjs
• angularjs
• 常用CDN

4. 练习

• 按以上规则对比AngularJS和AvalonJs常用属性和方法,例如：
  • 显示、隐藏
  • if绑定
  • 双向绑定
  • repeat循环
  • 下拉列表的绑定
  • attribute绑定
  • class绑定
  • style绑定
  • href绑定
  • src绑定
  • 常用事件绑定
    ...