AngularOrg - Wire up a Backend(後端鏈接)

時間 2019-11-20

標籤 angularorg wire backend 後端鏈接简体版

原文原文鏈接

ng-view
ng-href
ng-class
ng-disabled
ng-showjavascript

index.htmlcss

<!doctype html>
<html ng-app="project">
  <head>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-resource.min.js">
    </script>
   <script src="js/angular-route.min.js"></script>
   </script>
    <script src="js/firebase.js"></script>
    <script src="js/angularfire.min.js"></script>
    <script src="project.js"></script>
    <script src="project-list.js"></script>
    <link rel="stylesheet" href="css/bootstrap-combined.min.css">
  </head>
  <body>
    <h2>JavaScript Projects</h2>
    <div ng-view></div>
  </body>
</html>

list.htmlhtml

<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}}">edit</a></td>
        </tr>
    </tbody>
</table>

detail.htmljava

<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><br>
    <button ng-click="editProject.save()" ng-disabled="myForm.$invalid"class="btn btn-primary">Save</button><br>
    <button ng-click="editProject.destroy()"ng-show="editProject.project.$id" class="btn btn-danger">Delete</button>
</form>

project.jsreact

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('/');
        });
    };
});

project-list.jsjquery

angular.module('project').value('projectListValue', [
  {
    name: 'AngularJS',
    site: 'http://angularjs.org',
    description: 'HTML enhanced for web apps!'
  },
  {
    name: 'Angular',
    site: 'http://angular.io',
    description: 'One framework. Mobile and desktop.'
  },
  {
    name: 'jQuery',
    site: 'http://jquery.com/',
    description: 'Write less, do more.'
  },
  {
    name: 'Backbone',
    site: 'http://backbonejs.org/',
    description: 'Models for your apps.'
  },
  {
    name: 'SproutCore',
    site: 'http://sproutcore.com/',
    description: 'A Framework for Innovative web-apps.'
  },
  {
    name: 'Polymer',
    site: 'https://www.polymer-project.org/',
    description: 'Reusable components for the modern web.'
  },
  {
    name: 'Spine',
    site: 'http://spinejs.com/',
    description: 'Awesome MVC Apps.'
  },
  {
    name: 'Cappucino',
    site: 'http://www.cappuccino-project.org/',
    description: 'Objective-J.'
  },
  {
    name: 'Knockout',
    site: 'http://knockoutjs.com/',
    description: 'MVVM pattern.'
  },
  {
    name: 'GWT',
    site: 'http://www.gwtproject.org/',
    description: 'JS in Java.'
  },
  {
    name: 'Ember',
    site: 'http://emberjs.com/',
    description: 'Ambitious web apps.'
  },
  {
    name: 'React',
    site: 'https://facebook.github.io/react/',
    description: 'A JavaScript library for building user interfaces.'
  }
])

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。