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 2014-12-02 21:43:57

也許這將回答你的問題：http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page – Claies 2014-12-02 21:52:13

的問題是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 2014-12-02 21:55:18

當然可以。之前我在本地機器上嘗試過它 – vol4ikman 2014-12-02 22:03:54

@ vol4ikman它確實能在plunker上工作。我編輯了一個鏈接到固定代碼的答案。 – wvdz 2014-12-02 22:13:40

我認爲是有問題的方式你宣佈你app.js文件中的相關性，也控制檯抱怨$locationProvider.html5Mode(true);

如果你想聲明的單獨的應用程序，你應該做這樣的事情

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); 
});

這裏是全部工作plunker http://plnkr.co/edit/LvPhShkkgTFQsFJ44Ggo?p=preview

來源

2014-12-02 22:21:09 GeekOnGadgets

謝謝你的例子和解釋。你的版本對我來說更復雜也更漂亮。謝謝 – vol4ikman 2014-12-02 23:00:49

Angularjs ng-view不起作用

回答

相關問題