AngularJS 1延迟路线,直到加载模型

用户名

我刚刚开始学习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: '/' 
        }); 
    });

谁能帮我这个?

潘卡·帕克(Pankaj Parkar)

您可以使用resolveroute选项在加载数据之前等待查看加载。对于同样的方法,在工厂中创建一个方法,并通过返回对象将其公开给服务使用者。

工厂

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作为依赖项进行注入,该依赖项将从API返回数据。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章