2014-11-11 2 views
0

Я новичок в Angular, и я пытаюсь создать персональный сайт, используя маршруты для изменения видов.Угловое - основной вид не загружается при загрузке страницы

Я смог заставить навигатор изменить класс на активный в зависимости от того, что нажал, но теперь проблема, с которой я сталкиваюсь, заключается в том, что основной вид не загружается, когда страница загружается (все работает на клике, хотя).

Если кто-нибудь может помочь, я бы очень признателен. Если я сделал какие-то глупые ошибки, сообщите мне.

Кроме того, у меня есть вид вне контроллера div, если он внутри? Благодаря 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'}) 
 
\t .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>

+1

Почему вы определили myApp дважды с установленными плагинами и пустым после этого –

+0

Вам не хватает «;» после первого определения приложения, которое должно быть фактически единственным, что @MaximShoustin уже прокомментировал? – ZzKr

ответ

0

Пожалуйста, смотрите ниже Рабочий пример

вы получили в два раза определение для MYAPP убедитесь, как хорошо, что у Вас есть все ссылки на все угловые модули в ваша 'домашняя страница'

'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>