Javascript AngularJs：使用ui路由器实现IIFE_Javascript_Html_Angularjs

Javascript AngularJs：使用ui路由器实现IIFE

javascript html angularjs

Javascript AngularJs：使用ui路由器实现IIFE,javascript,html,angularjs,Javascript,Html,Angularjs,我正在尝试实现iife和这种风格，以在angularjs中分离我的文件，因此我有config.js，它将使用以这种方式实现的ui.router //config.js (function (module) { "use strict"; module.config([ "$stateProvider","$urlRouterProvider","$locationProvider", function ($stateProvider, $urlRouter

我正在尝试实现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>

在运行代码并单击链接时，chrome中出现一个错误，称“错误：无法从状态“”解析'profiledetails'。不确定我的iLife实现是否导致了这个问题。请有人告诉我正确的路径。

您在配置文件详细信息中使用了相同的控制器，即

profileController

因此，在您的html中，您应该添加

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

<div ui-view></div>

因此，路由到配置文件详细信息可以处理

在创建

配置文件控制器

时，您不需要重新注入模块的依赖项，并且iLife参数应该紧跟在结束的花括号之后，因此：

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

可以成为：

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

这样，您就可以检索以前创建的模块，而不是创建一个新模块。有关这方面的注意事项，请参见文档部分

另外，

onProfiles

是一个数组（不是函数），因此我认为您需要更改：

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

更像这样：

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

你需要从一开始就先进入一个状态：我尝试了两种方法来进入文章中提到的状态，但是错误仍然发生。但正如我在回复@Matthew Cawley时所说，当我在控制器中将ui.router作为依赖项删除时，它删除了错误，但没有发生任何事情，它没有重定向<代码>}）（angular.module（“appMain”，“profileService”，“ui.grid”]）我确实尝试过，但它没有显示我的ui网格及其数据。我注意到的一件事是，当我试图删除ui.router时，仅像}）（angular.module（“appMain”，“profileService”，“ui.grid”）；错误消失了，但它没有重定向到profiledetails htmlUpdated answer，建议稍微修改promise的回调函数（假设您从服务返回承诺）。我同意您的看法，它本应该使用一个服务，但现在它只使用一个变量onProfiles作为ui网格的数据。看起来这真的是一个关于我如何实现依赖关系的问题，我将所有依赖关系都放在config.js

}（angular.module（“appMain”，“ui.grid”，“ui.router”，“profileService”）在控制器中时，我只需要修改这个}（angular.module（“appMain”）它确实正常工作，现在它重定向到profiledetails。我为代码更新了我的帖子。如果我仍然需要修改某些东西来改进代码，请给出建议。谢谢你的帮助。不，数组是一个临时值，只是为了将数据放在网格上，稍后我将在函数中使用结果来调用服务，数组值将被删除。是的，很抱歉，我忘了在我的帖子中包含它。我会更新我的帖子。即使我有这个错误，它仍然会发生。
function getProfiles() {
    profileService.getProfiles()
        .then(function(result){
             // do something with the "onProfiles" array here.
        });
    };