8 | *
9 | */
10 | angular.module('myApp')
11 | .config(['$provide', function($provide) {
12 | // adapt ng-cloak to wait for auth before it does its magic
13 | $provide.decorator('ngCloakDirective', ['$delegate', 'Auth',
14 | function($delegate, Auth) {
15 | var directive = $delegate[0];
16 | // make a copy of the old directive
17 | var _compile = directive.compile;
18 | directive.compile = function(element, attr) {
19 | Auth.$waitForAuth().then(function() {
20 | // after auth, run the original ng-cloak directive
21 | _compile.call(directive, element, attr);
22 | });
23 | };
24 | // return the modified directive
25 | return $delegate;
26 | }]);
27 | }]);
--------------------------------------------------------------------------------
/app/config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // Declare app level module which depends on filters, and services
4 | angular.module('myApp.config', [])
5 |
6 | // version of this seed app is compatible with angularFire 1.0.0
7 | // see tags for other versions: https://github.com/firebase/angularFire-seed/tags
8 | .constant('version', '1.0.0')
9 |
10 | // where to redirect users if they need to authenticate (see security.js)
11 | .constant('loginRedirectPath', '/login')
12 |
13 | // your Firebase data URL goes here, no trailing slash
14 | .constant('FBURL', 'https://angularfire-seed-dev.firebaseio.com')
15 |
16 | // double check that the app has been configured before running it and blowing up space and time
17 | .run(['FBURL', '$timeout', function(FBURL, $timeout) {
18 | if( FBURL.match('//INSTANCE.firebaseio.com') ) {
19 | angular.element(document.body).html('
Please configure app/config.js before running!
');
20 | $timeout(function() {
21 | angular.element(document.body).removeClass('hide');
22 | }, 250);
23 | }
24 | }]);
25 |
26 |
--------------------------------------------------------------------------------
/app/app.css:
--------------------------------------------------------------------------------
1 | /* app css stylesheet */
2 |
3 | body {
4 | margin: 10px;
5 | }
6 |
7 | .menu {
8 | list-style: none;
9 | border-bottom: 0.1em solid black;
10 | margin-bottom: 2em;
11 | padding: 0 0 0.5em;
12 | }
13 |
14 | .menu:before {
15 | content: "[";
16 | }
17 |
18 | .menu:after {
19 | content: "]";
20 | }
21 |
22 | .menu > li {
23 | display: inline;
24 | }
25 |
26 | .menu > li.hide {
27 | display: none;
28 | }
29 |
30 | .menu > li:before {
31 | content: "|";
32 | padding-right: 0.3em;
33 | }
34 |
35 | .menu > li:nth-child(1):before {
36 | content: "";
37 | padding: 0;
38 | }
39 |
40 | p.status {
41 | color: red;
42 | }
43 |
44 | p.status.good, p.good {
45 | color: green;
46 | }
47 |
48 | form label {
49 | display: block;
50 | margin: 15px 0;
51 | }
52 |
53 | form label span {
54 | display: block;
55 | font-weight: bold;
56 | }
57 |
58 | .error {
59 | color: red;
60 | }
61 |
62 | fieldset {
63 | float: left;
64 | margin-right: 25px;
65 | padding: 25px;
66 | }
67 |
68 | [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
69 | display: none !important;
70 | }
71 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | module.exports = function(config){
2 | config.set({
3 |
4 | basePath : './',
5 |
6 | files : [
7 | 'app/bower_components/angular/angular.js',
8 | 'app/bower_components/angular-route/angular-route.js',
9 | 'app/bower_components/angular-mocks/angular-mocks.js',
10 | 'app/bower_components/mockfirebase/browser/mockfirebase.js',
11 | 'app/bower_components/angularfire/dist/angularfire.js',
12 | 'test/lib/**/*.js',
13 | 'app/app.js',
14 | 'app/config.js',
15 | 'app/components/**/*.js',
16 | 'app/account/**/*.js',
17 | 'app/chat/**/*.js',
18 | 'app/home/**/*.js',
19 | 'app/login/**/*.js',
20 | 'app/config_test.js'
21 | ],
22 |
23 | autoWatch : true,
24 |
25 | frameworks: ['jasmine'],
26 |
27 | browsers : ['Chrome'],
28 |
29 | plugins : [
30 | 'karma-chrome-launcher',
31 | 'karma-firefox-launcher',
32 | 'karma-jasmine',
33 | 'karma-junit-reporter'
34 | ],
35 |
36 | junitReporter : {
37 | outputFile: 'test_out/unit.xml',
38 | suite: 'unit'
39 | }
40 |
41 | });
42 | };
43 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright (c) 2010-2014 Google, Inc. http://angularjs.org
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/app/account/account_test.js:
--------------------------------------------------------------------------------
1 |
2 | describe('myApp.account', function() {
3 | beforeEach(function() {
4 | module('myApp');
5 | module('myApp.account');
6 | });
7 |
8 | describe('AccountCtrl', function() {
9 | var accountCtrl, $scope;
10 | beforeEach(function() {
11 | module(function($provide) {
12 | // comes from routes.js in the resolve: {} attribute
13 | $provide.value('user', {uid: 'test123'});
14 | });
15 |
16 | inject(function($controller) {
17 | $scope = {};
18 | accountCtrl = $controller('AccountCtrl', {$scope: $scope});
19 | });
20 | });
21 |
22 | it('should define logout method', function() {
23 | expect(typeof $scope.logout).toBe('function');
24 | });
25 |
26 | it('should define changePassword method', function() {
27 | expect(typeof $scope.changePassword).toBe('function');
28 | });
29 |
30 | it('should define changeEmail method', function() {
31 | expect(typeof $scope.changeEmail).toBe('function');
32 | });
33 |
34 | it('should define clear method', function() {
35 | expect(typeof $scope.clear).toBe('function');
36 | });
37 | });
38 | });
--------------------------------------------------------------------------------
/app/home/home.js:
--------------------------------------------------------------------------------
1 | (function(angular) {
2 | "use strict";
3 |
4 | var app = angular.module('myApp.home', ['firebase.auth', 'firebase', 'firebase.utils', 'ngRoute']);
5 |
6 | app.controller('HomeCtrl', ['$scope', 'fbutil', 'user', '$firebaseObject', 'FBURL', function ($scope, fbutil, user, $firebaseObject, FBURL) {
7 | $scope.syncedValue = $firebaseObject(fbutil.ref('syncedValue'));
8 | $scope.user = user;
9 | $scope.FBURL = FBURL;
10 | }]);
11 |
12 | app.config(['$routeProvider', function ($routeProvider) {
13 | $routeProvider.when('/home', {
14 | templateUrl: 'home/home.html',
15 | controller: 'HomeCtrl',
16 | resolve: {
17 | // forces the page to wait for this promise to resolve before controller is loaded
18 | // the controller can then inject `user` as a dependency. This could also be done
19 | // in the controller, but this makes things cleaner (controller doesn't need to worry
20 | // about auth status or timing of accessing data or displaying elements)
21 | user: ['Auth', function (Auth) {
22 | return Auth.$waitForAuth();
23 | }]
24 | }
25 | });
26 | }]);
27 |
28 | })(angular);
29 |
30 |
--------------------------------------------------------------------------------
/security-rules.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | ".read": false,
4 | ".write": false,
5 | "syncedValue": {
6 | ".read": true,
7 | ".write": true,
8 | ".validate": "newData.isString() && newData.val().length <= 100"
9 | },
10 | "messages": {
11 | ".read": true,
12 | "$message": {
13 | ".write": true,
14 | ".validate": "newData.hasChildren(['text'])",
15 | "text": {
16 | ".validate": "newData.isString() && newData.val().length <= 1000"
17 | },
18 | "$other": {
19 | ".validate": false
20 | }
21 | }
22 | },
23 | "users": {
24 | "$user": {
25 | ".read": "auth.uid === $user",
26 | ".write": "auth.uid === $user && (!newData.exists() || newData.hasChildren())",
27 | "name": {
28 | ".validate": "newData.isString() && newData.val().length <= 2000"
29 | },
30 | "email": {
31 | ".validate": "newData.isString() && newData.val().length <= 2000"
32 | },
33 | "$other": {
34 | ".validate": false
35 | }
36 | }
37 | }
38 | }
39 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angularfire-seed",
3 | "description": "A starter project for Angular + Firebase with AngularFire",
4 | "version": "1.0.0",
5 | "homepage": "https://github.com/firebase/angularfire-seed",
6 | "repository": "https://github.com/angular/angular-seed",
7 | "private": true,
8 | "license": "MIT",
9 | "devDependencies": {
10 | "karma": "~0.10",
11 | "protractor": "~0.20.1",
12 | "http-server": "^0.6.1",
13 | "bower": "^1.3.1",
14 | "shelljs": "^0.2.6",
15 | "karma-junit-reporter": "^0.2.2"
16 | },
17 | "scripts": {
18 | "postinstall": "bower install",
19 |
20 | "prestart": "npm install",
21 | "start": "http-server -a localhost -p 8000",
22 |
23 | "pretest": "npm install",
24 | "test": "karma start karma.conf.js",
25 | "test-single-run": "karma start karma.conf.js --single-run",
26 |
27 | "preupdate-webdriver": "npm install",
28 | "update-webdriver": "webdriver-manager update",
29 |
30 | "preprotractor": "npm run update-webdriver",
31 | "protractor": "protractor e2e-tests/protractor-conf.js",
32 |
33 | "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + cat('app/bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\""
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/app/account/account.html:
--------------------------------------------------------------------------------
1 |
2 |
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Status: Archived
2 | This repository has been archived and is no longer maintained.
3 |
4 | 
5 |
6 | # angularfire-seed — the seed for Angular+Firebase apps
7 |
8 | ## Disclaimer: This project is for legacy Firebase apps (version < 2.0). If you created an app using console.firebase.google.com this project will not work for you. Please see the [main AngularFire repo](https://github.com/firebase/angularfire/) for documentation on setting up an application with the new setup.
9 |
10 | [](https://travis-ci.org/firebase/angularfire-seed)
11 |
12 | This derivative of [angular-seed](https://github.com/angular/angular-seed) is an application
13 | skeleton for a typical [AngularFire](http://angularfire.com/) web app. You can use it to quickly
14 | bootstrap your Angular + Firebase projects.
15 |
16 | The seed is preconfigured to install the Angular framework, Firebase, AngularFire, and a bundle of
17 | development and testing tools.
18 |
19 | The seed app doesn't do much, but does demonstrate the basics of Angular + Firebase development,
20 | including:
21 | * binding synchronized objects
22 | * binding synchronized arrays
23 | * authentication
24 | * route security
25 | * basic account management
26 |
27 | ## How to use angularfire-seed
28 |
29 | Other than one additional configuration step (specifying your Firebase database URL), this setup is nearly
30 | identical to angular-seed.
31 |
32 | ### Prerequisites
33 |
34 | You need git to clone the angularfire-seed repository. You can get it from
35 | [http://git-scm.com/](http://git-scm.com/).
36 |
37 | We also use a number of node.js tools to initialize and test angularfire-seed. You must have node.js and
38 | its package manager (npm) installed. You can get them from [http://nodejs.org/](http://nodejs.org/).
39 |
40 | ### Clone angularfire-seed
41 |
42 | Clone the angularfire-seed repository using [git][git]:
43 |
44 | ```
45 | git clone https://github.com/firebase/angularfire-seed.git
46 | cd angularfire-seed
47 | ```
48 |
49 | ### Install Dependencies
50 |
51 | We have two kinds of dependencies in this project: tools and angular framework code. The tools help
52 | us manage and test the application.
53 |
54 | * We get the tools we depend upon via `npm`, the [node package manager][npm].
55 | * We get the angular code via `bower`, a [client-side code package manager][bower].
56 |
57 | We have preconfigured `npm` to automatically run `bower` so we can simply do:
58 |
59 | ```
60 | npm install
61 | ```
62 |
63 | Behind the scenes this will also call `bower install`. You should find that you have two new
64 | folders in your project.
65 |
66 | * `node_modules` - contains the npm packages for the tools we need
67 | * `app/bower_components` - contains the angular framework files
68 |
69 | *Note that the `bower_components` folder would normally be installed in the root folder but
70 | angularfire-seed changes this location through the `.bowerrc` file. Putting it in the app folder makes
71 | it easier to serve the files by a webserver.*
72 |
73 | ### Configure the Application
74 |
75 | 1. Open `app/config.js` and set the value of FBURL constant to your Firebase database URL
76 | 1. Go to your Firebase dashboard and enable email/password authentication under the Auth tab
77 | 1. Copy/paste the contents of `security-rules.json` into your Security tab, which is also under your Firebase dashboard.
78 |
79 | ### Run the Application
80 |
81 | We have preconfigured the project with a simple development web server. The simplest way to start
82 | this server is:
83 |
84 | ```
85 | npm start
86 | ```
87 |
88 | Now browse to the app at `http://localhost:8000/app/index.html`.
89 |
90 | ## Directory Layout
91 |
92 | app/ --> all of the files to be used in production
93 | app.js --> application
94 | config.js --> where you configure Firebase and auth options
95 | app.css --> default stylesheet
96 | index.html --> app layout file (the main html template file of the app)
97 | index-async.html --> just like index.html, but loads js files asynchronously
98 | components/ --> javascript files
99 | appversion/ --> The app-version directive
100 | auth/ --> A wrapper on the `$firebaseAuth` service
101 | firebase.utils/ --> Some convenience methods for dealing with Firebase event callbacks and refs
102 | ngcloak/ --> A decorator on the ngCloak directive so that it works with auth
103 | reverse/ --> A filter to reverse order of arrays
104 | security/ --> route-based security tools (adds the $routeProvider.whenAuthenticated() method and redirects)
105 | account/ --> the account view
106 | chat/ --> the chat view
107 | home/ --> the default view
108 | login/ --> login screen
109 | e2e-tests/ --> protractor end-to-end tests
110 | test/lib/ --> utilities and mocks for test units
111 |
112 | ## Testing
113 |
114 | There are two kinds of tests in the angularfire-seed application: Unit tests and End to End tests.
115 |
116 | ### Running Unit Tests
117 |
118 | The angularfire-seed app comes preconfigured with unit tests. These are written in
119 | [Jasmine][jasmine], which we run with the [Karma Test Runner][karma]. We provide a Karma
120 | configuration file to run them.
121 |
122 | * the configuration is found at `test/karma.conf.js`
123 | * the unit tests are found in `test/unit/`
124 |
125 | The easiest way to run the unit tests is to use the supplied npm script:
126 |
127 | ```
128 | npm test
129 | ```
130 |
131 | This script will start the Karma test runner to execute the unit tests. Moreover, Karma will sit and
132 | watch the source and test files for changes and then re-run the tests whenever any of them change.
133 | This is the recommended strategy; if your unit tests are being run every time you save a file then
134 | you receive instant feedback on any changes that break the expected code functionality.
135 |
136 | You can also ask Karma to do a single run of the tests and then exit. This is useful if you want to
137 | check that a particular version of the code is operating as expected. The project contains a
138 | predefined script to do this:
139 |
140 | ```
141 | npm run test-single-run
142 | ```
143 |
144 |
145 | ### End to end testing
146 |
147 | The angularfire-seed app comes with end-to-end tests, again written in [Jasmine][jasmine]. These tests
148 | are run with the [Protractor][protractor] End-to-End test runner. It uses native events and has
149 | special features for Angular applications.
150 |
151 | * the configuration is found at `e2e-tests/protractor-conf.js`
152 | * the end-to-end tests are found in `e2e-tests/scenarios.js`
153 |
154 | Protractor simulates interaction with our web app and verifies that the application responds
155 | correctly. Therefore, our web server needs to be serving up the application, so that Protractor
156 | can interact with it.
157 |
158 | ```
159 | npm start
160 | ```
161 |
162 | In addition, since Protractor is built upon WebDriver we need to install this. The angularfire-seed
163 | project comes with a predefined script to do this:
164 |
165 | ```
166 | npm run update-webdriver
167 | ```
168 |
169 | This will download and install the latest version of the stand-alone WebDriver tool.
170 |
171 | Once you have ensured that the development web server hosting our application is up and running
172 | and WebDriver is updated, you can run the end-to-end tests using the supplied npm script:
173 |
174 | ```
175 | npm run protractor
176 | ```
177 |
178 | This script will execute the end-to-end tests against the application being hosted on the
179 | development server.
180 |
181 |
182 | ## Updating Dependencies
183 |
184 | Previously we recommended that you merge in changes to angularfire-seed into your own fork of the project.
185 | Now that the angular framework library code and tools are acquired through package managers (npm and
186 | bower) you can use these tools instead to update the dependencies.
187 |
188 | You can update the tool dependencies by running:
189 |
190 | ```
191 | npm update
192 | ```
193 |
194 | This will find the latest versions that match the version ranges specified in the `package.json` file.
195 |
196 | You can update the Angular, Firebase, and AngularFire dependencies by running:
197 |
198 | ```
199 | bower update
200 | ```
201 |
202 | This will find the latest versions that match the version ranges specified in the `bower.json` file.
203 |
204 |
205 | ## Loading AngularFire Asynchronously
206 |
207 | The angularfire-seed project supports loading the framework and application scripts asynchronously. The
208 | special `index-async.html` is designed to support this style of loading. For it to work you must
209 | inject a piece of Angular JavaScript into the HTML page. The project has a predefined script to help
210 | do this.
211 |
212 | ```
213 | npm run update-index-async
214 | ```
215 |
216 | This will copy the contents of the `angular-loader.js` library file into the `index-async.html` page.
217 | You can run this every time you update the version of Angular that you are using.
218 |
219 |
220 | ## Serving the Application Files
221 |
222 | While Angular is client-side-only technology and it's possible to create Angular webapps that
223 | don't require a backend server at all, we recommend serving the project files using a local
224 | webserver during development to avoid issues with security restrictions (sandbox) in browsers. The
225 | sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr,
226 | etc to function properly when an html page is opened via `file://` scheme instead of `http://`.
227 |
228 |
229 | ### Running the App during Development
230 |
231 | The angularfire-seed project comes preconfigured with a local development webserver. It is a node.js
232 | tool called [http-server][http-server]. You can start this webserver with `npm start` but you may choose to
233 | install the tool globally:
234 |
235 | ```
236 | sudo npm install -g http-server
237 | ```
238 |
239 | Then you can start your own development web server to serve static files from a folder by
240 | running:
241 |
242 | ```
243 | http-server
244 | ```
245 |
246 | Alternatively, you can choose to configure your own webserver, such as apache or nginx. Just
247 | configure your server to serve the files under the `app/` directory.
248 |
249 |
250 | ### Running the App in Production
251 |
252 | This really depends on how complex your app is and the overall infrastructure of your system, but
253 | the general rule is that all you need in production are all the files under the `app/` directory.
254 | Everything else should be omitted.
255 |
256 | Angular/Firebase apps are really just a bunch of static html, css and js files that just need to be hosted
257 | somewhere they can be accessed by browsers.
258 |
259 | ## Continuous Integration
260 |
261 | ### Travis CI
262 |
263 | [Travis CI][travis] is a continuous integration service, which can monitor GitHub for new commits
264 | to your repository and execute scripts such as building the app or running tests. The angularfire-seed
265 | project contains a Travis configuration file, `.travis.yml`, which will cause Travis to run your
266 | tests when you push to GitHub.
267 |
268 | You will need to enable the integration between Travis and GitHub. See the Travis website for more
269 | instruction on how to do this.
270 |
271 | ### CloudBees
272 |
273 | CloudBees have provided a CI/deployment setup:
274 |
275 |
276 |
277 |
278 | If you run this, you will get a cloned version of this repo to start working on in a private git repo,
279 | along with a CI service (in Jenkins) hosted that will run unit and end to end tests in both Firefox and Chrome.
280 |
281 |
282 | ## Contact
283 |
284 | For more information on Firebase and AngularFire,
285 | check out https://firebase.com/docs/web/bindings/angular
286 |
287 | For more information on AngularJS please check out http://angularjs.org/
288 |
289 | [git]: http://git-scm.com/
290 | [bower]: http://bower.io
291 | [npm]: https://www.npmjs.org/
292 | [node]: http://nodejs.org
293 | [protractor]: https://github.com/angular/protractor
294 | [jasmine]: http://jasmine.github.io/1.3/introduction.html
295 | [karma]: http://karma-runner.github.io
296 | [travis]: https://travis-ci.org/
297 | [http-server]: https://github.com/nodeapps/http-server
298 |
--------------------------------------------------------------------------------