在 Angular 页面的不同位置显示来自 API 的单独数据

Question

我有一个 SPA，它将在页面的两个不同部分显示来自 API 的数据。一个部分显示产品和价格。此信息将保留在页面上。另一部分是基本的 CRUD 视图。它允许用户创建新选择、阅读他们的选择、编辑他们的选择以及删除他们的选择。我正在尝试确定显示这两个视图的最佳方式。 CRUD 部分使用 ng-view。 price/product 部分应该使用指令、单独的控制器，还是应该将页面分成两个模块？

我是 Angular 的新手，我想确保我做的事情是正确的，以避免以后出现不可预见的问题。

HTML:

<div ng-view="">
<!--user selections go here -->
</div>

<!--Product/Price info will go here. Unsure whether to insert ng-app="new module", ng-controller="new controller", or a directive with its own element-->

Javascript 用于用户选择视图：

myApp.config(function ($routeProvider) {
$routeProvider

    .when('/list', {
        templateUrl: 'views/list.html',
        controller: 'ProjectListCtrl as projectList'
    })
    .when('/edit/:projectId', {
        templateUrl: 'views/detail.html',
        controller: 'EditProjectCtrl as editProject'
    })
    .when('/new', {
        templateUrl: 'views/detail.html',
        controller: 'NewProjectCtrl as editProject'
    })
  .otherwise({
    redirectTo: '/'
  });

 });

CRUD/用户表单部分的工厂：

myApp.factory('Projects', function($firebase, fbURL) {
return $firebase(new Firebase(fbURL+'/projects')).$asArray();
});

产品 list/price 部分的工厂：

myApp.factory('Products', function($firebase, fbURL) {
return $firebase(new Firebase(fbURL + '/products')).$asArray();
});

Answer 1

本机 Angular 路由器在创建复杂和嵌套的 UI 时受到限制，但 AngularUI Router 是一个很好的选择并且使用非常广泛。如果你想在你的界面中包含多个视图，那么这是要走的路。它并不比本地路由器复杂多少，但胜利是巨大的。

AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.

这里有一个 Plunker 来演示您的特定案例： http://plnkr.co/edit/xZD47L?p=preview

使用 ui-router 你可以命名视图

<div ui-view="viewName"></div>

并在相应的 ui-路由器配置中包含模板和控制器

myApp.config(function($stateProvider, $urlRouterProvider) {
  // For any unmatched url, redirect to /
  $urlRouterProvider.otherwise("/");
  $stateProvider
    .state('home',{
      url: "/",
      // list your views
      views: {
        "viewName": { 
          templateUrl: "viewName.html" ,
          controller: "viewNameCtrl"
        }
      }
   })
});

查看此 Wiki 以获得 Multiple Named Views。

希望对您有所帮助。

在 Angular 页面的不同位置显示来自 API 的单独数据

Displaying separate data from API in different places on page in Angular

angularjs

angularfire