AngularJS Подключите бэкэнд с / п с сайта не работает

Question

AngularJS Подключите бэкэнд с / п с сайта не работает

0

Я пытаюсь, чтобы этот пример работал в Visual Studio 2015. Я создал пустые файлы проекта и c/p с сайта, и по какой-то причине я получаю следующую ошибку:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=project&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.3%2Fangular.min.js%3A39%3A135)

Я немного искал Google и видел аналогичные проблемы с версией 1.2.x, предлагаемое исправление не работает. Что мне не хватает?

project.js

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

    .value('fbURL', 'https://ng-projects-list.firebaseio.com/')
    .service('fbRef', function(fbURL) {
      return new Firebase(fbURL)
    })
    .service('fbAuth', function($q, $firebase, $firebaseAuth, fbRef) {
      var auth;
      return function () {
          if (auth) return $q.when(auth);
          var authObj = $firebaseAuth(fbRef);
          if (authObj.$getAuth()) {
            return $q.when(auth = authObj.$getAuth());
          }
          var deferred = $q.defer();
          authObj.$authAnonymously().then(function(authData) {
              auth = authData;
              deferred.resolve(authData);
          });
          return deferred.promise;
      }
    })

    .service('Projects', function($q, $firebase, fbRef, fbAuth, projectListValue) {
      var self = this;
      this.fetch = function () {
        if (this.projects) return $q.when(this.projects);
        return fbAuth().then(function(auth) {
          var deferred = $q.defer();
          var ref = fbRef.child('projects-fresh/' + auth.auth.uid);
          var $projects = $firebase(ref);
          ref.on('value', function(snapshot) {
            if (snapshot.val() === null) {
              $projects.$set(projectListValue);
            }
            self.projects = $projects.$asArray();
            deferred.resolve(self.projects);
          });

          //Remove projects list when no longer needed.
          ref.onDisconnect().remove();
          return deferred.promise;
        });
      };
    })

    .config(function($routeProvider) {
      var resolveProjects = {
        projects: function (Projects) {
          return Projects.fetch();
        }
      };

      $routeProvider
        .when('/', {
          controller:'ProjectListController as projectList',
          templateUrl:'list.html',
          resolve: resolveProjects
        })
        .when('/edit/:projectId', {
          controller:'EditProjectController as editProject',
          templateUrl:'detail.html',
          resolve: resolveProjects
        })
        .when('/new', {
          controller:'NewProjectController as editProject',
          templateUrl:'detail.html',
          resolve: resolveProjects
        })
        .otherwise({
          redirectTo:'/'
        });
    })

    .controller('ProjectListController', function(projects) {
      var projectList = this;
      projectList.projects = projects;
    })

    .controller('NewProjectController', function($location, projects) {
      var editProject = this;
      editProject.save = function() {
          projects.$add(editProject.project).then(function(data) {
              $location.path('/');
          });
      };
    })

    .controller('EditProjectController',
      function($location, $routeParams, projects) {
        var editProject = this;
        var projectId = $routeParams.projectId,
            projectIndex;

        editProject.projects = projects;
        projectIndex = editProject.projects.$indexFor(projectId);
        editProject.project = editProject.projects[projectIndex];

        editProject.destroy = function() {
            editProject.projects.$remove(editProject.project).then(function(data) {
                $location.path('/');
            });
        };

        editProject.save = function() {
            editProject.projects.$save(editProject.project).then(function(data) {
               $location.path('/');
            });
        };
    });

index.html

        <!doctype html>
    <html ng-app="project">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-resource.min.js"></script>

        <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
        <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
        <script src="project.js"></script>

    </head>
    <body>
        <h2>JavaScript Projects</h2>
    <div ng-view></div>

    </body>
    </html>

list.html

        <input type="text" ng-model="projectList.search" class="search-query" id="projects_search"
           placeholder="Search">
    <table>
        <thead>
            <tr>
                <th>Project</th>
                <th>Description</th>
                <th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="project in projectList.projects | filter:projectList.search | orderBy:'name'">
                <td><a ng-href="{{project.site}}" target="_blank">{{project.name}}</a></td>
                <td>{{project.description}}</td>
                <td>
                    <a ng-href="#/edit/{{project.$id}}"><i class="icon-pencil"></i></a>
                </td>
            </tr>
        </tbody>
    </table>

detail.html

        <form name="myForm">
        <div class="control-group" ng-class="{error: myForm.name.$invalid && !myForm.name.$pristine}">
            <label>Name</label>
            <input type="text" name="name" ng-model="editProject.project.name" required>
            <span ng-show="myForm.name.$error.required && !myForm.name.$pristine" class="help-inline">
                Required {{myForm.name.$pristine}}
            </span>
        </div>

        <div class="control-group" ng-class="{error: myForm.site.$invalid && !myForm.site.$pristine}">
            <label>Website</label>
            <input type="url" name="site" ng-model="editProject.project.site" required>
            <span ng-show="myForm.site.$error.required && !myForm.site.$pristine" class="help-inline">
                Required
            </span>
            <span ng-show="myForm.site.$error.url" class="help-inline">
                Not a URL
            </span>
        </div>

        <label>Description</label>
        <textarea name="description" ng-model="editProject.project.description"></textarea>

        <br>
        <a href="#/" class="btn">Cancel</a>
        <button ng-click="editProject.save()" ng-disabled="myForm.$invalid"
                class="btn btn-primary">
            Save
        </button>
        <button ng-click="editProject.destroy()"
                ng-show="editProject.project.$id" class="btn btn-danger">
            Delete
        </button>
    </form>

Дерево проекта

Может кто-то указать мне верное направление. благодаря

azza idz 30 март 2016, в 17:10

Источник

Теги:

angularjs

visual-studio-2015

1 ответ

Ещё вопросы

TheOpti · Answer 1 · 2016-03-30T11-33-00.000Z

Вы пытаетесь внедрить службу projectListValue которая не определена для вашего модуля с именем project.

Когда я удаляю параметр, я больше не получаю ошибки, но я также не получаю список с элементами. Как я могу это исправить?