Hi Alexandre,

This is how you would modify the Hybrid Framework news item page to use Angular to get a news item from Umbraco and show on the front-end.

First, create a news item DTO which is what will be returned from the API:

using System;

namespace Umbraco.Extensions.Models.Custom
{
    public class NewsItemDto
    {
        public string BodyText { get; set; }
        public DateTime CurrentDate { get; set; }
        public string Title { get; set; }
    }
}

The BodyText property here is what will contain the HTML from your RTE.

The reason for returning a DTO instead of the content model itself is that the content model will contain a bunch of extra properties that aren't needed on the front-end and that you may not want to expose. Creating a DTO gives you full control over the response so you can keep it as lightweight as possible.

Next create an API controller with a method to get a news item by ID:

using Umbraco.Extensions.Models.Custom;
using Umbraco.Extensions.Models.Generated;
using Umbraco.Web.WebApi;

namespace Umbraco.Extensions.Controllers.WebAPI
{
    public class NewsController : UmbracoApiController
    {
        public NewsItemDto Get(int id)
        {
            var newsItem = Umbraco.TypedContent(id) as Newsitem;

            if (newsItem != null)
                // Map content model to DTO
                return new NewsItemDto
                {
                    BodyText = newsItem.BodyText.ToString(),
                    CurrentDate = newsItem.CurrentDate,
                    Title = newsItem.Title
                };

            return null;
        }
    }
}

The controller inherits from UmbracoApiController which is the type of controller you should use for public-facing APIs (i.e., those you want to access from the front-end of your site).

Next create a new Angular module and controller which calls the above API, passing the ID of the current news item:

(function() {
    'use strict';

    angular
        .module('news', [])
        .controller('NewsController', NewsController);

    NewsController.$inject = ['$http', '$sce', '$window'];
    function NewsController($http, $sce, $window) {
        var vm = this;

        $http.get('/Umbraco/Api/News/Get', { params: { id: $window.currentNewsItemId } })
            .then(function(response) {
                vm.newsItem = response.data;
                vm.newsItem.BodyText = $sce.trustAsHtml(vm.newsItem.BodyText);
            });
    }
})();

When the API returns we add the news item to the view model (vm). Note that we have to call $sce.trustAsHtml on the body text to let Angular know that it is safe to render as HTML.

Finally update the Newsitem template:

@inherits UmbracoViewPage<MasterModel<Newsitem>>
@{
    Layout = "Master.cshtml";
}

<div ng-app="news"
    ng-controller="NewsController as vm">
    <h1 ng-bind="vm.newsItem.Title"></h1>
    <p ng-bind="vm.newsItem.CurrentDate"></p>
    <p ng-bind-html="vm.newsItem.BodyText"></p>
</div>

<script>
    // Bad global variable for demo purposes only
    window.currentNewsItemId = @Model.Content.Id;
</script>
<script src="~/scripts/angular.min.js"></script>
<script src="~/scripts/news.js"></script>

The ng-bind-html directive is what is used to render the body text as HTML.

Hope this helps.

Steven