Angularjs ng-view가 작동하지 않습니다.

angualrjs + ngRoute으로 간단한보기를 만들려고합니다.Angularjs ng-view가 작동하지 않습니다.

왜 저에게 적합하지 않습니까 ???

누구나 내 Plunker example을보고 나에게 잘못된 것을 설명 할 수 있습니까?

내 index.html을 :

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Angular Route training</title> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" type="text/css" href="style.css"> 

     <script src="https://code.angularjs.org/1.3.5/angular.js"></script> 
     <script src="https://code.angularjs.org/1.3.5/angular-route.js"></script> 
     <script src="js/app.js"></script>  
    </head> 

    <body> 

     <div class="main_container"> 

      <div class="inner" ng-app="app"> 

        <div class="container" ng-controller="MainController"> 
         <span ng-cloak>{{text}}</span> 
        </div> 

      </div> 



      <div class="inner" ng-app="views"> 

        <h3>Views Menu</h3> 

        <ul> 
         <li><a href="index.html">Back to HOME</a></li> 
         <li><a href="#/developers">Our Developers</a></li> 
         <li><a href="#/designers">Our Designers</a></li> 
        </ul> 

        <div ng-view></div> 

      </div> 

     </div> 

    </body> 

</html>

이 app.js입니다 :

var app = angular.module('app', []); 

var views = angular.module('views', ['ngRoute']); 

views.config(function($routeProvider, $locationProvider){ 
    $routeProvider. 
     when('#/developers', {templateUrl: 'views/dev.html', controller: 'DevCtrl'}). 
     when('#/designers',{templateUrl: 'views/design.html',controller: 'DesignCtrl'}). 
     otherwise({ redirectTo: 'index.html' }); 
    $locationProvider.html5Mode(true); 
}); 

app.controller('MainController', function($scope) { 
    $scope.text = "Hello World!!!!"; 
}); 

views.controller('DevCtrl', function($scope) { 
    $scope.developers = [ 
     {"name":"John", "family":"Doe"}, 
     {"name":"Anna", "family":"Smith"}, 
     {"name":"Peter", "family":"Jones"}, 
     {"name":"Alex", "family":"Volkov"}, 
     {"name":"Yaniv", "family":"Smith"}, 
    ] 
}); 

views.controller('DesignCtrl', function($scope) { 
    $scope.designers = [ 
     {"name":"Inna", "family":"Doe"}, 
     {"name":"Anna", "family":"Smith"}, 
     {"name":"Yafit", "family":"Jones"} 
    ] 
});

design.html :

<div id="designers" ng-controller="DesignCtrl"> 

    <h3>Designers List</h3> 

    <table> 
     <tr> 
      <th>Name</th> 
      <th>Family</th> 
     </tr> 
     <tr ng-repeat="d in designers"> 
      <td>{{d.name}}</td> 
      <td>{{d.family}}</td> 
     </tr> 
    </table> 

</div>

및 dev.html

<div id="developers" ng-controller="DevCtrl"> 

    <h3>Developers List</h3> 

    <table> 
     <tr> 
      <th>Name</th> 
      <th>Family</th> 
     </tr> 
     <tr ng-repeat="dev in developers"> 
      <td>{{dev.name}}</td> 
      <td>{{dev.family}}</td> 
     </tr> 
    </table> 

</div>

감사

출처

2014-12-02 vol4ikman

모든 관련 코드는 링크가 아닌 게시물에 포함되어야합니다. 또한 - "나는 미쳐 가고 있습니다"- 문제에 대한 적절한 설명이 아닙니다. – wvdz

아마도이 질문에 대한 답변을 : http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page – Claies

문제는 NG-응용 프로그램의 잘못된 사용입니다. 응용 프로그램에 대해 ng-app를 한 번만 선언하십시오. 일반적으로 html 요소에 있습니다.

그런 다음 다른 모듈을 주 모듈의 종속성으로 선언하십시오.

ng-app 선언을 html 태그에 넣고 ng-routing을 app 모듈에 추가하여 views 모듈을 제거합니다.

http://plnkr.co/edit/btL2QMyHxhDLH7cxZ1YV

var app = angular.module('app', ['ngRoute']); 
app.config(function($routeProvider, $locationProvider){ 
    $routeProvider. 
     when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}). 
     when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}). 
     otherwise({ redirectTo: '/index' }); 
    // $locationProvider.html5Mode(true); 
}); 

<html ng-app="app">

또한 별도의 모듈에 뷰 로직을 넣을 수 있지만, 일반적으로는 다음 또한 다른 파일에 넣어 것입니다.

오류가 발생했기 때문에 html5mode가 사용 중지되었습니다 (해당 작업을하기에는 조금 까다 롭습니다).

참고 : 실제로 수동으로 부트 스트랩하여 여러 개의 ng-app를 사용할 수는 있지만 아주 좋은 이유가없는 한 실제로는 안됩니다.

출처

2014-12-02 21:50:25 wvdz

도움이되지 않습니다 여기에 [링크] (http : //plnkr.co/edit/6evwfxIk0XObaQzQKxcS?p=preview) – vol4ikman

물론 가능합니다. 전에는 로컬 머신에서 시도했습니다 – vol4ikman

@ vol4ikman 그것은 plunker에서 작동합니다.내 대답은 고정 코드에 대한 링크로 편집했습니다. – wvdz

내가 거기에 생각은 당신이 당신의 app.js 파일 내에서 종속성을 선언하는 문제 방법 당신은 당신이

var app = angular.module('app', []); 

var views = angular.module('views', []); 

var mainApp = angular.module('mainApp', ['ngRoute','app','views']); 

mainApp.config(function($routeProvider, $locationProvider){ 
    $routeProvider. 
     when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}). 
     when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}). 
     otherwise({ redirectTo: 'index.html' }); 
    //$locationProvider.html5Mode(true); 
});

같은 것을해야 할 별도의 응용 프로그램을 선언 할 경우도 콘솔에 대한 $locationProvider.html5Mode(true);

을 불평

그리고 여기에 전체 작동하는 플 런커가 있습니다. http://plnkr.co/edit/LvPhShkkgTFQsFJ44Ggo?p=preview

출처

2014-12-02 22:21:09 GeekOnGadgets

예제와 설명에 감사드립니다. 당신 버전은 나를 위해 더 복잡하고 더 아름답습니다. 감사 – vol4ikman

Angularjs ng-view가 작동하지 않습니다.

답변

관련 문제