Render plaintext using Angular route, ui-view

Question

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?

One possible solution would be to add a service that can change a variable set for ng-hide on the header and the footer. see the first answer for this question. — nipuna777
Yeah probably, I have to hide/remove those elements. Or like using onEnter callback of .state method. — Rahul Sagore
Yes, that's the idea. I'll post the answer with a small example. — nipuna777

nipuna777 nipuna777 · Accepted Answer · 2015-12-04T13:54:47

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.

Render plaintext using Angular route, ui-view

1 Answers