Book Image

AngularJS Web Application Development Blueprints

By : Vinci J Rufus
Book Image

AngularJS Web Application Development Blueprints

By: Vinci J Rufus

Overview of this book

If you are a web application developer interested in using AngularJS for a real-life project, then this book is for you. As a prerequisite, knowledge of JavaScript and HTML is expected, and a working knowledge of AngularJS is preferred.
Table of Contents (12 chapters)
11
Index

Displaying the content of a page


The last and most crucial step of this entire project is to display the actual content of the selected page.

This will require us to create a new route that will accept route params. Let's get this done first in our public/js/app.js file as follows:

$routeProvider.when('/:url', {
    templateUrl: 'partials/page.html',
    controller: 'PageCtrl'
});

Next, let's create the partials view as a new file called partials/page.html with the following content:

<h1>{{pageContent.title}}</h1>
<div ng-bind-html="pageContent.content"></div>

We are using the ng-bind-html directive here so that the HTML content is rendered correctly instead of it spitting out the raw HTML as it is.

Next, let's create our PageCtrl function in controllers.js as follows:

.controller('PageCtrl',  [ '$scope','pagesFactory', '$routeParams ', function($scope, pagesFactory, $routeParams) {
    var url = $routeParams.url;
    pagesFactory.getPageContent(url).then(
      function...