如何在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应用程序中添加路由？

回答

相关问题