Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS "Wire up a Backend" example is still not working well
    primarykey
    data
    text
    <p>I am trying to run (locally) the third example in AngularJS <a href="http://angularjs.org/new" rel="nofollow noreferrer">http://angularjs.org/new</a> called "Wire up a Backend" with no luck (on Chrome).</p> <p>It complains about: </p> <pre><code> Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.6/$injector/modulerr?p0=project&amp;p1=Error%3A… oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.6%2Fangular.min.js%3A29%3A56) angular.js:3577 </code></pre> <p>Here is the HTML/JS files:</p> <p><strong>index.html:</strong></p> <pre><code> &lt;!doctype html&gt; &lt;html ng-app="project"&gt; &lt;head&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular- route.js"&gt;&lt;/script&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"&gt; &lt;/script&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular- resource.min.js"&gt; &lt;/script&gt; &lt;script src="https://cdn.firebase.com/v0/firebase.js"&gt;&lt;/script&gt; &lt;script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"&gt; &lt;/script&gt; &lt;script src="project.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt;JavaScript Projects&lt;/h2&gt; &lt;div ng-view&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>project.js</strong></p> <pre><code> angular.module('project', ['ngRoute', 'firebase']) .value('fbURL', 'https://angularjs-projects.firebaseio.com/') .factory('Projects', function($firebase, fbURL) { return $firebase(new Firebase(fbURL)); }) .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:'/' }); }) .controller('ListCtrl', function($scope, Projects) { $scope.projects = Projects; }) .controller('CreateCtrl', function($scope, $location, $timeout, Projects) { $scope.save = function() { Projects.$add($scope.project, function() { $timeout(function() { $location.path('/'); }); }); }; }) .controller('EditCtrl', function($scope, $location, $routeParams, $firebase, fbURL) { 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('/'); }; }); </code></pre> <p><strong>list.html</strong></p> <pre><code> &lt;input type="text" ng-model="search" class="search-query" placeholder="Search"&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Project&lt;/th&gt; &lt;th&gt;Description&lt;/th&gt; &lt;th&gt;&lt;a href="#/new"&gt;&lt;i class="icon-plus-sign"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr ng-repeat="project in projects | orderByPriority | filter:search | orderBy:'name'"&gt; &lt;td&gt;&lt;a href="{{project.site}}" target="_blank"&gt;{{project.name}}&lt;/a&gt; &lt;/td&gt; &lt;td&gt;{{project.description}}&lt;/td&gt; &lt;td&gt; &lt;a href="#/edit/{{project.$id}}"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p><strong>details.html</strong></p> <pre><code> &lt;form name="myForm"&gt; &lt;div class="control-group" ng-class="{error: myForm.name.$invalid}"&gt; &lt;label&gt;Name&lt;/label&gt; &lt;input type="text" name="name" ng-model="project.name" required&gt; &lt;span ng-show="myForm.name.$error.required" class="help-inline"&gt; Required&lt;/span&gt; &lt;/div&gt; &lt;div class="control-group" ng-class="{error: myForm.site.$invalid}"&gt; &lt;label&gt;Website&lt;/label&gt; &lt;input type="url" name="site" ng-model="project.site" required&gt; &lt;span ng-show="myForm.site.$error.required" class="help-inline"&gt; Required&lt;/span&gt; &lt;span ng-show="myForm.site.$error.url" class="help-inline"&gt; Not a URL&lt;/span&gt; &lt;/div&gt; &lt;label&gt;Description&lt;/label&gt; &lt;textarea name="description" ng-model="project.description"&gt;&lt;/textarea&gt; &lt;br&gt; &lt;a href="#/" class="btn"&gt;Cancel&lt;/a&gt; &lt;button ng-click="save()" ng-disabled="myForm.$invalid" class="btn btn-primary"&gt;Save&lt;/button&gt; &lt;button ng-click="destroy()" ng-show="project.$remove" class="btn btn-danger"&gt;Delete&lt;/button&gt; &lt;/form&gt; </code></pre> <p>Am I missing something?</p> <p>By the way, I read other posts on relating to this issue, for instance: <a href="https://stackoverflow.com/questions/18253856/angularfire-beginner-doesnt-work-example-wire-up-a-backend-from-angularjs-org">AngularFire beginner doesn&#39;t work example &quot;Wire up a Backend&quot; from angularjs.org (solved-no css ref., chrome issue duplicated)</a> but this was with older angularJS version and different error which apparently was missing bootstrap css</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload