Question

我正在设计一个angularjs页面，它将是一个迷你SPA（单页面应用程序）。此页面是使用传统jquery和asp.net编写的大型网站的一部分。该页面将包含2个主要部分 - 第1部分只是一些简单的数据元素，可以使用ng-model轻松绑定。第二部分将根据用户的交互动态生成，数据将通过ajax（$ http或$ resource）检索。

那么我应该在包含2个部分的整个内容页面上使用ng-view吗？或者我应该只在第二个动态部分进行ng-view？如果最好只在第二部分使用ng-view，那么在这种情况下如何处理路由，知道第一部分的数据应该静态保存？

感谢。

Answer 1

是的，您可以将静态视图与动态视图分开，实际上这是angularjs建议的内容。不需要移动ng-app的范围。所以你可以这样做：菜单显示为静态部分

index.html
    <body ng-app>
      <ul class="menu">
        <li><a href="#/view1">view1</a></li>
        <li><a href="#/view2">view2</a></li>
      </ul>

      <div ng-view></div>
    </body>

在您的配置文件中，您可以包含路由，哪个页面路由到哪个页面以及在加载任何视图时使用哪个控制器。

config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});

Answer 2

您不必为您的简单案例使用ng-view和路由（在其他应用程序中使用类似小部件的角度应用程序）。您可以改用ng-include。这是一个应用示例。我更喜欢这种方法，因为它不需要使用共享资源，例如可能已被遗留应用程序或其他小部件使用的URL位置哈希。下面的应用程序动态切换视图，为每个视图加载不同的数据并影响它的显示选项（显示的项目数）：

<强> HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Here is my legacy app markup</h1>
    <div ng-app="app" ng-controller="appController">
      <div>
        <input placeholder="Number of items" ng-model="numberOfItems"/><br/>
        <select placeholder="View" ng-model="currentView" ng-options="view.name for view in views"></select>
      </div>
      <div ng-include="currentView.url"></div>
    </div>
    <div id="jqueryContainer">And here is some markup generated with jQuery<br /></div>
  </body>

</html>

<强>的JavaScript

angular.module('app', []).
  controller('appController', function($scope, $http) {
    $scope.views = [{
      name: 'view1',
      url: 'view1.html',
      dataUrl: 'data1.json'
    }, {
      name: 'view2',
      url: 'view2.html',
      dataUrl: 'data2.json'
    }];
    $scope.numberOfItems = 2;
    $scope.currentView = $scope.views[0];

    $scope.$watch('currentView', function(currentView) {
      if(currentView && currentView.dataUrl) {
        $http.get(currentView.dataUrl).success(function(data) {
          $scope.data = data;
        });
      }
    });
  });

$(function(){
  $('#jqueryContainer').append('<span>Some markup generated dynamically.</span>');
});

<强> view1.html

<div>
  <h2>View1 specific markup {{data.length}}</h2>
  <ul>
    <li ng-repeat="item in data | limitTo:numberOfItems">{{item.text}}</li>
  </ul>
</div>

<强> data1.json

[{"text":"Text1"},{"text":"Text2"},{"text":"Text3"},{"text":"Text4"},{"text":"Text5"}]

Plunker：http://plnkr.co/edit/Y5IZmPbrrO63YrL8uCkc?p=preview

您还可以在AngularJS文档中找到此方法的有用示例：http://docs.angularjs.org/api/ng.directive:ngInclude

需要有关ng-view布局的建议

2 个答案: