Angular-页面加载时主视图不加载
[英]Angular - main view not loading when page loads
问题描述
I'm new to Angular and I'm trying to build a personal site using routes to change the views. 
我是Angular的新手，我正在尝试使用路线来更改视图来构建个人站点。
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? 另外，我在控制器div之外有视图，应该在内部吗？ Thanks HTML: 谢谢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>
1 个解决方案
解决方案1
0 已采纳 2014-11-11 12:55:33
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' 您已经为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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.