NG2-Cnode

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.replies",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"replies",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":16,"_32":33},"loginname","phpcs","page",1,"limit",50,"total","id","24742","avatar_url","https://avatars.githubusercontent.com/u/6924640?v=3","githubUsername","create_at","2016-09-13 09:51:31.536","score",5,"topic_count",0,"reply_count","is_star",false,{"_20":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":33,"_47":33,"_31":48,"_49":50,"_25":51,"_52":53},"20676","author_id","11657","tab","share","content","github地址 [github](https://github.com/p412726700/ng2-cnode)\r\n项目demo [ng2-cnode](http://45.32.60.41:8088/)\r\n上张图\r\n![ng2-cnode](//static.cnodejs.org/Fvf9Tc9gRMx0IAOBOWx0oapdI-q5)\r\n\r\n\r\nangular2框架图\r\n![angualr2 architecture](https://angular.io/resources/images/devguide/architecture/overview2.png)\r\n充分的模块化开发，angular2定义了几种常见功能组件的命名，通过创建这些组件完成特定的业务功能，然后又把这些小组件组装到一个大模块中，比如说有一个登陆模块```（login.module.ts）```其中就包含```login.component.{ts|html|css} login.service.ts login.schema.ts login.pipe.ts```等，用的时候就把这个导入到根模块中即可，其中详细的定义和用法请参考[angular2官网](https://angular.io/)\r\n\r\n---\r\n\r\n本项目文件结构如下\r\n.\r\n├── README.md\r\n├── config/\r\n│ ├── helpers.js\r\n│ ├── webpack.common.js\r\n│ ├── webpack.dev.js\r\n│ └── webpack.prod.js\r\n├── package.json\r\n├── public/\r\n│ ├── css/\r\n│ │ ├── app.styl\r\n│ │ ├── fonts.styl\r\n│ │ ├── header.styl\r\n│ │ ├── style.styl\r\n│ │ ├── topics.styl\r\n│ │ └── variables.styl\r\n│ ├── fonts/\r\n│ └── images/\r\n├── src/\r\n│ ├── app/\r\n│ │ ├── app.component.html\r\n│ │ ├── app.component.ts\r\n│ │ ├── app.module.ts\r\n│ │ ├── app.routing.ts\r\n│ │ ├── login.component.ts\r\n│ │ ├── topic.component.html\r\n│ │ ├── topic.component.ts\r\n│ │ ├── topics.component.html\r\n│ │ ├── topics.component.ts\r\n│ │ ├── user.component.html\r\n│ │ └── user.component.ts\r\n│ ├── index.html\r\n│ ├── main.ts\r\n│ ├── pipes/\r\n│ │ └── tab.ts\r\n│ ├── polyfills.ts\r\n│ ├── schemas/\r\n│ │ └── topics.ts\r\n│ ├── services/\r\n│ │ └── topics.ts\r\n│ └── vendor.ts\r\n├── tsconfig.json\r\n├── tslint.json\r\n├── typings/\r\n│ ├── globals/\r\n│ │ ├── angular-protractor/\r\n│ │ │ ├── index.d.ts\r\n│ │ │ └── typings.json\r\n│ │ ├── core-js/\r\n│ │ │ ├── index.d.ts\r\n│ │ │ └── typings.json\r\n│ │ ├── jasmine/\r\n│ │ │ ├── index.d.ts\r\n│ │ │ └── typings.json\r\n│ │ ├── markdown-it/\r\n│ │ │ ├── index.d.ts\r\n│ │ │ └── typings.json\r\n│ │ ├── node/\r\n│ │ │ ├── index.d.ts\r\n│ │ │ └── typings.json\r\n│ │ └── selenium-webdriver/\r\n│ │ ├── index.d.ts\r\n│ │ └── typings.json\r\n│ └── index.d.ts\r\n├── typings.json\r\n└── webpack.config.js\r\n\r\n\r\n### config/\r\n存放一些webpack文件编译、打包相关的配置\r\n\r\n### package.json\r\nnpm依赖及一些脚本命令\r\n\r\n### public/\r\n资源文件，例如css、font、img等，官方用法是把同一个component的html、css、ts写到同一个目录下，这里由于我们要使用stylus的公共变量，并没有找到合理有效的引用公共变量方法，所以样式文件抽出来写在同一个目录下了。另外**第三方样式会在style.styl**中引入。\r\n\r\n### src/\r\n主要包含了各种组件，根据我厂的实际使用情况，我们并没有完全照搬官方的用法，官方是把相互关联强的各种组件都打包到一个模块中，但是根据我们的实际情况有好多公用的组件，所以是按照组件类型划分，结构上略有不同。\r\n#### app/\r\n各个组件的ts、html文件。\r\n#### index.html\r\n入口html文件。\r\n#### main.ts\r\n入口ts文件。\r\n#### pipes/\r\n各种过滤器，类似angular1。\r\n#### polyfill.ts\r\n浏览器兼容文件。\r\n#### schemas/\r\nmodel文件，类似于mvc结构中的m文件。\r\n#### services/\r\n为各个component服务的文件，大部分的业务逻辑写在这里，轻component重service。\r\n#### vendor.ts\r\njs资源文件，包括angular和第三方的。\r\n### tsconfig.json\r\ntypescript编译选项文件，类似于babelrc。\r\n### tslint.json\r\ntypescript格式规范检查，类似于eslint。\r\n### typings\r\nts静态类型重要组成部分，当用一些第三方库的时候没有这些文件的话，编译过程或者编辑器会报错，例如，当用jquery，$(selector).append()时如果没有相应的typings文件，就会报错找不到定义。\r\n### typings.json\r\ntypings配置及依赖文件，类似package.json。\r\n### webpack.config.js\r\n地球人都知道\r\n\r\n## 项目功能\r\n先期功能有列表展示页、切换列表页、下一页、详情页等\r\n\r\n在package.json中定义好依赖后，直接npm install，然后依次创建上面的文件夹。\r\n先在src中定义一个入口文件index.html\r\n```\r\n\r\n\r\n\r\n \r\n NG2-Cnode\r\n \r\n \r\n\r\n\r\n\r\n\r\n```\r\n作用就是在浏览器输入地址打开的就是这个页面，我们使用webpack关联入口ts文件。\r\n\r\n然后创建main.ts，入口ts文件\r\n```javascript\r\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\r\nimport { enableProdMode } from '@angular/core';\r\nimport { AppModule } from './app/app.module';\r\nif (process.env.ENV === 'production') {\r\n enableProdMode();\r\n}\r\nplatformBrowserDynamic().bootstrapModule(AppModule);\r\n```\r\n这个文件通过webpack插件（html-webpack-plugin）与index.html文件关联起来，编译打包后就会注入到index.html底部。\r\n\r\n创建app文件夹并创建app.module.ts\r\napp.module中包含了项目所需的各种ts组件，这个算是angular2项目的基石。\r\n```javascript\r\nimport {NgModule} from '@angular/core';\r\nimport {BrowserModule} from '@angular/platform-browser';\r\nimport {AppComponent} from './app.component';\r\nimport {routing} from \"./app.routing\";\r\nimport {TopicsComponent} from \"./topics.component\";\r\nimport {HttpModule} from \"@angular/http\";\r\nimport {FormsModule} from \"@angular/forms\";\r\nimport {TabPipe} from \"../pipes/tab\";\r\nimport {TopicComponent} from \"./topic.component\";\r\nimport {TopicsService} from \"../services/topics\";\r\nimport {UserComponent} from \"./user.component\";\r\n\r\n@NgModule({\r\n imports: [\r\n BrowserModule,\r\n FormsModule,\r\n HttpModule,\r\n routing\r\n ],\r\n declarations: [\r\n AppComponent,\r\n TopicsComponent,\r\n TopicComponent,\r\n UserComponent,\r\n TabPipe\r\n ],\r\n providers: [TopicsService],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {\r\n}\r\n```\r\n\r\n然后创建app.module.html\r\n这里面就是项目的layout了\r\n```html\r\n

\r\n

NG2-Cnode

\r\n

\r\n\r\n

\r\n \r\n

\r\n\r\n```\r\n所有的组件都会映射到router-outlet中，就是说当点击某个链接变换的就是main中的元素\r\n\r\n\r\n接下来，写一个topics.component.ts（列表组件）\r\n```javascript\r\nimport {Component, OnInit} from \"@angular/core\";\r\nimport {TopicsService} from '../services/topics';\r\nimport {Topics} from '../schemas/topics';\r\nconst timeago = require(\"timeago.js\");\r\n\r\n\r\n@Component({\r\n templateUrl: 'topics.component.html'\r\n})\r\nexport class TopicsComponent implements OnInit {\r\n topics: Topics[];\r\n tab: string = '';\r\n page: number = 1;\r\n loading: boolean = true;\r\n timeagoInstance = new timeago();\r\n\r\n\r\n constructor(private topicsService: TopicsService) {\r\n\r\n }\r\n\r\n ngOnInit() {\r\n this.fetchData().then(data=>this.topics = data)\r\n }\r\n\r\n changeTab(tab: string) {\r\n this.page = 1;\r\n this.tab = tab;\r\n this.fetchData().then(data=>this.topics = data)\r\n }\r\n\r\n fetchData() {\r\n this.loading = true;\r\n return this.topicsService.getTopics(this.page, this.tab)\r\n .then(res=>res.json())\r\n .then(res=> {\r\n this.loading = false;\r\n return res.data\r\n })\r\n }\r\n\r\n onScroll() {\r\n if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight && !this.loading) {\r\n ++this.page;\r\n this.fetchData().then(data=>this.topics = this.topics.concat(data))\r\n }\r\n }\r\n}\r\n```\r\n因为这是个页面组件，所以引入component，绝大多数时候我们都在与component打交道，oninit是页面刚打开时执行的函数，TopicsService是与后端的数据交换及大部分业务逻辑，Topics是定义的model文件。\r\n\r\n创建topics.component.html\r\n```html\r\n

\r\n

\r\n {{topic.author.loginname}}\r\n {{moment(topic.create_at).format('MM-DD HH:mm')}}\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n $\"{{comment.author.loginname}}\"$ \r\n {{comment.author.loginname}}\r\n {{moment(comment.create_at).format('MM-DD HH:mm')}}\r\n

\r\n

\r\n\r\n

\r\n

\r\n```\r\n这上面绑定了ts文件中定义的各种方法、变量。\r\n\r\n当打开这个页面时，会执行ngOnInit函数，从而执行fetchData方法拉取数据，滚动页面时执行onScroll方法，判断滚到底部拉取时数据，并设置标志位防止连续拉取。\r\n\r\n其中定义的topics变量类型为Topics[]，这样当在使用这个变量时就能正确的获取到其属性，就像java、c#一样，如果不定义的话默认是any类型，虽然也可以用，但失去了用typescript的初衷。\r\n\r\n创建 app.routing文件\r\n\r\n```javascript\r\nimport {ModuleWithProviders} from '@angular/core';\r\nimport {Routes, RouterModule} from '@angular/router';\r\n\r\nimport {TopicsComponent} from \"./topics.component\";\r\nimport {TopicComponent} from \"./topic.component\";\r\nimport {UserComponent} from \"./user.component\";\r\n\r\nconst appRoutes: Routes = [\r\n {\r\n path: '',\r\n component: TopicsComponent\r\n }, {\r\n path: 'topic/:id',\r\n component: TopicComponent\r\n }, {\r\n path: 'user/:id',\r\n component: UserComponent\r\n }\r\n]\r\n\r\nexport const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);\r\n```\r\n定义了路由匹配的component文件，angular2还提供了子路由机制，可以懒加载组件，不过这个项目中暂未用到。\r\n\r\n项目中还有些其它文件，不过至此已经能跑起来了。\r\n\r\nangular2总体使用下来感受很不错，很强的oop思想和组件分割，配合上ts的静态类型检查，特别适合大型项目的构建，上手难度上感觉要比react-redux简单不少，值得一试，ts更是由于angular2火到了一个新高度，antd2.0也是用ts开发了，angular2的各种ui组件也在如火如荼的进行中，在未来的技术选型上又多了一个很好的选择，或许在某些场景下angular2表现会更好。\r\n\r\n写的不好的话还请各位斧正、海涵。","title","angular2版本的cnode[更新]","last_reply_at","2016-10-10 07:38:04.298","good","top",4,"visit_count",5832,"2016-10-09 07:56:52.271","author",{"_13":54,"_22":55},"p412726700","https://avatars0.githubusercontent.com/u/6236122?v=4"]

{{topic.title}}