Login page in AngularJS

I've got a web application where all interactions require logging in. I see at least two ways of implementing a login page view in AngularJS.

One is to use a separate view: let say I'm using angular-ui-router and define a top-level view with two states: login and dashboard.

myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/login");
  $stateProvider
    .state('login', {
      url: "/login",
      templateUrl: "partials/login.html"
    })
    .state('mainpage', {
      url: "/mainpage",
      templateUrl: "partials/mainpage.html",
      controller: function($scope) {
        …
      }
    });

Second is to just make use of ng-if:

<span ng-if="loggedin">
  … my main page …
</span>
<span ng-if="!loggedin">
  … login page …
</span>

I see that the second option will easily allow users to link to specific sections of their pages, with the login page showing up as necessary automatically, whereas the first option will require me to code some redirection stuff to make this happen.

However, for some reason I feel the first option is cleaner, even if I cannot provide any reasonable arguments now.

I'm starting with AngularJS now, so I don't have enough experience to decide on any of these options. Which one is more desirable?