AngularJS 1 include preformated html code from templates

Question

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><html ng-app></html></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

Still looking for an answer for the folder name. Would ./samples/ work? — Harrison Tran
– Harrison Tran, Commented Jun 3, 2016 at 3:40

Huy Chau · Accepted Answer · 2016-06-03 03:24:09Z

2

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

answered Jun 3, 2016 at 3:24

Huy Chau

2,24821 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Harrison Tran Over a year ago

Thanks! I'm so frustrated that this took 4 hours to find out. Should of posted here sooner. Solution plnkr.co/edit/0nP76Im6XWWCleShsxAR?p=preview

Brian · Accepted Answer · 2016-06-03 05:06:44Z

1

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:

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

edited Jun 3, 2016 at 5:06

answered Jun 3, 2016 at 3:30

Brian

5,0693 gold badges22 silver badges30 bronze badges

12 Comments

Harrison Tran Over a year ago

Hmm, @WorkWe provided a solution for me. Would you say your solution is a better design? If so, why?

Brian Over a year ago

I would say that it is a better design, first and foremost because it allows you to write the included content as you would an actual HTML file. In this sample, it can load itself as the content: plnkr.co/edit/hJm0b4SQzPTSeRrGmYCx?p=preview. This will allow you to create and edit the included files with greater ease. Secondarily, I always shoot for simplicity, and in this case, it does not require any additional dependencies, and minimalizes required code to complete.

Brian Over a year ago

Also, I believe that if your goal is to dynamically set the file to load, it would be easier to handle this within the controller vs. having to create a function to change the template url in the directive.

Brian Over a year ago

I've added the plunker from above, and one other to the answer to demonstrate changing the template using a simple input field/button.

Harrison Tran Over a year ago

This is a great solution for my problem, I'm making the website as I'm learning the AngularJS 1 framework. Unfortunately, at this time I haven't learned jQuery or Mustache yet, so I don't fully understand your solution yet. I will definitely use it in the future when I do learn those frameworks.

|

Collectives™ on Stack Overflow

AngularJS 1 include preformated html code from templates

2 Answers 2

1 Comment

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related