Question

我刚开始学习AngularJS，正在建立一个网站来培养我的技能。

我试图将角度从路由延迟到新页面，直到加载JSON数据。

我无法找到使用角度工厂加载JSON的堆栈溢出的答案。

我的文件如下。

services.js

app.factory('contactFormData', ['$http', function($http, $q) {
    return $http.get('json/eager-contactform.json')
    .success(function(data) {
        return data;
    })
    .error(function(err) {
        return err;
    })
}])

ContactController.js

app.controller('ContactController', ['$scope', 'contactFormData', '$http', function($scope, contactFormData, $http) {
    contactFormData.success(function(data) {
        $scope.contactFormData = data;
    })

    $scope.success = false;
    $scope.error = false;

    $scope.sendMessage = function(value) {
      $http({
          method: 'POST',
          url: 'php/eagerContact.php',
          data: value,
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      })
      .success( function(data) {
        if ( data.success ) {
          $scope.success = true;
        } else {
          $scope.error = true;
        }
      });
    }
}]);

app.js

var app = angular
    .module("eager", ['ngSanitize', 'ngRoute'])
    .config(function ($routeProvider) { 
      $routeProvider 
        .when('/contact', { 
          controller: 'ContactController', 
          templateUrl: 'views/contact.html',
        }) 
        .otherwise({ 
          redirectTo: '/' 
        }); 
    });

任何人都可以帮我吗？

Answer 1

您可以使用路由的app.factory('contactFormData', ['$http', function($http, $q) { var getEagerContactForm = function() { return $http.get('json/eager-contactform.json'); } return { getEagerContactForm: getEagerContactForm } }])选项在数据加载之前等待查看加载。对于同样的工厂和工厂创建方法通过返回对象将其暴露给服务消费者。

<强>工厂

$routeProvider
.when('/contact', { 
  controller: 'ContactController', 
  templateUrl: 'views/contact.html',
  resolve: {
     data: function(contactFormData){
        return contactFormData.getEagerContactForm();
     }
  }
})

<强>配置

ContactController

在data内，你可以注入C1-C2 = transpose([v2 -v1] * transpose([t s])作为依赖项，它将从API返回数据。

AngularJS 1延迟路径，直到加载模型

1 个答案: