[Angular 2] Better ES5 Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.sfx.dev.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>

<egghead></egghead>
<script src="app.js"></script>
</body>
</html>
var Note = angular
    .Component({
        selector: ‘note‘
    })
    .View({
        template: ‘<h3>World</h3>‘
    })
    .Class({
        constructor: function() {

        }
    });

var Egghead = angular
    .Component({
        selector: ‘egghead‘
    })
    .View({
        template: ‘<div><h1>Hello</h1><note></note></div>‘,
        directives: [Note]
    })
    .Class({
        constructor: function() {

        }
    });

document.addEventListener("DOMContentLoaded", function() {
    angular.bootstrap(Egghead);
});
时间: 2024-08-05 17:46:24

[Angular 2] Better ES5 Code的相关文章

来自 Thoughtram 的 Angular 2 系列资料

Angular 2 已经正式 Release 了,Thoughtram 已经发布了一系列的文档,对 Angular 2 的各个方面进行深入的阐释和说明. 我计划逐渐将这个系列翻译出来,以便对大家学习 Angular 2 提供一些方便. Getting Started Building a Zippy component in Angular 2 Developing a Tabs component in Angular 2 Angular 2 Template Syntax demystifi

[Angular 2] 8. Understanding @Injectable

In order to resolve a dependency, Angular’s DI uses type annotations. To make sure these types are preserved when transpiled to ES5, TypeScript emits metadata. In this lesson we’ll explore how the @Injectable decorator ensures metadata generation for

Angular 2 学习笔记(一)

Angular 2 学习笔记(一) First Application 建立自定义组件(Components) 从表单(Form)接受用户输入(input) 渲染对象列表并用视图战事 监听(Intercepting)用户点击事件并执行操作 Getting started TypeScript 建议使用 TypeScript 开始 Angular 2 的编程. Angular 2 有 ES5 API ,但是 Angular 2 是用 TypeScript 写的并且大部分人都在使用 TypeScri

All About Angular 2.0

angular All About Angular 2.0 Posted by Rob Eisenberg on  November 6th, 2014. Have questions about the strategy for Angular 2.0? This is the place. In the following article I'll explain the major feature areas of Angular 2.0 along with the motivation

Angular Directive: link vs compile vs controller

Compile : This is the phase where Angular actually compiles your directive. This compile function is called just once for each references to the given directive. For example, say you are using the ng-repeat directive. ng-repeat will have to look up t

-_-#【Angular】自定义指令directive

AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="jquery-1.8.3.min.js"></script> <scrip

AngularJs学习笔记--Understanding Angular Templates

原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与model.controller的信息一起,渲染成用户在浏览器中所看到的视图.它是静态的DOM,包括HTML.CSS.angular特别的元素和angular指定的元素属性.angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM. 下面是我们可以在templ

angular编译机制

转载https://segmentfault.com/a/1190000011562077 Angular编译机制 前言 这是我用来进行实验的代码,它是基于quickstart项目,并根据aot文档修改得到的.各位可以用它来进行探索,也可以自己基于quickstart进行修改(个人建议后者). 2018年2月17日更新:最近又做了2个小Demo用来研究Angular的编译和打包,基于Angular5,一个使用rollup,一个使用webpack,(rollup目前无法做到Angular的lazy

学习控制器

Understanding Controllers (控制器) In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controll