需要关于ng-view布局的建议请

我正在设计一个可以成为mini SPA（单页应用）的angularjs页面。这个页面是用传统的jQuery和asp.net编写的大型网站的一部分。该页面将有2个主要部分 - 第1部分只是一些简单的数据元素，可以很容易地与ng-model绑定。第二部分将根据用户的交互动态生成，数据将通过ajax（$ http或$ resource）进行检索。需要关于ng-view布局的建议请

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

谢谢。

来源

2014-02-06 Niner

您可以确定NG-应用要使用Angular。所以你的ng-app指令页面不会是Angular应用程序。 – KoIIIeY

您不必使用ng-view和路线为您简单的情况下（其他应用程序内部部件样的角度应用程序）。您可以改用ng-include。这是一个应用程序的例子。我更喜欢这种方法，因为它不需要使用URL位置散列等共享资源，这可能已被传统应用程序或其他小部件所使用。下面开关视图应用动态地加载不同的数据为每个视图和影响它的显示选项（显示的项目的数目）：

HTML

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script data-require="[email protected]*" 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>'); 
});

厂景.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

来源

2014-02-06 08:06:56 Vadim

是的，你可以分离静态视图与动态视图，实际上这是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'});

来源

2014-02-06 07:40:13

需要关于ng-view布局的建议请

回答

相关问题