Angluarsjs 2 学习笔记一 （转）# *** 初识Angular 2**1. 引入Angular2预定义类型import {Component, View, bootstrap} from “angular2/angular2”; import 是ES6的关键字，用来从模块中引入类型定义。Here, We will 引入三个类型from angular2模块库中：Component类， View类和bootstrap函数。2. 实现一个Angular2组件实现一个Angular2组件也很简单，定义一个类，然后给这个类添加注解：[@Component](/user/Component)({selector:"ez-app"}) [@View](/user/View)({template:"<h1>Hello,Angular2</h1>"}) class EzApp{} class也是ES6的关键字，用来定义一个类。@Component 和 @View都是给类EzApp附加的元信息，被称为注解/Annotation。 @Component最重要的作用是通过selector属性（值为CSS选择符），指定这个组件渲染到哪个DOM对象上。 @View最重要的作用是通过template属性，指定渲染的模板。 渲染组件到DOM 将组件渲染到DOM上，需要使用自举/bootstrap函数： bootstrap(EzApp); 这个函数的作用就是通知Angular2框架将EzApp组件渲染到DOM树上。 ** 知识点：** 1. 注解/Annotation@Component和@View到底是怎么回事。看起来像其他语言（比如python） 的装饰器，是这样吗？ES6规范里没有装饰器。这其实利用了traceur的一个实验特性：注解。给一个类 加注解，等同于设置这个类的annotations属性//注解写法 [@Component](/user/Component)({selector:"ez-app"}) class EzApp{...} 等同于:class EzApp{...} EzApp.annotations = [new Component({selector:"ez-app"})]; 很显然，注解可以看做编译器（traceur）层面的语法，但和python的装饰器不同， 注解在编译时仅仅被放在annotation里，编译器并不进行解释展开 - 这个解释的工作是 Angular2完成的： 据称，注解的功能就是Angular2团队向traceur团队提出的，这不是traceur的默认选项， 因此你看到，我们配置systemjs在使用traceur模块时打开注解：System.config({ map:{traceur:"lib/traceur"}, traceurOptions: {annotations: true} }); 小结如果你了解一点Angular1.x的bootstrap，可能隐约会感受到Angular2中bootstrap的一些 变化 - 我指的并非代码形式上的变化。以组件为核心在Angular1.x中，bootstrap是围绕DOM元素展开的，无论你使用ng-app还是手动执行bootstrap()函数，自举过程是建立在DOM之上的。而在Angular2中，bootstrap是围绕组件开始的，你定义一个组件，然后启动它。如果没有一个组件， 你甚至都没有办法使用Angular2！支持多种渲染引擎以组件而非DOM为核心，意味着Angular2在内核隔离了对DOM的依赖 - DOM仅仅作为一种可选的渲染引擎存在：上面的图中，DOM Render已经实现，Server Render正在测试，iOS Render和Android Render 是可预料的特性，虽然我们看不到时间表。这有点像React了。(@hadong 是不是用React写过代码？)

Angularjs1 pass on the parameters by url, not ui-self. Currently, if you are using angularjs router, and use ui-self to link your destination page in html, and you can pass on the parmaters by ui-self. However, if right click and 'open link in new tab', the parameters in ui-self will be missing, and it can't pass on. what we can do?first let's browse a code: 1. file 1: audience.js$stateProvider.state('audiencesCreate', { url: '/audience/create-audience', params: {folder: null, type: null}, templateUrl: 'templates/audiences/audiences.create.html' }); file 2: checkout.html<div class="col-md-12"> <ul> <li ng-if="audiencePermission.digital"> <a ui-sref="audiencesCreate({type:'digital'})">Start a New Digital Audience</a> </li> <li ng-if="audiencePermission.tv"> <a ui-sref="audiencesCreate({type:'tv'})">Start a New TV Audience</a> </li> <li ng-if="audiencePermission.firstParty"> <a ui-sref="audiencesUpload">Start a New Upload (Audience Onboard)</a> </li> <li> <a ng-click="open(audienceID)">View this Distribution</a> </li> <li> <a href ui-sref="audiencesSaved">Browse Saved Audiences</a> </li> </ul> </div> Question: It can't open link in new tab. Solution: change js code for url with add '?parameter' The only difference is now we have the parmeter in url when open digital or tv.$stateProvider.state('audiencesCreate', { url: '/audience/create-audience?type?folder', params: {folder: null, type: null}, templateUrl: 'templates/audiences/audiences.create.html' });