googlearchive / generator-angularfire

Yeoman generator for AngularFire: Angular + Firebase apps
191 stars 52 forks source link

Upgrade to AngularFire 1.0.0 #47

Closed jwngr closed 9 years ago

jwngr commented 9 years ago

Let's make this thing official!

jlognn commented 9 years ago

It was actually a lot simpler than I thought, just used the CDN release of 1.0.0 in place of the bower dep, and followed the migration guide to change out the relevant parts of fire base-utils and simple-login

jwngr commented 9 years ago

Yup, the transition process should be pretty straight-forward. We just haven't gotten around to doing it yet. Glad you got everything working!

jmlivingston commented 9 years ago

For those looking for a solution, I had to update firebase.utils.js and make a few bower and npm updates.

Steps:

  1. Replace all the files below.
  2. Delete bower_components and node_modules directories.
  3. Run the following commands:
    • npm install
    • bower install
    • grunt build
    • grunt serve

//firebase.utils.js (COMMENTS NOT UPDATED)

// a simple wrapper on Firebase and AngularFire to simplify deps and keep things DRY
angular.module('firebase.utils', ['firebase', 'firebase.config'])
    .factory('fbutil', ['$window', 'FBURL', '$firebaseObject', '$firebaseArray',
        function($window, FBURL, $firebaseObject, $firebaseArray) {
            'use strict';

            return {
                syncObject: function(path, factoryConfig) { // jshint ignore:line
                    return $firebaseObject(syncData.apply(null, arguments));
                },

                syncArray: function(path, factoryConfig) { // jshint ignore:line
                    return $firebaseArray(syncData.apply(null, arguments));
                },

                ref: firebaseRef
            };

            function pathRef(args) {
                for (var i = 0; i < args.length; i++) {
                    if (angular.isArray(args[i])) {
                        args[i] = pathRef(args[i]);
                    } else if (typeof args[i] !== 'string') {
                        throw new Error('Argument ' + i + ' to firebaseRef is not a string: ' + args[i]);
                    }
                }
                return args.join('/');
            }

            /**
             * Example:
             * <code>
             *    function(firebaseRef) {
             *       var ref = firebaseRef('path/to/data');
             *    }
             * </code>
             *
             * @function
             * @name firebaseRef
             * @param {String|Array...} path relative path to the root folder in Firebase instance
             * @return a Firebase instance
             */
            function firebaseRef(path) { // jshint ignore:line
                var ref = new $window.Firebase(FBURL);
                var args = Array.prototype.slice.call(arguments);
                if (args.length) {
                    ref = ref.child(pathRef(args));
                }
                return ref;
            }

            /**
             * Create a $firebase reference with just a relative path. For example:
             *
             * <code>
             * function(syncData) {
             *    // a regular $firebase ref
             *    $scope.widget = syncData('widgets/alpha');
             *
             *    // or automatic 3-way binding
             *    syncData('widgets/alpha').$bind($scope, 'widget');
             * }
             * </code>
             *
             * Props is the second param passed into $firebase. It can also contain limit, startAt, endAt,
             * and they will be applied to the ref before passing into $firebase
             *
             * @function
             * @name syncData
             * @param {String|Array...} path relative path to the root folder in Firebase instance
             * @param {object} [props]
             * @return a Firebase instance
             */
            function syncData(path, props) {
                var ref = firebaseRef(path);
                props = angular.extend({}, props);
                angular.forEach(['limitToFirst', 'limitToLast', 'orderByKey', 'orderByChild', 'orderByPriority', 'startAt', 'endAt'], function(k) {
                    if (props.hasOwnProperty(k)) {
                        var v = props[k];
                        ref = ref[k].apply(ref, angular.isArray(v) ? v : [v]);
                        delete props[k];
                    }
                });
                return ref;
            }
        }
    ]);

//bower.json (REPLACE NAME)

{
    "name": "yourappname",
    "version": "0.0.0",
    "dependencies": {
        "angular": "~1.4",
        "json3": "~3.3.1",
        "es5-shim": "~4.1.0",
        "bootstrap": "~3.3.4",
        "angular-resource": "~1.4",
        "angular-cookies": "~1.4",
        "angular-sanitize": "~1.4",
        "angular-animate": "~1.4",
        "angular-touch": "~1.4",
        "angular-route": "~1.4",
        "firebase": "~2.2.3",
        "angularfire": "~1.0.0",
        "angular-mocks": "~1.4",
        "angular-scenario": "~1.4",
        "mockfirebase": "~0.11.0",
        "angular-messages": "~1.4",
        "angular-aria": "~1.4"
    },
    "devDependencies": {
        "angular-mocks": "1.3.0",
        "angular-scenario": "1.3.0",
        "mockfirebase": "0.8.x",
        "angular-animate": "~1.3.15"
    },
    "appPath": "app"
}

//package.json (REPLACE NAME)

{
    "name": "yourappname",
    "version": "0.0.0",
    "dependencies": {},
    "devDependencies": {
        "chalk": "^1.0.0",
        "grunt": "^0.4.5",
        "grunt-autoprefixer": "^2.2.0",
        "grunt-concurrent": "^1.0.0",
        "grunt-contrib-clean": "^0.6.0",
        "grunt-contrib-concat": "^0.5.1",
        "grunt-contrib-connect": "^0.9.0",
        "grunt-contrib-copy": "^0.8.0",
        "grunt-contrib-cssmin": "^0.12.2",
        "grunt-contrib-htmlmin": "^0.4.0",
        "grunt-contrib-imagemin": "^0.9.4",
        "grunt-contrib-jshint": "^0.11.1",
        "grunt-contrib-uglify": "^0.8.0",
        "grunt-contrib-watch": "^0.6.1",
        "grunt-filerev": "^2.2.0",
        "grunt-google-cdn": "^0.4.3",
        "grunt-karma": "^0.10.1",
        "grunt-newer": "^1.1.0",
        "grunt-ng-annotate": "^0.10.0",
        "grunt-svgmin": "^2.0.1",
        "grunt-usemin": "^3.0.0",
        "grunt-wiredep": "^2.0.0",
        "jasmine-core": "^2.2.0",
        "jshint-stylish": "^1.0.1",
        "karma": "^0.12.31",
        "karma-jasmine": "^0.3.5",
        "karma-phantomjs-launcher": "^0.1.4",
        "load-grunt-tasks": "^3.1.0",
        "time-grunt": "^1.1.0"
    },
    "engines": {
        "node": ">=0.10.0"
    },
    "scripts": {
        "test": "grunt test"
    }
}
jwngr commented 9 years ago

Thanks @jmlivingston. We do take pull requests if you are up for putting together some official changes.

katowulf commented 9 years ago

I'm mostly done with the 1.0.0 upgrade, which includes the latest merge of generator-angular.

jmlivingston commented 9 years ago

Sweet! Awesome work by the way. I'm really digging Firebase, with the exception of binding directly to the $scope. Would be great to use with the controllerAs syntax, especially with $scope going away in Angular 2.0. https://github.com/johnpapa/angular-styleguide#style-y032

P.S. Will take you up on pull requests next time. @jwngr

katowulf commented 9 years ago

Angular 2.0 is a whole other beast. It doesn't really have controllers in the traditional sense. Your note about controllerAs syntax is still a great idea and should be posted on the generator-angular repo. Once it's integrated there, we can merge it to this project.