Flipboard is an app that presents news magazines, Facebook, Twitter, and blogs in a glossy magazine format. I’m a big fan and use it almost exclusively to look at news, twitter, and Facebook. Flipboard looks amazing on an iPad, Android Tablet, and Microsoft Surface Pro2. The surprising thing is how handy it is for the iPhone. The display is responsive, so it usually looks pretty good. Way better than just browsing on the iPhone’s native internet browser.

Beaglesong has several Flipboard magazines, mostly for web technology. Get Flipboad and subscribe to them. You will find the latest info and blog post on the topic as well as an in-depth dive into certain areas that are a result of searching for a particular answer on the web and stumbling across some great blogs.

All of the examples for Angularjs using partial.html files show simple links to change to these views. When I tried to change these to buttons to get a nicer looking page, i discovered that the buttons wouldn’t show which was the active button. To accomplish this task, I created a new controller called NavCrtl. The secret sauce for reaching out of the partial back to the navbar is located in that controller. As with all Angularjs applications, you need to add ng-controller to the div that contains the navbar ( ng-controller=”NavCtrl” ). ng-class=”{ active: activePath==’/view1′ }” links back to the controller to switch which button is active.


        <div class="navbar navbar-fixed-top" ng-controller="NavCtrl">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a href="#" class="brand">SR Demo</a>  
                    <div class="navbar-text pull-right">Logged in as <a href="#">username</a></div>
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">Menu </a>
                    <div class="nav-collapse">
                            <div class="btn-toolbar">
                                <div class="btn-group">
                                    <a href="#/view1" class="btn btn-large" ng-class="{ active: activePath=='/view1' }">Overview</a>
                                    <a href="#/view2" class="btn btn-large" ng-class="{ active: activePath=='/view2' }">SR Input</a>
                                    <a href="#/view3" class="btn btn-large" ng-class="{ active: activePath=='/view3' }">SR Output</a>
                                    <a href="#/view4" class="btn btn-large" ng-class="{ active: activePath=='/view4' }">Map</a>
                                </div>
                            </div>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div>

the controllers.js file…

 angular.module('myApp.controllers', []).  
 controller('MyCtrl1', ['$scope', function($scope) {  
 }])  
 .controller('NavCtrl', ['$scope', '$location', '$route',function($scope, $location, $route) {  
 //NavCtrl to ensure that menu buttons stay pushed in ("active" ) when active in the menu nav bar  
 $scope.activePath = null;  
   $scope.$on('$routeChangeSuccess', function() {  
     $scope.activePath = $location.path();  
     console.log($location.path());  
   });  
 }])  
 ;