├── 书籍 ├── README.md ├── Angular 1, 2 资源 - by S1ngS1ng.md └── ts.md /书籍: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angluar2.0-study 2 | * WIKE 是前端爱好者，16年的中秋节 Angular 2 发布了，Angular 1 发布时，国内的雪狼、破狼等一线大神带领我们走向了 Angular 开发之旅 3 | 4 | * 虽然我的技术没他们精湛，但从业的这么多年，我也想为国内的前端领域献上绵薄之力 5 | 6 | * 因为以前一直没考虑用 Angular 2 所以现在从零开始学习，我会把学习的资料心得，等等分享给大家。希望能给大家一个好的引导 7 | 8 | ## 声明 9 | * 因为很多资源来源于互联网，我们提供资源链接但版权归资源的所有者，请勿随意传播 10 | 11 | * 很多资源原版都是英文的，我们正在翻译当中，欢迎加入我们团队，请联系我们 QQ:200569525，也可以在 Angularjs 群内私聊我，我的ID是：wike 12 | 13 | * 另外此项目为 Angular 2 学习项目，为我们下一个开源项目做学习准备工作，如果大家想参与我们的开源项目，建议大家紧跟我们的脚步，同时也欢迎其它同学踊跃参与。换句话说，这个项目不参与，那下个项目想参与可能比较吃力了，我们项目初期准备的技术栈为：Angularjs2.0 + Nodejs 14 | 15 | - 目的：通过学习或参与这个项目开发沉淀出属于自己的开源组件，为将来的产品孵化提供技术因子，为技术选型提供项目参考。 16 | - 期望：能够通过这个项目锻炼出一支属于群内自己的民间开源团队力量，认识各多执著于技术的小伙伴，让自己的圈子各大。 17 | - 附加：就是没事瞎折腾，捣腾。 18 | 19 | * QQ群：238251402 (收费群，请看清楚再加) 20 | * 建议,需求,或者其他我们的错误可以发邮件给我们 ： 200569525@qq.com 21 | 22 | 23 | ## 目录 24 | 25 | 1. 基础 26 | 27 | 2. 构建 28 | 29 | 3. 开发环境 30 | 31 | 4. NODE 32 | 33 | 5. 案例 34 | 35 | 6. 相关视频 36 | 37 | 7. 讨论 38 | 39 | 8. 书籍 40 | 41 | 9. 常用网址 42 | 43 | a. [S1ngS1ng 的 Angular1, Angular2 资源总结](Angular%201%2C%202%20资源%20-%20by%20S1ngS1ng.md) 44 | 45 | -------------------------------------------------------------------------------- /Angular 1, 2 资源 - by S1ngS1ng.md: -------------------------------------------------------------------------------- 1 | # Angular 2 2 | ## 官方 3 | 1. [英文官网](angular.io) 4 | 2. [中文官网](angular.cn) 5 | 3. [ng-conf 的 YouTube 频道](https://www.youtube.com/user/ngconfvideos) - Angular 2 还比较新，不少新工具、新思路都是在 ng-conf 上提出的，嘉宾们演讲都很有意思，值得一看 6 | 7 | ## 视频（收费） 8 | 1. [egghead.io](egghead.io) - 不定期的会有免费视频，也会有限时免费的视频。如果喜欢追新技术，建议入一个一年的会员。不止是 Angular 相关的，其他视频也很不错 9 | 2. [Lynda](lynda.com) - 不是很推荐，目前还是采用老版本的写法 10 | 3. [Udemy](udemy.com) - 课程比较多，精品也不少。按课程付费 11 | 4. [Angular2 入门](http://www.hubwiz.com/course/5599d367a164dd0d75929c76/) 12 | 13 | ## 书 14 | 1. [ng-book2](ng-book.com/2) - 推荐，更新及时，有例子有视频。半价优惠码（限时有效）：NgConf2016 15 | 16 | ## 一些有用的资源 17 | 1. [John Papa](https://johnpapa.net/) - 一个"网红" =。= 18 | 2. [Victor Savkin](https://vsavkin.com/@vsavkin) - 不少干货，Angular 2 的很多 19 | 3. [Angular Expo](http://angularexpo.com/) - 很多 Angular 2 的开源项目，想写点儿东西不知道写啥，不妨来这里找找灵感 20 | 4. [John Papa Angular Style Guide](https://github.com/johnpapa/angular-styleguide) - 他的 Style Guide 很好。一份 Style Guide 可能不能帮助你写出漂亮的功能，但对后期维护绝对起到了至关重要的作用 21 | 5. [去哪里学Angular 2，怎么学](https://www.delivoper.com/t/angular-2/32) 22 | 6. [关于Angular2的一些资料（持续更新中）](https://segmentfault.com/a/1190000003761054) 23 | 7. [Angular 2.x 从0到1](https://github.com/wpcfan/awesome-tutorials/tree/master/angular2/ng2-tut) 24 | 8. [基于Angular2的一个模块化开发平台方案](https://github.com/hstarorg/ng2-modular-platform) 25 | 26 | ## 插件 27 | 1. [angular2 分页插件](http://michaelbromley.github.io/ng2-pagination/#/) 28 | 29 | # Angular 1 30 | ## 官方 31 | 1. [官网](https://www.angularjs.org/) 32 | 2. [官方 YouTube 频道](https://www.youtube.com/user/angularjs) 33 | 34 | ## 视频 35 | 1. [egghead.io](egghead.io) 36 | 2. [Codecademy](codecademy.com) 37 | 3. [Udemy](udemy.com) 38 | 4. [Lynda](lynda.com) 39 | 5. [Coursera](coursera.org) 40 | 41 | ## 书 42 | 1. [Pro AngularJS](http://www.apress.com/us/book/9781430264484) 43 | 2. [ng-book](ng-book.com) 44 | 45 | 46 | # 注： 47 | 1. 截止目前，Angular 2 的中文资源相对比较少，中文官网更新也不够及时。建议看英文资源 48 | 2. 不少在线的视频教学网站都是收费的。想看免费教学视频的朋友请移步 YouTube。好资源也不少，只是找起来可能比较花时间 49 | 3. 我更推荐 egghead.io，个人觉得，相比其他，讲解到位，思路清晰，更新也比较及时 50 | 4. Angular 2 的例子，一定要注意看版本，有些用的是 RC 版甚至 beta 版本的写法，在正式版中会报错 51 | 5. 最好的学习方法是：自己写项目，遇到问题去 google。在一些博客上，你能看到最新的写法，比如这些网站的： 52 | - [model-driven forms](http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html) 53 | - [custom validation](https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2) 54 | - [Authentication](https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492#.18w4eywho) 55 | 6. 用好 Google，StackOverflow，可以解决 95% 以上的问题 56 | 7. 建议想快速实现功能的朋友看视频学习，边看边跟着敲。想深入了解的朋友，看书或者源码 57 | 8. 我的一个简单的项目示例，用 `Angular-CLI` 生成的 58 | - 在线预览：singsing.io/Angular-2-Essentials 59 | - 源代码：github.com/S1ngS1ng/Angular-2-Essentials 60 | -------------------------------------------------------------------------------- /ts.md: -------------------------------------------------------------------------------- 1 | # TS的介绍不管你是否掌握都值得一读(希望大家多提意见) 2 | 3 | ## 教程大纲 4 | 5 | > 本教程不是TS的API也不会教你怎么搭建环境，我只是教你我个人认为最实用的精华部分整理出来。让大家去学习，同时也会介绍一些适用场景。 6 | 说实话随着软件业的发展，语言越来越相通，语法也就那么多，但你真的懂吗？我觉得搞编程的很大很大一部分人真的不是在编程，而是在模仿。 7 | 编写代码其实就像画国画，要有灵魂，他是一件艺术品。很多背后的东西是需要长时间的积累，国内的教材，个人觉得普遍都没有灵魂，当然也有 8 | 很多优秀的，但相对于国外的教材而言，真的国内的学习环境真的差很多。一门语言真的掌握起来真的很难，不是能做一个项目就是掌握，而是真 9 | 的把你的代码写的优雅，我就很不喜欢写注释，因为我觉得好的代码本身就是注释，程序员沟通就应该通过代码，但是可能这个也是我的坏毛病吧。 10 | 11 | 阅读之前 你应该了解下 JS的知识 ,对数据类型有了解 我没有单独的把数据类型拿出来介绍 而是融入了各个章节中 12 | 13 | - TS的函数应用 14 | - OOP 15 | (以后持续更新) 16 | 17 | 声明：联系QQ 200569525 本教程绝对是原创的，如有意外雷同请联系我 18 | 19 | 20 | 21 | 22 | ## TS的函数应用 23 | 24 | 函数是一门语言不可缺少的部分，TS声明函数和js最大的区别就是设置了类型。 25 | 26 | var greetUnnamed = function(name : string) : string { 27 | if(name){ 28 | return "Hi! " + name; 29 | } 30 | } 31 | 32 | 上述代码声明了一个函数，他的参数类型是字符串，返回值类型是字符串这个是大多数TS教程的声明办法 33 | 34 | 但是我在这里介绍一个完整的声明办法 35 | var hello : (name : string) => string = (name : string) : string =>{ 36 | if(name){ 37 | return "Hi! " + name; 38 | } 39 | } 40 | 这个可能有人觉得奇怪，为什么要这样声明。hello : (name : string) => string 这个其实是限定了hello这个变量值的所谓的类型,个人也不太建议这么写 41 | 当然了我会觉得代码量多了，但有时这么写是有必要的 42 | 43 | 44 | 如果TS只有这么一点功能，那也不叫JS的超集了，TS扩展了函数的功能，他加入了很实用的 可选参数，默认参数 及 不定参数等等。 45 | 46 | var add= (foo : number, bar : number, foobar : number) : number =>{ 47 | return foo + bar + foobar; 48 | } 49 | 50 | 这个函数很简单是定义一个加法函数，将3个参数相加后返回，参数类型是 number 返回也是number 51 | add(1,2,3) //得到6 52 | 但是问题出来了 53 | add(1,2)//这个时候就不匹配了 54 | 55 | 假设我们又要匹配 56 | 57 | add(1,2,3) 58 | 和 59 | add(1,2) 60 | 61 | 我们可以这么做 62 | 63 | var add =(foo : number, bar : number, foobar? : number) : number=> { 64 | var result = foo + bar; 65 | if(foobar !== undefined){ 66 | result += foobar; 67 | } 68 | return result; 69 | } 70 | 71 | foobar? : number 多了一个问号 这样这个参数就是可选的了（非常实用的功能） 72 | 73 | 74 | 默认参数 75 | 76 | var add = (foo : number, bar : number, foobar? : number) : number => { 77 | return foo + bar + (foobar !== undefined ? foobar : 0); 78 | } 79 | 喊多人可能认为这样就可以实现了,但是TS有更好更简洁的语法。 80 | 81 | var add = (foo : number, bar : number, foobar : number = 10) : number =>{ 82 | return foo + bar + foobar; 83 | } 84 | 85 | 默认foobar没传的时候是 10 是不是很方便 没有了所谓的3元运算符 86 | 87 | 在写JS的时候 是不是经常会遇到一个情况 函数参数可能会很多个，我们都是通过 arguments 来判断的，TS给你一种更强大的方法 88 | 89 | 90 | var add = ( a: number, b : number,...foo : number[]) : number =>{ 91 | var result = a+b; 92 | for(var i = 0; i < foo.length; i++){ 93 | result += foo[i]; 94 | } 95 | return result; 96 | } 97 | 98 | 上面这个函数可以匹配 99 | add(1,2,3) 100 | add(1,2,3,4) 101 | add(1,2,3,4,5) 102 | ... 103 | 104 | ...foo:number[] ...为语法规则，foo为变量名 number[]为数组类型，这里以后的参数都是 number还可以 any[] 这样就是任意类型 105 | 106 | 熟悉JAVA的都知道 JAVA还有一个所谓的重载 大家应都玩过 107 | 108 | function fn (name: string) : string;/这里是预定义函数的各种参数类型 109 | function fn (age: number) : string; /这里是预定义函数的各种参数类型 110 | function fn (single: boolean) : string; //这里是预定义函数的各种参数类型 111 | 112 | var fn =(value: (string | number | boolean) : string =>{ 113 | switch(typeof value){ 114 | case "string": 115 | return "输入的是字符串"; 116 | case "number": 117 | return "输入的是数字"; 118 | case "boolean": 119 | return "输入的是布尔值"; 120 | default: 121 | console.log("非法参数"); 122 | } 123 | } 124 | 125 | 这个大家应该都能看懂，无非是语法这样，重点介绍一下 value: (string | number | boolean) 变量value 他的可选类型 是字符串 数字 布尔 这个语法同样适用于 126 | 变量的定义，所以尽量不要用any 127 | 128 | 其他的一些算是 ES6的了 129 | 130 | 例如 var let const 这些参考 ES6 131 | 132 | 还有一些附加类容 133 | 134 | 例如js闭包，立即执行函数，其实在TS里面他就是所谓的类，当然关于OOP下章介绍 135 | 136 | 137 | class Person { 138 | private _name : string; 139 | constructor() { 140 | this._name = "wike"; 141 | } 142 | get() : string { 143 | return this._name; 144 | } 145 | set(val : string) : void { 146 | this._name = val; 147 | } 148 | say() : void { 149 | console.log("my name is"+this._name); 150 | } 151 | } 152 | 153 | 其实这个跟其他的OOP语言完全一样，他编译过后的JS就是所谓的立即执行函数，具体的就不细说了 154 | 155 | 下面讲一个非常实用的东西关于函数的，因为这个牵涉到你底层的代码的复用 156 | 157 | class User { 158 | name : string; 159 | age : number; 160 | } 161 | 162 | var userfn=(arr:User[]) :void =>{ 163 | console.log(arr); 164 | } 165 | 166 | 这里就是arr的类型不是简单类型，而是复杂类型这个时候我们就声明一个类 这个类定义了arr的类型 167 | 168 | userfn([{name:"wike",age:27},{name:"test",age:28}]) //这个时候不会报错 169 | 170 | userfn([{name:"wike",age:27},{name:11111,age:28}]) //这个时候报错因为参数类型不匹配 171 | 172 | 173 | 现在假设我要实现同样的功能不同的类型 174 | 175 | class User2 { 176 | city : string; 177 | age : number; 178 | } 179 | 180 | var userfn2=(arr:User2[]) :void =>{ 181 | console.log(arr); 182 | } 183 | 184 | 你会发现函数体是一样的，只是参数不一样。这个时候大多数人这样做 185 | 186 | 187 | var userfn=(arr:(User[]|User2[]) :void =>{ 188 | console.log(arr); 189 | } 190 | 191 | 虽然这个满足了需求,但是假设类型是更多，我们就需要一个个加，放心TS的功能很强大下面我们用TS的标准方法解决这个需求。 192 | 193 | 194 | function userfn (list : T[]) : void { 195 | console.log(list); 196 | } 197 | 198 | 这样子你就可以动态指定类型了 199 | 200 | userfn([{name:"wike",age:27},{name:"test",age:28}]) 201 | 202 | userfn([{city:"常州",age:27},{city:"南京",age:28}]) 203 | 204 | 还有一些就是关于网页相关的了 205 | 大家都知道JS多行文字处理很差，早期需要拼接字符串，ES6新增了字符串模板 206 | var wike=`

