AngularTube

README.md

AngularTube

This Gist was generated by Contrived.

Do not modify the metadata file if you want to open in Contrived again. Otherwise, it is safe to delete.

Happy Hacking!

contrivedExperimentMetadata.json

{"user":{"id":"5fab1a234b1e8dd7b26ed000","name":"Christopher Harold Butler","avatar":"https://avatars2.githubusercontent.com/u/29358086?v=4"},"templateVersion":"1","templateId":"angular","resources":["<meta charset=\"UTF-8\" />","<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">","<title>Angular</title>"],"dependencies":[{"name":"typescript","version":"3.9.6","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/typescript/3.9.7/typescript.min.js"},{"name":"rxjs","version":"6.2.1","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.min.js"},{"name":"core-js","version":"2.5.7","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.js"},{"name":"angular-core","version":"9.1.1","type":"js","url":"https://unpkg.com/@angular/core@9.1.1/bundles/core.umd.js"},{"name":"zone","version":"0.8.26","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.26/zone.min.js"},{"name":"angular-common","version":"9.1.1","type":"js","url":"https://unpkg.com/@angular/common@9.1.1/bundles/common.umd.js"},{"name":"angular-compiler","version":"9.1.1","type":"js","url":"https://unpkg.com/@angular/compiler@9.1.1/bundles/compiler.umd.js"},{"name":"angular-animations","version":"9.1.1","type":"js","url":"https://unpkg.com/browse/@angular/animations@9.1.1/bundles/animations.umd.js"},{"name":"angular-platform-browser","version":"9.1.1","type":"js","url":"https://unpkg.com/@angular/platform-browser@9.1.1/bundles/platform-browser.umd.js"},{"name":"angular-platform-browser-dynamic","version":"9.1.1","type":"js","url":"https://unpkg.com/@angular/platform-browser-dynamic@9.1.1/bundles/platform-browser-dynamic.umd.js"},{"name":"angular-router","version":"9.1.1","type":"js","url":"https://unpkg.com/browse/@angular/router@9.1.1/bundles/router.umd.js"}],"files":[{"id":1,"parentId":0,"name":"public","type":"folder","isRoot":true,"selected":false,"expanded":false,"children":[{"id":2}]},{"id":2,"parentId":1,"name":"index.html","type":"file","mimeType":"html","isRoot":false,"open":false,"selected":false,"content":"<my-app/>"},{"id":3,"parentId":0,"name":"src","type":"folder","isRoot":true,"selected":false,"expanded":true,"children":[{"id":4},{"id":5},{"id":6},{"id":8}]},{"id":4,"parentId":3,"name":"App.ts","type":"file","mimeType":"ts","isRoot":false,"open":true,"selected":true,"content":"\nconst { Component, NgModule, VERSION } = ng.core;\nconst { CommonModule } = ng.common;\n\n// import SearchBar from 'SearchBar.ts';\n\n\n@Component({\n  selector: 'my-app',\n  template:\n`\n<h1 [innerHTML]=\"title\"></h1>\n<h2 [innerHTML]=\"subtitle\"></h2>\n<p [innerHTML]=\"version\"></p>\n\n`\n})\nclass AppComponent {\n  title;\n  subtitle;\n  version;\n\n  constructor() {}\n\n  ngOnInit() {\n    this.title= \"Hello Contrived!\";\n    this.subtitle = \"Start editing to create something magic!\";\n    this.version = `(Angular ${VERSION.major})`;\n  }\n}\n\n\n// @NgModule({\n//   imports: [\n//     CommonModule,\n//   ],\n//   declarations: [AppComponent, SearchBar],\n//   bootstrap: [AppComponent]\n// })\n\n","secrets":[]},{"id":5,"parentId":3,"name":"index.ts","type":"file","mimeType":"ts","isRoot":false,"isEntry":true,"open":true,"selected":false,"content":"\n// main.js\nconst { Component, VERSION } = ng.core;\nconst { BrowserModule } = ng.platformBrowser;\nconst { NgModule } = ng.core;\nconst { CommonModule } = ng.common;\n\nimport AppComponent from 'App.ts';\nimport SearchModule from 'SearchBar.ts';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    CommonModule,\n  ],\n  declarations: [AppComponent, SearchModule],\n  bootstrap: [AppComponent],\n  providers: []\n})\nclass AppModule {}\n\nconst { platformBrowserDynamic } = ng.platformBrowserDynamic;\n\nplatformBrowserDynamic()\n  .bootstrapModule(AppModule)\n  .catch(err => console.error(err));\n","secrets":[]},{"id":6,"parentId":3,"name":"styles.css","type":"file","mimeType":"css","isRoot":false,"open":false,"selected":false,"content":"Body {\n\tfont-family: sans-serif;\n\ttext-align: center;\n}"},{"id":7,"parentId":0,"name":"README.md","type":"file","mimeType":"markdown","isRoot":true,"open":false,"selected":false,"content":"\n\n## Experiment Title\n> simple, one-line description\n\n\n### Experiment Status\n> | Finished | In progress | Abandoned\n> | Working | Kindof working | Broken\n\n\n### Purpose\n - [ ] Proof of concept\n - [ ] Prototype\n - [x] No purpose, just fun\n\n> If you want to take a more scientific approach consider including the following sections\n\n#### Research\n - What questions are you trying to answer or discover?\n\n#### Hypothesis\n - What do you think will happen?\n\n#### Results\n - What happened in the experiment?\n\n#### Conclusion\n - Was the hypothesis correct ?\n\n### Built With\n> list the framework or libraries you used\n\n- react + styled components\n\n### Features\n> what's so cool about this experiment ?\n\n - [x] feature one\n - [x] feature two\n\n### To Do:\n> is there anything left to do ?\n\n - [x] task 1\n - [x] task 2\n\n\n### How To Use / Example\n> how can people use or play with your experiment ?\n\n\n## API / Components\n> do you want to say anything about the components or code in this experiment ?\n\nThe `App` component is where the magic happen!\n```\nconst App = () => {\n  return (\n    <div className='App'>\n      <h1>Hello Contrived!</h1>\n      <h2>Start editing to create something magic!</h2>\n    </div>\n  );\n};\n\nexport default App;\n```\n\n\n## Author / Feedback\n> give yourself a little credit !\n\nChristopher Harold Butler ([ChristopherHButler](https://github.com/ChristopherHButler))\n\n## Inspiration / Acknowledgements / Thanks\n> did anyone help you with this / did something inspire you to make this ?\n\nI just really wanted to make my own [https://codesandbox.io/](https://codesandbox.io/)\n\n## License\n> APACHE | BSD | MIT | GNU GPL | ?\n> Need help deciding? Check out [https://choosealicense.com/](https://choosealicense.com/)\n"},{"id":8,"parentId":3,"name":"components","type":"folder","isRoot":false,"selected":false,"expanded":true,"children":[{"id":9}]},{"id":9,"parentId":8,"name":"SearchBar.ts","type":"file","mimeType":"es6","isRoot":false,"isEntry":false,"open":true,"selected":false,"content":"\nconst { Component, NgModule, Output, EventEmitter } = ng.core;\n\n\n@Component({\n  selector: 'search-bar',\n  template: `<div>Search Bar</div>`,// `<form (submit)=\"onFormSubmit()\"><input (input)=\"term = $event.target.value\" /></form>`\n})\nexport class SearchBar {\n  // @Output() submitted = new EventEmitter<string>();\n  term = '';\n\n  constructor() {}\n\n  ngOnInit() {}\n\n  // onFormSubmit(event: any) {\n  //   event.preventDefault();\n  //   this.submitted.emit(this.term);\n  // }\n}\n\n@NgModule({\n  imports: [],\n  declarations: [SearchBar],\n  exports: [SearchBar],\n  providers: [],\n})\nexport class SearchModule {};","secrets":[]}],"experimentId":"5fc0ad3eee7c050017b95146"}