AngularJs：使用UI路由器

我试图实现iife而这种风格来单独我的文件中angularjs所以我必须将使用ui.router是config.js实现IIFE是这种方式实现AngularJs：使用UI路由器

//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

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

来源

2017-01-25 Vincent Echavez

你需要去的状态从开始的第一个权利：http://stackoverflow.com/a/41781397/2829204 – CozyAzure

我试图进入状态提到的帖子上的2种方式，但错误仍然发生。但正如我在对@Matthew Cawley的回复中所说的那样，当我将ui.router作为控制器中的依赖关系删除时，它删除了错误但没有发生，它没有重定向。 '））（angular.module（“appMain”，[“profileService”，“ui.grid”]））;' –

你不当创建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. 
     }); 
    };

来源

2017-01-25 07:50:08

我其实尝试过，但没有显示我的UI网格及其数据。我注意到的一件事是，当我试图只删除ui.router时，就像}）（angular.module（“appMain”，[“profileService”，“ui.grid”]））;错误消失，但没有重定向到profiledetails html –

更新的答案建议对promise的回调函数进行轻微修改（假设您从服务中返回一个承诺）。 –

我同意你，它应该使用服务，但现在它只是使用变量onProfiles为UI网格的数据。 –

可以使用相同的控制器在您的个人资料的细节是profileController

因此，在你的HTML你应该添加

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

<div ui-view></div>

使路由配置文件的细节可以处理

来源

2017-01-25 07:47:44

是啊对不起，我忘了在我的文章中包括。不适更新我的帖子。即使我有这个错误仍然会发生。 –

AngularJs：使用UI路由器

回答

相关问题