AngularJS "Connect backend", for example, do not load data into the edit dialog

Question

I'm new to Firebase ... I'm trying to get an example of "Wire Up" on Angularjs ' to run locally.

I passed a common problem ngRouteand the application really works fine , with the exception of the edit dialog box, which does not load data from Firebase.

Partial loads list.htmlfine and display data, and detail.htmlalso load fine when loaded by a controller CreateCtrlthat saves the data in Firebaseas expected.

The problem is the controller EditCtrl, which provides detail.htmlpartial without data entry in the fields.

What offends me is that the example on the Angular page seems to use the same code, and everything works in the end. I tried to isolate the problem, to no avail.

I converted this example to an application and created a repository in Github . The repo is bloated with unrelated development material, but the application should work right from the ZIP file .

In fact, appreciate any exclamations, greetings!

app.js

var myAppModule = angular.module('project', ['ngRoute', 'firebase'])

.value('fbURL', 'https://color-consolidator.firebaseio.com')

.factory('Projects', function($firebase, fbURL) {
    return $firebase(new Firebase(fbURL));
});

myAppModule.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        controller:'ListCtrl',
        templateUrl:'list.html'
    })
    .when('/edit/:projectId', {
        controller:'EditCtrl',
        templateUrl:'detail.html'
    })
    .when('/new', {
        controller:'CreateCtrl',
        templateUrl:'detail.html'
    })
    .otherwise({
        redirectTo:'/'
    });
});

myAppModule.controller('ListCtrl', function($scope, Projects) {
    firebaseConn();
    $scope.projects = Projects;
});

myAppModule.controller('CreateCtrl', function($scope, $location, $timeout, Projects) {
    firebaseConn();
    $scope.save = function() {
        Projects.$add($scope.project, function() {
            $timeout(function() { $location.path('/'); });
        });
    };
});

myAppModule.controller('EditCtrl', function($scope, $location, $routeParams, $firebase, fbURL) {
    firebaseConn();
    var projectUrl = fbURL + $routeParams.projectId;
    $scope.project = $firebase(new Firebase(projectUrl));
    $scope.destroy = function() {
        $scope.project.$remove();
        $location.path('/');
    };
    $scope.save = function() {
        $scope.project.$save();
        $location.path('/');
    };
});

detail.html

<form class="form-group" name="myForm">
    <div class="form-group" ng-class="{error: myForm.name.$invalid}">
        <label class="control-label" for="name">Name</label>
        <input type="text" class="form-control" name="name" ng-model="project.name" required>
        <span class="help-block" ng-show="myForm.name.$error.required">Required</span>
    </div>
    <div class="form-group" ng-class="{error: myForm.site.$invalid}">
        <label class="control-label" for="site">Site URL</label>
        <input type="url" class="form-control" name="site" ng-model="project.site" required>
        <span class="help-block" ng-show="myForm.site.$error.required">Required</span>
        <span class="help-block" ng-show="myForm.site.$error.url">Not a URL</span>
    </div>
    <div class="form-group">
        <label for="description">Description</label>
        <textarea class="form-control" name="description" ng-model="project.description"></textarea>
    </div>
    <a href="#/" class="btn btn-default">Cancel</a>
    <button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="myForm.$invalid">Save</button>
    <button type="button" class="btn btn-danger" ng-click="destroy()" ng-show="project.$remove">Delete</button>
</form>

Answer 1

Change your urls:

from this:

https://color-consolidator.firebaseio.com

:

https://color-consolidator.firebaseio.com/

.