[Angular 2] Get start with Firebase

Angular 小试牛刀[2]:CI(travie+firebase)

持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成它们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误,减少一些反复的工作等等,使团队更加有效的开发协作. 持续集成相当于将传统工业的流水线作业的思想应用到现代的软件工业中来.不同之处在于,工业流水线最终出来的是一个一个的产品复制体,但是软件流水线最终出来的是一代一代更新迭代的版本,但是共同点…

[Angular 2] Get start with Firebase

Create a Firebase Servcie: import {Injectable} from 'angular2/core'; import {Http, Response} from 'angular2/http'; @Injectable() export class FirebaseService{ constructor(private _http: Http){ } addOneHistory(keyword: string){ const body = JSON.strin…

[Firebase] 4. Firebase Object related Database

The idea: This post we are going to learn how to build a Firebase Forage with object related database. Form the pic we can see that there are two object: users and items. This helps to orginzie the data structure better. The way to do this is followi…

[Firebase] 3. Firebase Simple Login Form

Using $firebaseSimpleLogin service. Here we use three methods for login, logout, register and getCurrentUser. Be sure to open the Email and Password configuration on Forge: login.tmpl.html <div class="container" ng-controller="LoginCtrl&…

二识angularJS

前言:记得三月份时下定决心说每天要更新一篇博客,学习点新东西,实践下来发现太不现实,生活中的事情很多,再喜欢也不能让它一件占据生活的全部吧,所以呢,以后顺其自然吧.之前有一篇'初识angular'因为离职找工作等一系列原因,搁置了好久,这次公司新项目要用angular,今早看看,继续写以前的已经无法继续,索性重新开始,有时间再修该之前的吧. 二识angular(基于angular官方文档) 地址:https://angularjs.org/ 一,基础:先看html代码 <!doctype htm…

[AngularFire] Angular File Uploads to Firebase Storage with Angular control value accessor

The upload class will be used in the service layer. Notice it has a constructor for file attribute, which has a type of File. This will allows us to initialize new uploads with a JavaScript File object. You will see why this is important in the next…

[Angular] Setup automated deployment with Angular, Travis and Firebase

Automate all the things!! Automation is crucial for increasing the quality and productivity. In this lesson we will learn how to automate the deployment of our Angular app to Firebase Hosting, by using GitHub and Travis. By the end of the lesson we w…

Firebase 相关

谷歌在 2016年 I/O 大会上推出了 Firebase 的新版本.Firebase 平台提供了为移动端(iOS和Android)和 Web 端创建后端架构的完整解决方案. 从一开始的移动后端即服务(Mobile-Back-end-as-a-Service,简称 MBaas),Firebase 已经被谷歌改造成了针对移动开发和 Web 开发的一个完整后端解决方案.Firebase 提供了一个 SDK 和一个控制台,用于创建和管理 Android.iOS和 Web 等多个平台的应用.Fireb…

都 9012了，该选择 Angular、React，还是Vue？

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 尽管 Web开发的典型应用场景除了将服务器用作平台.浏览器用作客户端之外,几乎很少活跃于其他业务领域,但不可否认JavaScript 语言和框架的使用已经成为了主流.Angular.React 和 Vue,作为 JavaScript 的三大框架已逐步发展成熟,三者的差异性也越发明显,假设JavaScript还会继续流行十年左右,未来十年,你将会作何选择? Angular AngularJS 自2009年诞…

[Firebase] 2. Firebase Event Handling

/** * Created by Answer1215 on 11/9/2014. */ var app = angular.module('app', ['firebase']); app.constant('FIREBASE_URI', 'https://zhentiw-angular-fire.firebaseio.com/'); app.controller('MainCtrl', ['$scope', 'ItemsService', function ($scope, ItemsSer…

[Firebase] 1. AngularFire, $save, $add and $remove, Forge

Basic angularFire options: $save, $add and $remove. The way connect firebase: var app = angular.module('app', ['firebase']); var ref = new Firebase(FIREBASE_URI); //create an item storage var items = $firebase(ref); Example: <!DOCTYPE html> <html…

Angular 8 发布

原文地址:https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27 Angular 8 - 更小的包,CLI API 以及与生态保持一致 Angular 8 现在发布了!这是跨越整个平台的重要发布,包括框架.Angular Material,与主版本同步的 CLI.该发布改进了应用程序在现代浏览器上的启动时间,提供了开发 C…

[AngularFire] Firebase OAuth Login With Custom Firestore User Data

import { NgModule } from '@angular/core'; import { AuthService } from './auth.service'; import { AngularFireAuthModule } from 'angularfire2/auth'; import { AngularFirestoreModule } from 'angularfire2/firestore'; @NgModule({ imports: [ AngularFireAuth…

[Angular] Reactive Store and AngularFire Observables

A simple store implemenet: import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import 'rxjs/add/operator/pluck'; import 'rxjs/add/operator/distinctUntilChanged'; import {User} from './auth/shared/serv…

[Angular] AuthService and AngularFire integration

Config AngularFire, we need database and auth module from firebase. import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {RouterModule, Routes} from '@angular/router'; import {AngularFireModule, FirebaseAppConf…

[Angular2 Router] Resolving route data in Angular 2

From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know resolve function in ui router, which you can load data before template and controller get inited. In Angular2 router, you can also use resovler. The r…

[Angular2Fire] Firebase auth (Google, Github)

To do auth, first you need to go firebase.console.com to enable the auth methods, for example, enable google, github... Enable goolge is quite simple, just one click, enable Github, Twitter, you need to do more configuration. Follow the link: https:/…

angular 前端路由不生效解决方案

angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部署到服务器上就有问题,之前部署到IIS上时需要配置一个 url rewrite ,可能遇到了类似的问题,查阅一番之后确实是这样. 启用前端路由服务器配置没有一种配置可以适用于所有服务器. 后面这些部分会描述对常见服务器的配置方式. 这个列表虽然不够详尽,但可以为你提供一个良好的起点. Apache…

Angular 8 - 更小的包

Angular 8 - 更小的包 Angular 8 发布原文地址:https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27 Angular 8 - 更小的包,CLI API 以及与生态保持一致 Angular 8 现在发布了!这是跨越整个平台的重要发布,包括框架.Angular Material,与主版本同步的 CLI.…

Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件.而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery.本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境,请参考我之前写这篇文章:Angular2入门系列教程1-使用…

Angular企业级开发(5)-项目框架搭建

1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-Seed项目来开发,本文首先分析angular-seed项目的目录结构.以及AngularJS团队为我们做了什么事情,提供了我们真实开发最需要的框架结构. 这个项目仅仅是一个典型的AngularJS网络应用程序的应用程序骨架. 您可以使用它来快速引导您的Angular webapp项目和搭建开发环境.…

TypeScript: Angular 2 的秘密武器（译）

本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白开场白主要分为三部分: 感谢了ng-conf的组织者. 阐述了TypeScript是JavaScript的超集,并不是另外一种语言. 引用了他的两个朋友最喜欢的TypeScript特性. 由于开场白内容不太重要,所以不再详述.下面开始讲解Dan Wahlin最喜欢的TypeScript的特性. 类型支持(Type Support…

angular实现统一的消息服务

后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息这种显示消息的方式是不是有熟悉又陌生,关键是简洁 alertMsgServe.alert(resp.msg); 2. 指令调用放在页面的顶部 <div class="col-md-12" style="padding:0px;"> <alert-msg alert-messa…

div实现自适应高度的textarea，实现angular双向绑定

相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就错了. textarea不是不可以的,然后我是这样错的.(就是监听scroll 如果出现了,就增加1rows 的高度)然而这样真的很挫 textarea.bind('change','keydown'){ if(scrollTop > 0 ) { textarea.rows += 1 } } 正确的…

Angular企业级开发-AngularJS1.x学习路径

博客目录有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] 6.[AngularJS控制器] 7.[AngularJS视图] 8.[AngularJS模型] 9.RESTful服务介绍 10.[AngularJS指令] 11.[AngularJS性能优化] 12.[AngularJS安全相关] 13.[AngularJS项目打包和部署]…

Angular企业级开发(4)-ngResource和REST介绍

一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格.RESTful风格的设计不仅具有更好的可读性(Human Readable),而且易于做缓存以及服务器扩展(scalability).REST风格体现在URL设计上: 每个URL对应一个资源对资源的不同操作对应于HTTP的不同方法资源表现形式(representation)通…

Angular企业级开发(3)-Angular MVC实现

1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并且使程序某一部分的重复利用成为可能.除此之外,此模式通过对复杂度的简化,使程序结构更加直观.软件系统通过对自身基本部分分离的同时也赋予了各个基本部分应有的功能.专业人员可以通过自身的专长分组: 控制器(Controller)- 负责转发请求,对请求进行处理. 视图(View) - 界面设计人员进行图…