Todo app with Angular, AngularFire2, and Firebase
A simple Todo app example built with Angular, Angular CLI and AngularFire2. The app features a Firebase backend with OAuth authentication. Try the demo at ng2-todo-app.firebaseapp.com.
Stack
- Angular 4
- Angular CLI
- AngularFire2
4.0.0-rc.1 - Firebase
- RxJS
- SASS
- Typescript
Quick Start
Install Angular CLI
$ npm install -g @angular/cli
Clone the app, install package dependencies, and start the dev server @ localhost:4200
$ git clone https://github.com/r-park/todo-angular-firebase.git
$ cd todo-angular-firebase
$ npm install
$ npm start
Deploying to Firebase
Prerequisites
- Create a free Firebase account at https://firebase.google.com
- Create a project from your Firebase account console
- Configure the authentication providers for your Firebase project from your Firebase account console
Configure this app with your project-specific details
Edit .firebaserc in the project root:
{
"projects": {
"default": "your-project-id"
}
}
Edit the firebase configuration in src/environments/firebase.ts
export const firebaseConfig = {
apiKey: 'your api key',
authDomain: 'your-project-id.firebaseapp.com',
databaseURL: 'https://your-project-id.firebaseio.com',
storageBucket: 'your-project-id.appspot.com'
};
Install firebase-tools
$ npm install -g firebase-tools
Build and deploy the app
$ npm run build
$ firebase login
$ firebase use default
$ firebase deploy
Commands
| Script | Description |
|---|---|
npm start |
Start development server @ localhost:4200 |
npm run build |
build the application to ./dist |
npm run lint |
Lint .ts files |
-
前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单中的 Angular 相关的教程实践与开源项目的盘点，可以查看这里获得往期清单或者其他盘点篇。 教程实践 《Google 是如何构
-
描述: 记录一个将要完成的任务。 语法 @todo text describing thing to do. 概述 @todo标签可以让你记录要完成的任务。在一个JSDoc注释块中您可以包含多个@todo标签。 Examples 例如，使用@todo标签： /** * @todo Write the documentation. * @todo Implement this function.
-
未完成的任务或者是需要解决的bug，都可以使用TODO来标识，用来提醒团队成员需要注意这些地方，Android Studio 对TODO 提供了非常好的支持，建议掌握此工具。 增加TODO 增加TODO 只需要在注释中添加TODO 关键字就可以了。 有一种比较方便的方法就是，直接在代码里输入小写的todo,Android Studio 会自动生成注释并且加上日期，类似 “\/\/ TODO: 20
-
Surreal Todo是一个基于Web的个人记事本和待办事件管理程序。 在线演示：http://getsurreal.com/surrealtodo/demo/
-
Minimal A fully Material ToDo app with minimal features, just enough to be useful. Screenshots: Download App Icon Designed by Christopher Gundersen Translations Spanish by nanopc German by kaiwinter P
-
项目将 mzphp框架 结合 vuejs、vux、vue-resource 做的 todoList。 代码量不多，核心代码就100来行，重点在于演示和互相学习。 问：为什么要将 mzphp 和 vue、vux 结合做项目呢？ 技术所趋（认真脸！）； mzphp 支持 scss 语法，static 标签可以打包压缩前端 js 和 css，擅长于结合前端做项目； 个人比较喜欢 vux 界面； 网上找
-
TODO Tracks 是可以实时获取他们团队成员新添加的各种 TODOs，让用户能很好的追踪 TODOs 的动向和修改。 使用事例： 列出 TODOs 当一个 TODO 添加，移除或者是谁添加时会有提示 展示两个分支的 TODOs 的不同