hello ${name}

`; 207 | 208 | 关于HTML经常会出现一种问题就是 标签注入，导致网页变型，所以我们都需要将其转移，TS 让其语法更简洁 209 | 210 | var html = formathtml `

${name} ${surname}

`; 211 | 212 | 这样就转义了,当然了需要自己定义 formathtml 定义代码如下 213 | 214 | function formathtml(literals, ...placeholders) { 215 | let result = ""; 216 | for (let i = 0; i < placeholders.length; i++) { 217 | result += literals[i]; 218 | result += placeholders[i] 219 | .replace(/&/g, '&') 220 | .replace(/"/g, '"') 221 | .replace(/'/g, ''') 222 | .replace(//g, '>'); 224 | } 225 | result += literals[literals.length - 1]; 226 | return result; 227 | } 228 | 229 | 这个比较底层了 如果看不懂 也没关系 网上应该有很多例子，思路我说下 230 | 第一个参数就是模板字符串数组他会根据你的模板变量拆分split 大概这样 ["<h1>",' ','</h1>'] 231 | 然后第二个参数就是你模板里面的多个预定义变量这里也就是 ["${name}","${surname}"] 232 | 这个一说应该你很好理解了,如果你看过prototype的源码,他里面的模板其实原理差不多。 233 | 234 | 还有一个小补充的知识点 就是尽量用箭头函数，这个是ES6的语法，因为他修复了this的问题，具体的很多教程有就不细说了。 235 | 236 | 说的TS其实也就是JS 不可能不说异步。写JS应用不管怎么写，异步都不可避免。 237 | 238 | 早期通过面条时的回调函数来控制函数的嵌套执行顺序，这个代码看起来要死人的，后来不是有了q.js还有aynce.js等这些流程控制库 239 | 240 | ### 但ES6给了我们新的视野 Promises 其实Promises早就存在只是ES6把他拿过来用。 241 | function foo() { 242 | return new Promise((fulfill, reject) => { 243 | try 244 | { 245 | //成功的执行 246 | fulfill(value); 247 | } 248 | catch(e){ 249 | //失败的执行 250 | reject(reason); 251 | } 252 | }); 253 | } 254 | 255 | foo().then(function(value){ console.log(value); }) 256 | .catch(function(e){ console.log(e); }); 257 | 258 | //这个是一种方法 也是普遍方法吧 我一直这样用， 具体的 Promise 的语法用法 资料太多不介绍了 259 | 260 | ### 另一种语法 Generators 261 | 262 | function *foo() { 263 | yield 1; 264 | yield 2; 265 | yield 3; 266 | yield 4; 267 | return 5; 268 | } 269 | 270 | var bar = new foo(); 271 | bar.next(); // Object {value: 1, done: false} 272 | bar.next(); // Object {value: 2, done: false} 273 | bar.next(); // Object {value: 3, done: false} 274 | bar.next(); // Object {value: 4, done: false} 275 | bar.next(); // Object {value: 5, done: true} 276 | bar.next(); // Object { done: true } 277 | 278 | 这个我我个人感觉有点像生产者消费者 先生产 中断 消费者就绪 消费者消费 中断 唤醒生产者 279 | 这个我也没怎么用过大家可以试试 因为这个非常好 性能高 占用内存很少 而且执行效率高 以后我也会使用 280 | 据说for循环用它相当节约内存 281 | 282 | ###最后一种大概说下 async and await 283 | 284 | 说实话我没用过 好像是ES7的东西 个人不推荐 有兴趣的自己去了解 285 | 286 | 287 | 288 | 289 | 290 | 今天就暂时写到这里明天大概讲下OOP 这个我比较有心得 291 | 292 | 293 | 未完待续 294 | --------------------------------------------------------------------------------