Question

过去一周我一直在学习Angular，并着眼于在我的项目中使用它。该项目是一个食品订购网站。

页眉和页脚对所有页面/状态都是通用的。顶部导航是从类别列表生成的（见下文）。标题还将保存购物车图标和摘要，并在登录时显示用户的姓名。

产品层次结构中有三个级别：

顶级类别，将构成顶级菜单栏
子类别，将在侧栏中显示为菜单
以及每个子类别中的几个菜肴/产品

该应用程序具有以下主要状态：

具有特定内容的主页（带图片的滑块，带侧边栏的侧边栏）各种链接等）
带有子子类别的类别页面在侧栏和内容中也包含子类别的阵容，每个子类别都显示一行产品。
子类别状态可以是上述类别状态的子项，在侧栏中排列相同的子类别，但在显示该子类别中所有产品的内容中，使用“添加到购物车”按钮。
可以点击产品，然后页面内容区域显示该产品的详细视图（大图像，成分，添加到购物车）
当添加到购物车时，会弹出一个模式，显示刚添加的产品摘要，购物车上的总金额，仍然缺少的金额以满足最低订单，以及操作按钮继续订购和去结账
另一个州将是购物车页面
另一个是注册/登录页面
订单摘要页
当然，私人帐户区有设置，地址，过去订单

现在，我的问题是在状态结构中组织所有这些。

我已经提出了具有命名视图的状态层次结构，但我的主要问题是将各种视图中的数据连接在一起。例如，标题视图位于根状态，因为它对所有状态都是通用的。但是这个视图需要访问几个数据片段，其中一些只能用于其他视图：

顶级菜单阵容与类别。这是从应用程序加载时从API解析的所有类别和子类别的Json数组生成的，也可以在侧边栏和内容视图中使用。
购物车摘要
用户登录时的用户数据
此视图还需要将与正在访问的类别对应的菜单按钮标记为活动。类别ID可以直接在URL中传递，如/ cat / {id}，但也可以从所请求的子类别或产品中推断出来。会有/ subcat / {id}或/ product / {id}等网址。现在，这些URL参数不能直接用于根状态，而是直接用于实现它们的状态。

所以问题是，创建包含所有这些数据的存储库的最佳方法是什么？

应该可以从标题访问它，也可以从其他视图访问它。我发现的解决方案在我看来更像是黑客而不是正确的解决方案（例如为了将数据传递给父状态而引发事件等）。

我也对整个应用程序的整体组织建议持开放态度。我正在学习，所以我已经准备好抓住一切并重新开始。我希望能够确保我正在使用最好的方法完成任务。现在我觉得很古怪。

所以这就是我到目前为止所做的事情： *注意：我将默认的{{}} Angular表达式分隔符更改为{[{}}}，因为我还使用了Laravel刀片。

的index.html：

<!doctype html>
<html ng-app="app">
<head></head>

  <body>
    <div class="container">
      <div ui-view="header"></div>
    </div> <!-- /container -->

    <div class="container" ui-view="content"></div>

    <div class="container">
      <footer></footer>
    </div> <!-- /container -->
  </body>
</html>

app.js：

var app = angular.module('app', ['ui.router', 'ngResource'], function($interpolateProvider) {
        $interpolateProvider.startSymbol('{[{');
        $interpolateProvider.endSymbol('}]}');
    })
    .config(function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/home');

      $stateProvider
        .state('root', {
           abstract: true,
           resolve: {
                // A string value resolves to a service
                Config: 'Config',
                // A function value resolves to the return
                // value of the function
                config: function(Config){
                    return Config.query().$promise;
                  }
            },
            views: {
                "header": {
                    templateUrl: "/partials/header.html",
                    controller: function($scope, config, $stateParams){
                        // You can be sure that promiseObj is ready to use!
                        $scope.catsSubcats = config;
                        $scope.catId = $stateParams.catId;
                        $scope.getActiveClass = function (ccsubId,catId) {
                            console.log(ccsubId);
                            if (ccsubId == catId) return 'active'; else return '';
                        }
                    }
                }
            }
        })
        .state('root.home', {
            url:'/home',
            views: {
                "content@": {
                    templateUrl: "/partials/home-content.html"
                }
            }
        })
        .state('root.cat', {
            url:'/cat/:catId',
            resolve: {
                // Inject the config resolved in the main state
                // and extract the data we need
                data: function(config){
                  return config;
                }
              },
            views: {
                "content@": {
                    templateUrl: "/partials/cat.html"
                },
                "sidebar@root.cat": {
                    templateUrl: "/partials/cat-sidebar.html",
                    controller: "CatSidebarCtrl"
                },
                "content@root.cat": {
                    templateUrl: "/partials/cat-content.html",
                    controller: "CatContentCtrl"
                }
            }
        })
        .state('root/subcat/:subcatId', {
            url:'/subcat/:subcatId',
            templateUrl:'partials/subcat.html'
        })
    })


app.controller ('CatSidebarCtrl',
    function($scope , $stateParams, data ) { 
        var id = $stateParams.catId;
        $scope.catId = id; 
        //let's get the subcats for the current cat from the cats-subcats Json
        var index;
        var subcats;
        for (index = 0; index < data.length; ++index) {
            if ( data[index].id==id ) subcats = data[index].subcats;
        }
        $scope.subcats = subcats;
    }
);

app.controller ('CatContentCtrl',
    function($scope , $stateParams, data ) { 
        var id = $stateParams.catId;
        $scope.sidebar = id; 
        $scope.ccats = data;
    }
);

app.factory("Config", function($resource) {
  return $resource("/api/cats-subcats");
});

cat.html：

<div class="row">
    <div class="col-sm-5 col-md-3 sidebar" ui-view="sidebar"></div>

    <div class="col-sm-7 col-md-9 main" ui-view="content"></div>
</div> <!-- row -->

猫sidebar.html：

<ul class="nav nav-sidebar">
     <li ng-repeat="sub in subcats"><a href="#">{[{ sub.name }]}</a></li>
</ul>

cat-content.html - 目前尚未完成

使用Angularjs和UI-Router的App结构

0 个答案: