[英]Angular - main view not loading when page loads
我是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'}) .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>
請參見下面的工作示例
您已經為myApp定義了兩次，並確保您都引用了“主頁”中的所有angular模塊。
'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>
Angular.js：防止在瀏覽器首次加載時加載視圖？
[英]Angular.js: prevent view loading when browser loads for the first time?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.