Render plaintext using Angular route, ui-view

I am using Angular 1.3, creating views using ui-router and ui-view. I have added the ui-view on index.html file, which has Menu, footer and in the middle ui-view for main content.

I have created whole application using states with $stateProvider.state('state_name')

Now I want to create a page with plain text, no html tags, just plaintext. But the problem is when I create route for that, it includes header and footer, which is correct behavior of Angular. But how can I create a view with no menu, footer included, just plain text which I will add in view file, with route. Any solution?

Solution

You can have a service that changes is bond to the main controller. The first answer to this question explains how this can be achived.

I've made a modified Plnkr example for your specific use case here

app.factory('Page', function(){
  var visible = true; 
  return {
    visible: function() { return visible; },
    setVisible: function(state) { visible = state}
  };
});

The factory called Page provides access to a visible variable for both the main controllers and the controllers inside the ng-views.

The aim is to change this visible variable in the controller in order to change the visibility of the main components outside of the ng-view.

function MainCtrl($scope, Page) {
  $scope.Page = Page;
}

To this end we have a binding in the main controller that can access the page service.

<html ng-app="myApp" ng-controller="MainCtrl">
<body>
<h1 ng-hide="Page.visible()">Page Header</h1>
<ul>
  <li><a href="test1">test1</a>
  <li><a href="test2">test2</a>
</ul>
</html>

And in the html, we define that the ng-if is controlled by this visible variable in the MainContorllers Page.

function Test1Ctrl($scope, Page) {
  Page.setVisible(false);
}

Finally, we can call the change visibility function from the other views in order to change the visibility of the headers and footers in the Main View.