如何在angularjs應用程序中添加路由？

我是新來的angularjs，我做了一個示例應用程序與自定義指令現在我添加路由，以及它不工作。當我開始項目索引文件加載在瀏覽器中工作正常，但當我點擊導航欄鏈接然後關於和聯繫頁面不顯示它仍然在index.html。這裏是我的index.html：如何在angularjs應用程序中添加路由？

 <html ng-app="myApp"> 
     <head> 
     <title>Reddit New World News (Task)</title> 
    <link href='http://fonts.googleapis.com/css?family=Varela+Round'    rel='stylesheet' type='text/css'> 
    <script src="angular/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js"></script> 
    <script src="myApp.js"></script> 
    <script src="myAppCtrl.js"></script> 
    <script src="headerDirective.js"></script> 
    <script src="searchDirective.js"></script> 
     <script src="myDataDirective.js"></script> 
     <!-- start menu --> 

      </head> 
    <body> 

      <div header-table></div> 
      <div class="content" ng-controller = "myAppCtrl"> 
      <div class="container" > 
       <div ng-view></div> 
     </div> 
     </div> 

     </body> 
    </html>

myAppCtrl：

// TODO: Wrap in anonymous function 
     (function() { 
    var myApp = angular.module('myApp', ['ngRoute']); 
    // configure our routes 
    myApp.config(function($routeProvider) { 
     $routeProvider 

    // route for the home page 
    .when('/', { 
     templateUrl : 'code/index.html', 
     controller : 'myAppCtrl' 
    }) 

    // route for the about page 
    .when('/about', { 
    templateUrl : 'code/about.html', 
    controller : 'aboutController' 
    }) 

    // route for the contact page 
    .when('/contact', { 
     templateUrl : 'code/contact.html', 
    controller : 'contactController' 
    }); 
    }); 


     // TODO: min-safe with bracket notation 
     myApp.controller('myAppCtrl', ['$scope', '$http',     function($scope, $http) { 
     $scope.sortType  = ''; 
     $scope.sortReverse = true; 

     // TODO: Keep lines short - it's easier to read 
     $http.get("https://www.reddit.com/r/worldnews/new.json") 
      .success(function (response) { 
       $scope.stories = response.data.children; 
      }); 
     }]); 

      myAppCtrl.controller('aboutController',function(){ 
       // create a message to display in our view 
      $scope.message = 'Everyone come and see how good I look!'; 
      }); 

     myAppCtrl.controller('contactController', function($scope) { 
     $scope.message = 'Contact us! JK. This is just a demo.'; 
     }); 
    })();

headerDirective.html：

<div class="top-header"></div> 
    <div class="container"> 

    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="header">   
     <h1>Reddit</h1> 
     </div> 
    <div class="header-right"> 
     <h2>World's Latest News</h2> 
    </div> 
    <div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
    </div> 
    </div> 
    </nav> 
    <div class="clearfix"></div> 
</div>

任何指導表示感謝。

來源

2015-08-23 Hassan

您沒有添加'ng-view'指令。 – dfsq

@dfsq我應該添加這個？ – Hassan

查看'ngRoute'的文檔 –

就像一些人已經提到，你應該deffinitly閱讀文檔，並可能看一些教程。我想看看你在做什麼，但是我不清楚。

但我想我看到它在你的思想出了問題：

你有3個「模板」的index.html，about.html和contact.html。在你的配置中你可以在你的路由中使用它們。通過觀看你的文件，我的猜測是你期待的是，這取決於路線，這些HTML文件將被加載。就像重定向到該頁面一樣。

你應該做的是用你在每一頁上使用的html做一個index.html。這可能只是<head></head>，但也可以包含導航和頁腳的頁眉。然後您使用<ng-view></ng-view>或<div ng-view></div>您希望模板加載到您的頁面的位置。這些模板不需要包含您在index.html中已經定義的部分。你只有它的內容。

所以，一個簡單的例子：

的index.html

<html> 
    <head> 
    //loading your scripts etc. 
    </head> 
    <body> 
    <ng-view></ng-view> 
    </body> 
</html>

比，而不是創建一個模板名爲index.html，你犯了一個模板home.html的與內容：

<div class="container"> 
    <h1>My Home</h1> 
</div>

現在，您的home.html中的contentpart將加載到您定義deng-view的index.html中。

我注意到的另一件事是你在templateUrl中定義的路徑。您將位置定義爲代碼/ about.html。你必須從你的index.html（主要html）給它的路徑在你的情況下，將只是templateUrl: 'about.html'。

我會建議把不同的文件放在不同的文件夾中。所以，一個用於你的模板，一個用於你的js文件（可能是一個帶有另一個文件夾的js文件夾，用於帶有指令的js文件等）。

我希望這會幫助你的方式。但deffinitly閱讀文檔並觀看一些教程。它會幫助你很多。

來源

2015-08-23 20:54:06

如何在angularjs應用程序中添加路由？

回答

相關問題