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路由器

回答

相關問題