상세 내역을 db화 할때 full text가 encoding된 html text일 수 있다

등록할때 보통 text를 escape하거리 html encoding하여 db에 등록하곤한다.


angularjs 사용에서 db에 들어있는 html text를 화면에 바인딩 하려면 ng-bind-html을 이용한다.

html로 표현하며 바인딩하기


encoding된 html text를 ng-bind-html 로 바인딩 하면 decoding하여 표현만 하고 html이 적용된 모습으로 화면에 표현되진 않는다.

그래서

ng-bind-html을 이용할때는 decoding된 html full text를 $scope 영역에 담고 사용한다.




<p>상품상세 부분 html encoded text will be added</p>

<ol>

<li>상품의 상세정보를 기술한다</li>

<li>이미지를 첨부할 수 있다<img src="https://t1.daumcdn.net/cfile/tistory/996B28455C1F6FB206" alt="" width="530" height="808" /></li>

<li>기타 <a href="http://doitforyou.co.kr">링크를</a> 추가할 수 있따.</li>

</ol>


==>ENCODED HTML

&lt;p&gt;상품상세 부분 html encoded text will be added&lt;/p&gt;

&lt;ol&gt;

&lt;li&gt;상품의 상세정보를 기술한다&lt;/li&gt;

&lt;li&gt;이미지를 첨부할 수 있다&lt;img src=&quot;https://t1.daumcdn.net/cfile/tistory/996B28455C1F6FB206&quot; alt=&quot;&quot; width=&quot;530&quot; height=&quot;808&quot; /&gt;&lt;/li&gt;

&lt;li&gt;기타 &lt;a href=&quot;http://doitforyou.co.kr&quot;&gt;링크를&lt;/a&gt; 추가할 수 있따.&lt;/li&gt;

&lt;/ol&gt;'


=>



c#을 사용하고 있어

결과 dataset의 특정필드를 htmldecode시켜서 VIEW페이지로 리턴한다.


        private void getProdPrice(String sParam1)

        {

            bivrProdM oProd = new bivrProdM();


            DataSet dsResult = null;


            dsResult = oProd.GetProdPrice(sParam1);


            dsResult.Tables[0].Rows[0]["CONTENTS1"] = Server.HtmlDecode(dsResult.Tables[0].Rows[0]["CONTENTS1"].ToString());


            String jsonString = JsonConvert.SerializeObject(dsResult);

            Response.Write(jsonString);

        }




html page

 <div class="col-xs-12 col-sm-10 blog-content">

                                <a href="#"><img class="img-responsive img-blog" check-image ng-src="{{imageUrl}}" width="100%" alt="" /></a>

                                <h2><a href="blog-item.html">Consequat bibendum quam liquam viverra</a></h2>

                                <h3>Curabitur quis libero leo, pharetra mattis eros. Praesent consequat libero eget dolor convallis vel rhoncus magna scelerisque. Donec nisl ante, elementum eget posuere a, consectetur a metus. Proin a adipiscing sapien. Suspendisse vehicula porta lectus vel semper. Nullam sapien elit, lacinia eu tristique non.posuere at mi. Morbi at turpis id urna ullamcorper ullamcorper.</h3>

                                <a class="btn btn-primary readmore" href="blog-item.html">Read More <i class="fa fa-angle-right"></i></a>

                                htmlTest : [{{AddHtmlData}}] vs. [<span ng-bind-html="AddHtmlData"></span>]

                            </div>





--------------------------------------------

angularjs사용하기 위한 스크립트

--------------------------------------------



<script src="https://code.angularjs.org/1.7.6/angular.min.js"></script>

<script src="https://code.angularjs.org/1.7.6/angular-sanitize.min.js"></script>

    <script>


        var app = angular.module('myApp', ['ngSanitize']);


.......


   $http.get("/View/getProductDetails.aspx?oP=" + oParam1)

                .then(function (response) {

                    $scope.PDTLNAME = response.data.Table[0].PDTLNAME;

                    $scope.PINITAMT = response.data.Table[0].PINITAMT;

                    $scope.PTAXAMT = response.data.Table[0].PTAXAMT;

                    $scope.CONTENTSTITLE = response.data.Table[0].CONTENTSTITLE;

                   var  CONTENTS1= response.data.Table[0].CONTENTS1;

                    


                  //  var aa = "&lt;p&gt;상품상세 부분 html encoded text will be added&lt;/p&gt;&lt;ol&gt;&lt;li&gt;상품의 상세정보를 기술한다&lt;/li&gt;&lt;li&gt;이미지를 첨부할 수 있다&lt;img src=&quot;https://t1.daumcdn.net/cfile/tistory/996B28455C1F6FB206&quot; alt=&quot;&quot; width=&quot;530&quot; height=&quot;808&quot; /&gt;&lt;/li&gt;&lt;li&gt;기타 &lt;a href=&quot;http://doitforyou.co.kr&quot;&gt;링크를&lt;/a&gt; 추가할 수 있따.&lt;/li&gt;&lt;/ol&gt;";

                    $scope.AddHtmlData = CONTENTS1;


                   


                    //alert(response.data.records);

                }, function (response) {


                    //return $q.reject(response.status + " " + response.data.error);

                    alert(response.status + " " + response.data.error);

                });





DB를 핸들링하는 server-side 언어, php

반응형웹페이지디자인 : bootstrap

자바스크립트기반 웹어플리케이션 프레임웍 : angularjs

이것 3개 조합해서 웹페이지 만들기.


xmlhttp, ajax, jquery등 다양한 스크립트 형식의 모듈들이 많이 있었지만.

angularjs는 MVC패턴의 자바스크립트 프로그램방식으로 진행된다.

자바스크립트로 진행되지만 스크립트 같지 않은 아주 다양한 기능과 표준화, 개인생각임.. ㅋㅋ

모바일 웹앱만들때 가장 좋은것 같다.


angularjs를 적용한 html 페이지소스.




<html lang="en" ng-app="myApp">
<head>
...
 

        
Full Name: {{firstName + " " + lastName}}

Calc using AngularJs, expression: {{ 5 + 5 }}

{{ y.help_topic_id }} : {{ y.name }}
… /*angularjs 스크립트 적용부분은 웹페이지 맨 하단에 적용*/




angularjs 문법이 궁금하면, https://www.w3schools.com/angular/default.asp

'프로그래밍 > PHP' 카테고리의 다른 글

파일 업로드(move_uploaded_file)  (3) 2018.04.14
fileupload 에러메시지 설명  (0) 2018.04.14
json 데이타 사용하기  (0) 2018.03.28
Cookie 사용하기  (0) 2018.03.18
Session 사용하기  (0) 2018.03.17

+ Recent posts