2014-11-11 7 views
0

저는 Angular를 처음 사용하고 있으며 경로를 사용하여 개인 사이트를 작성하여보기를 변경하려고합니다.각도 - 페이지가로드 될 때 기본보기가로드되지 않습니다.

클릭 한 항목에 따라 탐색을 활성 상태로 바꿀 수 있었지만 현재 문제는 페이지가로드 될 때 기본보기가로드되지 않는다는 것입니다 (모든 것이 클릭에 따라 작동 함).).

누구든지 도움을받을 수 있다면 정말 고맙겠습니다. 멍청한 실수를 저 지르면 알려주세요.

또한 내부에 있어야합니까? 컨트롤러 div 외부의보기가 있습니다. 감사 HTML :을 myApp 확실히뿐만 아니라 모든 각 모듈에 대한 모든 참조에를했습니다 있는지 확인하기위한

'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

예를 작업 아래를 참조하십시오는

당신은 두 번 정의를 가지고 귀하의 '홈페이지'

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

관련 문제