CODEWITHSUNDEEP
angularjsangularjs-routing
Niner
Niner

Reputation: 2205

need advice on ng-view layout please

I am designing a page in angularjs that would be a mini SPA (single page app). This page is part of a larger web site that was written in traditional jquery and asp.net. The page will have 2 main sections - the 1st section is just some simple data elements that can be bound easily with ng-model's. The 2nd section will be dynamically generated based on user's interaction, and the data will be retrieved through ajax ($http or $resource).

So should I have ng-view on the whole content page that contains the 2 sections? Or should I only do ng-view on the 2nd dynamic sections? If it's better to have ng-view on the 2nd section only, how do I handle the routes in this case knowing that the 1st section's data should be preserved statically?

thanks.

Upvotes: 0

Views: 937

Answers (2)

Vadim
Vadim

Reputation: 8789

You don't have to use ng-view and routes for your simple case (widget-like angular application inside other application). You can use ng-include instead. Here is an example of application. I prefer this approach because it does not require to use shared resource like URL location hash that may be already in a use by legacy application or other widgets. Application below switch views dynamically, loads different data for each view and affects it's display options (number of displayed items):

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

You can also find useful examples of this approach in AngularJS documentation: http://docs.angularjs.org/api/ng.directive:ngInclude

Upvotes: 1

Lalit Sachdeva
Lalit Sachdeva

Reputation: 6619

yes you can separate the static view with the dynamic view, in actual this is what angularjs suggest.It is not required to move the scope of ng-app. so you can do like this: menu is displayed as the static part

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>

in your config file you can include your routing which page routes to which page and which controller to used on loading of any view.

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

Upvotes: 1

Related Questions