CODEWITHSUNDEEP
javascripthtmlangularjs
Harrison Tran
Harrison Tran

Reputation: 1621

AngularJS 1 include preformated html code from templates

I'm writing a tutorial website for angularjs using angularjs and I have a lot sections of sample code. So I have a bunch of <pre>&lt;html ng-app&gt;&lt;/html&gt;</pre> tags.

I want to put the code samples in a separate files but ng-include doesn't work on <pre></pre> tags. How would I put html code samples in separate files?

Small side question: what would you name the folder of those files? Would ./samples/ work?

I've tried this solution: https://stackoverflow.com/a/34164921/859082

But it doesn't seem to work because the sample doesn't stay preformatted for newlines and tabs and I don't know why it doesn't work. Here's my attempt using the previous solution: http://plnkr.co/edit/0nP76Im6XWWCleShsxAR?p=preview

Upvotes: 1

Views: 86

Answers (2)

Brian
Brian

Reputation: 5059

I forked your plunker, and came up with this plunker here. You could dynamically set the path, which would update the content.

HTML

  <body ng-app="app">
    <div ng-controller="mainCtrl">
      <pre ng-bind="content"></pre>
    </div>
  </body>

JS

angular
  .module('app', [])

  .controller('mainCtrl',function($scope,$http,$log){

    $http({
      method: 'GET',
      url: 'common1.html'
    }).then(function successCallback(resp) {
        $scope.content = resp.data;
      }, function errorCallback(response) {
        $log.warn('Could not locate file...');
      });

  });

Additional Plunks:

  1. Allow changing template that is displayed (change index to common1): http://plnkr.co/edit/s5N1nhYQ6SnJ7SVKHVas?p=preview
  2. View page's own code: http://plnkr.co/edit/hJm0b4SQzPTSeRrGmYCx?p=preview
  3. Multiple samples per page: http://plnkr.co/edit/Wtyp6xL1BViicoFUVOSb?p=preview

Upvotes: 1

Huy Chau
Huy Chau

Reputation: 2238

Set CSS white-space: pre-wrap; for your myPre directive.

Upvotes: 2

Related Questions