AngularJS入门之如何快速上手 angular2 class可以继承吗

AngularJS入门之如何快速上手

学习AngularJS要具备的基础：
1、扎实的JavaScript编程基础。
2、jQuery（并不要求精通，只要求知道其基本原理与使用方法）。
3、任何一种服务端开发技术（比如ASP.NET，PHP，Node.js等等），AngularJS的网络部分学习将会遇到困难。

angular2 class可以继承吗

前者的话语义上像是问Angular2.0beta0相对于Angular2.0alpha55有什么改进（这个ChangeLog里面还真没写，在MileStone里后几个alpha都算到了beta里。。所以我也不知道。。），后者问的是Angular2.0这个框架进入到Beta版本的重大历史意义。。---（虽然不是Markdown并不会变成实线）至于框架细节上，相关的文档和教程已经不少了，所以这里主要说一些观念上的理解。。0.作为前端框架，Angular2.0太重？是，也不是。这个问题在1.x的时候就经常被讨论，也尝尝被一些人作为Angular的黑点。实际上，Angular的一个基本理念就是提供一个大一统的前端解决方案，涵盖MVCorMVVMorMVW的每一个层面的每一个功能点，当然，并不是说每个环节Angular自己都是做的最好的，但用户基本都具有选择权，可以选择别的库或框架来替代（ui-router、restangular等）。为此，本身Angular的库文件也是模块化的（不需要的可以不引入）。而可能其他一些框架，更专注于某个特定层面（比如View或者ViewModel），当需要在别的层面进行扩展时，就需要在相应的生态系统中寻找别的解决方案，为此可以保证自己的足够轻量。就策略上来说，两种选择本身都无可厚非，但可能到具体实践中，Angular中的很大一部分都是不会用到的（但是依然出现在文档中），所以导致了一种Angular十分臃肿不堪的观念。1.Angular2.0完全重写了Angular，相对于1.x的学习曲线太陡？是，也不是。（好像快成废话了）Angular1.x有一个奇怪的现象，就是一坨人觉得它易于上手，另一坨人觉得它过于复杂。其实确实说的都没有错，因为1.x上手需要用到的部分很少，知道有个Controller和Scope就已经可以做出很多应用了，所以用户水平严重分化（从能用ngRepeat和能造ngRepeat不等）。对于非科班出身的童鞋，要面对compile、link、inject等等名词可能有些力不从心。因为Angular2.0里去掉了Scope和Controller，所以，Angular2.0真的推倒了Angular1.x中的一切吗？我们来看一个简单的例子。Angular1.x中有一个Controller的概念，Controller虽然叫Controller，但远没有后端框架中的Controller那么复杂的作用，Angular1.x中的Controller，说得不好听一下，就仅仅是一个初始化器（Initializer），进行相关的数据绑定（包括字段和方法）而已，一般的初学者用法如下：//Angular1.xwith$scopeinES5myApp.controller(myController,[$scope,itemService,function($scope,itemService){$scope.currentItem=itemService.current()$scope.items=itemService.all()$scope.add=function(item){itemService.add(item)}}])可以看到，上面的代码中，Controller干的事情仅仅就是把相应的数据或者方法绑定到ViewModel中。随着Angular1.2中ControllerAs语法的到来，就不再需要$scope了：//Angular1.xwithcontrollerasinES5myApp.controller(myController,[itemService,function(itemService){this.currentItem=itemService.current()this.items=itemService.all()this.add=function(item){itemService.add(item)}}])这样，就可以抛弃$scope了（其实事件传递还是有可能用到），很多人不知道Angular1.x早就不需要（甚至可以说不应该）用$scope，所以觉得Angular2.0没有$scope还能算Angular吗？接着（不过这里Controller看似多了一个职能，作为闭包），看到this之后，我们不妨思考一下，这些属性到底是对象独有的还是类（严格地说JavaScript中叫原型）共有的呢？通常字段都是前者、方法都是后者，即只要是这个Controller，都要有这些方法。这样，我们就可以考虑，把不变性的内容（比如基本上所有的方法）作为原型的属性而非对象的属性：//Angular1.xwithcontrollerasinES5myApp.controller(myController,[itemService,ItemController])functionItemController(itemService){this.currentItem=itemService.current()this.items=itemService.all()}ItemController.protoype.add=function(item){itemService.add(item)}这样就避免了把一坨方法绑定也挤到Controller里，也可以更清晰的看出Controller的初始化作用。（this会顺着原型链查找的，但是可能很多用Angular的人并没有清晰的看到Angular仍然是普通的JavaScript。）然后，随着ES6的流行，我们可以很轻松的转换成ES6的版本：//Angular1.xwithcontrollerasinES6myApp.controller(myController,[itemService,ItemController])classItemController{constructor(itemService){this.itemService=itemServicethis.currentItem=itemService.current()this.items=itemService.all()}add(item){this.itemService.add(item)}}所以，因为Controller的作用就只是初始化，在有了类（class）的情况下，就完全可以被同化到class的constructor里面了。如果开发人员喜欢静态类型的话，还可以使用TypeScript，也就相当于在ES6的基础上增加了一个静态的类型系统：//Angular1.xwithcontrollerasinTypeScriptmyApp.controller(myController,[itemService,ItemController])classItemController{privatecurrentItem:Itemprivateitems:Item[]constructor(privateitemService:ItemService){this.currentItem=itemService.current()this.items=itemService.all()}add(item:Item):void{this.itemService.add(item)}}其中，用到了TypeScript的一个语法糖，即在构造函数的参数名前加上可访问性修饰符（private、public）可以直接添加为实例的属性。如果我们有组件化的需要，可以把使用Controller的地方都写成Directive，避免ngController的滥用：//Angular1.xwithdirectiveinTypeScriptmyApp.directive(some-selector,()=>({restrict:E,controller:[itemService,ItemController]}))classItemController{privatecurrentItem:Itemprivateitems:Item[]constructor(privateitemService:ItemService){this.currentItem=itemService.current()this.items=itemService.all()}add(item:Item):void{this.itemService.add(item)}}特别提醒，到这里都还是普普通通的Angular1.x哦。（很明显的可以看出，Controller就是Directive的一个方法。）最后，我们再看看Angular2中的写法：//Angular2withcomponentinTypeScript@Component({selector:some-selector})classItemController{privatecurrentItem:Itemprivateitems:Item[]constructor(privateitemService:ItemService){this.currentItem=itemService.current()this.items=itemService.all()}add(item:Item):void{this.itemService.add(item)}}基本上唯一的区别就是，由于TypeScript提供了Metadata支持，Angular2可以直接按类型注入（当然也依然可以使用按名注入，如果有特殊需求的话），不需要再手动键入依赖名称了。（@符号是ES7的Decorator，并不是Angular或TypeScript的私有语法。）另外，由于本身的组件化要求，Angular2.0的Component自身就可以构成一个连通树，用来相互通信，所以也不需要1.x中借助$scope来进行通信了，所以Scope这个概念被废弃了。Controller作为一个进行初始化的方法，直接被类的构造函数取代，不再需要一个专门具名函数了，所以Controller这个概念也被废弃了。所以，在Angular2.0里，真的因为没有Scope没有Controller就是全部推倒重写了吗？并没有。Angular2.0仍然大量的继承了1.x的思想（好的那一部分），或者说，Angular2.0是Angular1.x最佳实践的延伸，学习成本基本都在Angular1.x的最佳实践上，但是如果本身在Angular1.x就只会基本的ngRepeat使用的话，那是完全没有学会Angular1.x，而并不是在学会了Angular1.x的情况下学不会Angular2.0。（当然，侧面说明了Angular1.x的学习曲线真心陡。。）望采纳