Angular - main view not loading when page loads

Question

I'm new to Angular and I'm trying to build a personal site using routes to change the views.

I've been able to get the nav to change class to active depending on what's clicked, but now the problem I'm having is that the main view doesn't load when the page loads (everything works on click though).

If anyone can help, I'd really appreciate it. If I've made any dumb errors, please let me know.

Also, I've got the view outside the controller div, should it be inside? Thanks HTML:

'use strict';
angular.module('myApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
var myApp = angular.module('myApp', []);


myApp.config(function($routeProvider) {
       
    $routeProvider
    .when('/main', {templateUrl:'views/main.html', controller:'WidgetsController'})
    .when('/about', {templateUrl:'views/about.html', controller:'WidgetsController'})
	.otherwise({
        redirectTo: '/'
      });
});


myApp.controller('WidgetsController', function($scope) {});
myApp.controller('MyCtrl', function($scope, $location) {
    $scope.isActive = function(route) {
        return route === $location.path();
    }
});

<body ng-app="myApp" class="ng-scope">
    
          
       <div ng-controller="MyCtrl" class="ng-scope">
    <ul class="nav nav-pills pull-right">
          
        <li ng-class="{active:isActive('/main')}"><a href="#/main">Main</a></li>
        <li ng-class="{active:isActive('/about')}"><a href="#/about">About</a></li>
    </ul> </div>  </div> </div>
    
    <div ng-view=""></div>

Why did you define myApp twice with installed plugins and empty after that — Maxim Shoustin
– Maxim Shoustin, Commented Nov 11, 2014 at 12:25
Aren't you missing a ";" after the first definition of the app - which should actually be the only one as @MaximShoustin already commented? — k88074
– k88074, Commented Nov 11, 2014 at 12:38

sylwester · Accepted Answer · 2014-11-11 12:55:33Z

Please see below working example

you've got twice definition for myApp make sure as well that you've all reference to all angular modules in your 'home page'

'use strict';

var myApp = angular.module('myApp', ['ngRoute']);


myApp.config(function($routeProvider) {

  $routeProvider
    .when('/main', {
      templateUrl: 'views/main.html',
      controller: 'WidgetsController'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'WidgetsController'
    })
    .otherwise({
      redirectTo: '/main'
    });
});


myApp.controller('WidgetsController', function($scope) {});
myApp.controller('MyCtrl', function($scope, $location) {
  $scope.isActive = function(route) {
    return route === $location.path();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.min.js"></script>

<body ng-app="myApp" class="ng-scope">


  <div ng-controller="MyCtrl" class="ng-scope">
    <ul class="nav nav-pills pull-right">

      <li ng-class="{active:isActive('/main')}"><a href="#/main">Main</a>
      </li>
      <li ng-class="{active:isActive('/about')}"><a href="#/about">About</a>
      </li>
    </ul>
  </div>



  <div ng-view=""></div>

  <script type="text/ng-template" id="views/main.html">
    <h1>Main View</h1>
  </script>
  <script type="text/ng-template" id="views/about.html">
    <h1>About View</h1>
  </script>

Collectives™ on Stack Overflow

Angular - main view not loading when page loads

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related