필자의 경우 지시어 ng-view가 작동하지 않는 이유는 무엇입니까?

AngularJS 앱을 제작 중입니다. 나는 오류가없는필자의 경우 지시어 ng-view가 작동하지 않는 이유는 무엇입니까?

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>My HTML File</title> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> 

    <link rel="stylesheet" href="css/bootstrap.css"> 
    <link rel="stylesheet" href="css/bootstrap-theme.css"> 
    <link rel="stylesheet" href="css/toaster.css"> 
    <link rel="stylesheet" href="css/loading-bar.css"> 
    <link rel="stylesheet" href="css/app.css"> 
    <script src="libs/angular.js"></script> 
    <script src="libs/angular-resource.js"></script> 
    <script src="libs/angular-route.js"></script> 
    <script src="libs/angular-animate.js"></script> 
    <script src="libs/toaster.js"></script> 
    <script src="libs/loading-bar.js"></script> 
    <script src="libs/ui-bootstrap-0.11.0.js"></script> 
    <script src="libs/ui-bootstrap-tpls-0.11.0.js"></script> 
    <script src="app.js"></script> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
<link href="favicon.ico" rel="shortcut icon" /> 
</head> 
<body ng-app="app"> 
    <div id="page"> 
<!-- <header class="container"> --> 
      <!-- nav bar--> 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Crowd Recruitment</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li ng-class="{'active':isActive('/ourmagic')}"><a href="#/ourmagic">How it's work ?</a></li> 
     <li ng-class="{'active':isActive('/register')}"><a href="#/register">Register</a></li> 
     <li ng-class="{'active':isActive('/login')}"><a href="#/login">Login</a></li> 
     <!--<li><button type="submit" class="btn btn-default pull-right">Login</button></li>--> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
    <!-- </header>--> 
<div ng-view></div> 
</div> 


</body> 
</html>

: 여기

//configure the app : load module, configure route 

var app = angular.module('app',['ngRoute','ngResource','ui.bootstrap']); 

app.config(function ($routeProvider) { 
    $routeProvider.when('/', { 
     controller: 'HomeController', 
     template: '/app/partials/home.html' 
    }).when('/register', { 
      controller: 'HomeController', 
      templateUrl: '/app/partials/register.html' 
     }).when('/login', { 
      controller: 'HomeController', 
      templateUrl: '/app/partials/login.html' 
     }).otherwise({ 
      redirectTo: '/' 
     }); 
}); 

app.controller('HomeController', function ($scope) { 
    //nothing to do time being 
});

가 index.html을 수 있습니다 : 여기

--/app 
-----app.js 
-----index.html 
-----/css(bootstrap,app.css,...) 
-----/fonts 
-----/css(bootstrap,app.css,...) 
-----/images 
-----/partials(home.html, register.html, login.html)

내 app.js 파일입니다 : 나는 다음과 같은 구조를 가지고 브라우저에 있지만 index.html을로드하면 home.html은 포함되지 않습니다. 나는 왜 궁금해하니? index.html에는 메뉴가 포함되어 있지만 ng-view은 작동하지 않습니다. 부분적으로로드되지 않았습니다.

추가 : 덕분에 나는 내가 오류가 UI - 부트 스트랩의 로딩을 제거 var app = angular.module('app',['ngRoute','ngResource','ui-bootstrap']);

모듈 라인의 구성에 오류를 확인할 수 있습니다. 그래서 내 코드는 입니다. 이제 작동합니다. 왜 내가 ui-bootstrap 모듈을로드 할 수 없는지 나중에 보게 될 것입니다. @Edminsson 덕분에 Plunker에 붙여 넣는 코드 덕분에

출처

2014-07-04 Pracede

plunker를 작업하는 것이 다른 경로의 작동 않는입니까? –

브라우저 개발자 도구에서 요청한 ajax 요청을보고 요청이있는 곳을 확인하십시오. templateUrl의'/ app /'제거하려고합니다 – charlietfl

경로가 작동하지 않습니다 – Pracede

두 개의 ng-app-declarations가 있습니다. html 요소에서 하나를 제거해야합니다. "home"구성에서 "templateUrl"대신 "template"을 썼습니다. 여기

app.config(function ($routeProvider) { 
    $routeProvider.when('/', { 
     controller: 'HomeController', 
     templateUrl: '/app/partials/home.html' 
    }) 
    ... 
}

는

출처

2014-07-05 06:32:38 Edminsson

내 게시물을 편집했습니다. – Pracede

문제는 templateUrl의 앱이 아닙니다 : '/app/partials/home.html'. 에 빈 ng-app입니다. 이 ng-app를 제거하십시오. body-element에 다른 ng-app가 있습니다 (). 하나의 ng-app-declaration 만 있어야합니다. – Edminsson

필자의 경우 지시어 ng-view가 작동하지 않는 이유는 무엇입니까?

답변

관련 문제