일부분이 angularjs를로드하지 않습니다

부분적으로로드되지 않는 이유를 말해주십시오. 홈, about 또는 contact와 같은 특정 하이퍼 링크를 클릭하면 레이아웃 HTML 페이지에 부분 템플릿을 라우팅하고 삽입하려고합니다. 코드의 모든 라인을 검사했는데 부분을로드하지 않는 문제의 원인을 찾지 못했습니다. 경로가 정상적으로 작동하고 있으며로드가되지 않습니다. 다음은 내 코드입니다 : app.js일부분이 angularjs를로드하지 않습니다

<html ng-app="streamApp"> 
    <head> 
     <meta charset="utf-8"> 
     <!-- To ensure proper rendering and touch zooming --> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>StreamTest App</title> 
     <!-- load bootstrap and fontawesome --> 
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css"> 
     <link rel="stylesheet" href="styles/style.css"/> 
    </head> 
    <body ng-app="streamApp" ng-controller="MainController"> 

    <div id="main"> 

     <!-- including header --> 
     <div ng-include="'views/templates/header.html'"></div> 

     <!-- this is where content will be injected --> 
     <div id="container" style="margin-top: 50px;"> 
      <ng-view></ng-view> 
     </div> 

     <!-- including footer --> 
     <div ng-include="'views/templates/footer.html'"></div> 

    </div> 

    </body> 
    <!-- Scripts --> 
    <script src="node_modules/jquery/dist/jquery.min.js"></script> 
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="node_modules/angular/angular.min.js"></script> 
    <script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script> 
    <script src="app.js"></script> 
    <!-- Scripts End --> 
</html>

index.html을

// create the module named streamapp and include ngRoute for routing needs 
var streamApp = angular.module('streamApp',['ngRoute']); 

//configure app's routes 
streamApp.config(['$routeProvider',function ($routeProvider) { 
    $routeProvider 
     //route for the home page 
     .when('/home', { 
      templateURL : 'views/partials/home.html', 
      controller : 'MainController' 
     }) 
     //route for the about page 
     .when('/about', { 
      templateURL : 'views/partials/about.html', 
      controller : 'aboutController' 
     }) 
     //route for the contact page 
     .when('/contact', { 
      templateURL : 'views/partials/contact.html', 
      controller : 'contactController' 
     }) 
     .otherwise({ 
      redirectTo: '/home' 
     }); 
}]); 
// create the controller and inject Angular's $scope 
streamApp.controller("MainController", function ($scope) { 
    // create a message to display in our view 
    $scope.home="Welcome Home!"; 
}); 
streamApp.controller("aboutController", function ($scope) { 
    // create a message to display in our view 
    $scope.about="Wanna hear about us! Here you are :)"; 
}); 
streamApp.controller("contactController", function ($scope) { 
    // create a message to display in our view 
    $scope.contact="Don't be shy to contact us!"; 
});

HEADER.html 현재

<header> 
    <nav class="navbar navbar-default"> 
    <div class="container"> 
     <div class="row"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#home">StreamTEST</a> 
      </div> 

      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#home"><i class="fa fa-home"></i> Home</a></li> 
       <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> 
       <li><a href="#contact"><i class="fa fa-envelope"></i> Contact</a></li> 
      </ul> 
     </div> 
    </div> 
    </nav> 
</header>

home.html을

<div class="jumbotron text-center"> 
    <h1>Home Page</h1> 

    <p>{{ home }}</p> 
</div>

<div class="jumbotron text-center"> 
    <h1>Contact Page</h1> 

    <p>{{ contact }}</p> 
</div>

출처

2017-12-29 Atom

기본 해시 프리픽스가 '!'에서 변경되었습니다. app.js에서 빈 문자열 '로 설정하십시오. anglejs를 사용하고 있습니다. 1.6

$locationProvider.hashPrefix('');

출처

2018-01-01 13:19:21 Atom

contact.html

<div class="jumbotron text-center"> 
    <h1>About Page</h1> 

    <p>{{ about }}</p> 
</div>

about.html 기본 신체 요소에서 ng-app를 제거합니다. 당신은 이미 바깥 html 요소에 있습니다.

나는 ngRoute 대신 ui-router를 사용하지만 매우 유사합니다. 몇 가지.

당신은 당신이 설정 한 후 문제에 대해 $의 locationProvider를 주입 할 필요가 의미 Html5Mode을 설정해야합니다
```
$locationProvider.html5Mode(true) 
```
당신은 색인의 <head> 섹션에서 기본 href를 설정해야합니다. HTML은 함께 :
```
<base href="/" > 
```
또한 링크에 ng-href 대신 href을 시도 할 수도 있습니다.

출처

2017-12-29 22:36:44

Okey, 결과는 동일합니다. 도움이 될지 아시나요? 고맙습니다! – Atom

나는 내 대답을 편집했다. 희망이 도움이됩니다. –

일부분이 angularjs를로드하지 않습니다

답변

관련 문제