Question

我之前从未使用过Angular UI路由器，但我想构建一个具有嵌套视图的应用程序，因此它看起来是最明智的选择。然而。我只是无法理解它。我的应用程序是模块化的，所以我的页面上有一个元素，我希望其他模块及其视图模板加载到其中。

Application wireframe

然后当在其中一个嵌套视图中执行某些操作时，比如按一下按钮，我希望状态改变，以便模块成为主视图中唯一的模块，并且要更改URL：

Application wireframe - with state change

我正在使用CoffeeScript编写并使用Browserify将应用程序绑定在一起，因此所有模块都在单独的文件中并且是必需的。这是我到目前为止的地方，但它不起作用，我无法理解它进行。

app.coffee

require...
require...
require...

app = angular.module("darrylsnow", [
    "ngAnimate"
    "ui.router"
    "submodule1"
    "submodule2"
    "templates"
]).config [
    "$stateProvider"
    "$urlRouterProvider"
    "$locationProvider"
    ($stateProvider, $urlRouterProvider, $locationProvider) ->

        $urlRouterProvider
            .otherwise "/"

        $stateProvider
            .state "main",
                abstract: true  # because the main module requires the submodules
                url: "/"

        $locationProvider.html5Mode true
]

submodule1.coffee

submodule1 = angular.module("submodule1", [
    "ui.router"
]).config [
    "$stateProvider"
    "$urlRouterProvider"
    "$routeProvider"
    ($stateProvider, $urlRouterProvider, $routeProvider) ->

        $stateProvider
            .state "main.submodule1",
                url: ""
                templateUrl: "submodule1.html"
            .state "main.submodule1-expanded",
                url: "/submodule1" # template shouldn't change

]

submodule2.coffee

submodule2 = angular.module("submodule2", [
    "ui.router"
]).config [
    "$stateProvider"
    "$urlRouterProvider"
    "$routeProvider"
    ($stateProvider, $urlRouterProvider, $routeProvider) ->

        $stateProvider
            .state "main.submodule2",
                url: ""
                templateUrl: "submodule2.html"
            .state "main.submodule2-expanded",
                url: "/submodule2" # template shouldn't change

]

甚至可以在不同的模块中使用子状态吗？如果不是，你会怎么推荐我这样做？感谢。

Answer 1

有一个working example，我试图展示如何将angular，ui-router和coffee放在一起。虽然我不是100％确定你到底想要实现什么......你可以在那里找到一些答案和灵感。

首先是（简化的）index.html

  <head> 
    ...
    <script src="app.js"></script>
    <script src="submodule1.js"></script> 
    <script src="submodule2.js"></script>     
  </head>

  <body>
   <ul>    
    <a ui-sref="main.submodule1.expanded">main.submodule1.expanded</a>
    <a ui-sref="main.submodule2({id:22})">main.submodule2</a>
    <a ui-sref="main.submodule2-expanded({id:22})">main.submodule2-expanded</a>
    <div ui-view=""></div>
  </body>

现在，这将是app.coffee，其中最重要的部分是 template 。这将允许每个孩子将其视图注入此未命名的视图模板。另一种选择是使用绝对命名的视图，但这样做很简单：

app = angular.module("darrylsnow", [
    "ui.router"
    "submodule1"
    "submodule2"
]).config [
    "$stateProvider"
    "$urlRouterProvider"
    "$locationProvider"
    ($stateProvider, $urlRouterProvider, $locationProvider) ->

        $stateProvider
            .state "main",
                template: "<div ui-view />"
                abstract: true  # because the main module requires the submodules
                url: "/" 
     ...

其他文件代表真正不同的模块。

submodule1.coffeee的示例显示，即使在这里我们使用嵌套（main.submodule1.expanded是main.submodule1的子项）：

submodule1 = angular.module("submodule1", [
    "ui.router"
]).config [
    "$stateProvider"
    "$urlRouterProvider"
    "$locationProvider"
    ($stateProvider, $urlRouterProvider, $locationProvider) ->

        $stateProvider
            .state "main.submodule1",
                template: "<div ui-view />"
                abstract: true
            .state "main.submodule1.expanded",
                url: "/submodule1" # template shouldn't change
                templateUrl: "submodule1.html"
                controller: 'Some1Ctrl'

] 
submodule1.controller 'Some1Ctrl', [  
    "$scope"
    "$stateParams"
    "$state"
    ($scope, $stateParams, $state) ->
        $scope.params = $stateParams;
        $scope.state = $state.current;
]

作为一种不同的方法，我们可以使用兄弟姐妹作为submodule2.coffee显示：

submodule2 = angular.module("submodule2", [
    "ui.router"
]).config [
    "$stateProvider"
    "$urlRouterProvider"
    "$locationProvider"
    ($stateProvider, $urlRouterProvider, $locationProvider) ->

        $stateProvider
            .state "main.submodule2",
                templateUrl: "submodule2.html"
                controller: 'Some2Ctrl'
            .state "main.submodule2-expanded",
                url: "/submodule2/{id}" # template shouldn't change
                templateUrl: "submodule2.html"
                controller: 'Some2Ctrl'
       ...

在这个plunker

中，最好是如何将这些组合在一起

使用Angular UI Router和Browserify的模块化Angular应用程序

1 个答案: