Question

我正在尝试实现iife和这种风格来分离我在angularjs中的文件，所以我有config.js将使用以这种方式实现的ui.router

//config.js
(function (module) {
    "use strict";
    module.config([
        "$stateProvider","$urlRouterProvider","$locationProvider",
    function ($stateProvider, $urlRouterProvider,$locationProvider) {

            $urlRouterProvider.otherwise("/Views/Profile.html");

            $stateProvider
                    .state("profile", {
                        url: "/",
                        templateUrl: "Profile.html",
                        controller: "profileController as vm"
                    })
                    .state("profiledetails", {
                        url: "ProfileDetails",
                        templateUrl:"ProfileDetails.html",
                        controller: "profileController as vm"
                    })

        }
    ])

})(angular.module("appMain", ["ui.grid","ui.router","profileService"]));

我有这个profile.html，它有一个指向profiledetail.html的链接

<!DOCTYPE html>
<html ng-app="appMain">

<head>
  <title></title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />

  <link href="../Content/ui-grid.css" rel="stylesheet" />
  <link href="../Content/bootstrap.min.css" rel="stylesheet" />

</head>

<body class="container-fluid">
  <div ng-controller="profileController">
    <div id="profileGrid" ui-grid="gridOptions"></div>
  </div>
  <script src="../scripts/angular.js"></script>
  <script src="../scripts/angular-ui-router.js"></script>

  <script src="../scripts/angular-resource.js"></script>
  <script src="../scripts/ui-grid.min.js"></script>
  <script src="../scripts/App/config.js"></script>
  <script src="../scripts/App/Profile/profileService.js"></script>
  <script src="../scripts/App/Profile/profileController.js"></script>

  <script src="../scripts/App/helper.js"></script>

  <a href="#" ui-sref="profiledetails" class="btn btn-primary">profile details</a>
  <div ui-view></div>
</body>

</html>

这是我的profilecontroller.js

   (function(module) {
      "use strict";
      module.controller("profileController", ["$scope", "profileService", profileController]);

      function profileController($scope, profileService) {
        var vm = this;
        var scope = $scope;
        vm.profiles = getProfiles;
        var onProfiles = [{
          firstName: "Juan",
          lastName: "Dela Cruz"
        }, {
          firstName: "Andres",
          lastName: "Cruz"
        }];

        function getProfiles() {
          profileService.getProfiles()
            .then(onProfiles(result));
        };
        scope.gridOptions = {
          enableSorting: true,
          columnDefs: [{
            name: "firstName",
            field: "firstName"
          }, {
            name: "lastName",
            field: "lastName"
          }],
          data: onProfiles
        };
      }
 }(angular.module("appMain")));

在运行代码并点击链接时，Chrome中出现错误，说“错误：无法从状态''解析'profiledetails'”。不确定我的iife实施是否导致了这个问题。请有人指导我走正确的道路。

Answer 1

您在个人资料详细信息中使用相同的控制器profileController

所以在你的html中你应该添加

<a href="#" ui-sref="profiledetails" class="btn btn-primary">profile details</a>

<div ui-view></div>

这样可以处理到配置文件详细信息的路由

Answer 2

创建profileController时不需要重新注入模块的依赖项，而iife参数应该立即遵循结束的大括号，所以：

})(angular.module("appMain", ["profileService", "ui.grid","ui.router"]));

可以成为：

}(angular.module("appMain")));

这样您就可以检索以前创建的模块，而不是创建新模块。有关此问题的说明，请参阅文档的Creation versus Retrieval部分。

同样onProfiles是一个数组（不是函数），所以我认为你需要改变它：

function getProfiles() {
    profileService.getProfiles()
        .then(onProfiles(result));
    };

更像这样的事情：

function getProfiles() {
    profileService.getProfiles()
        .then(function(result){
             // do something with the "onProfiles" array here.
        });
    };

AngularJs：使用ui路由器实现IIFE

2 个答案: