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

Question

我是 angularjs 的新手，我用自定义指令制作了一个示例应用程序，现在我也添加了路由，但它没有 working.When 我开始在浏览器中加载项目索引文件工作正常，但是当我点击导航栏链接时，关于和联系页面没有显示，它仍然在 index.html。这是我的 index.html:

      <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>

我的AppCtrl:

   // 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>

任何指导谢谢。

Answer 1

就像已经提到的一些人一样，您应该明确阅读文档并可能观看一些教程。我想看看你在做什么，但我不清楚。

但我想我明白你的想法哪里出了问题：

您有 3 个 'templates' 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 中的内容部分将加载到您定义 de ng-view 的 index.html 中。

我注意到的另一件事是您在 templateUrl 中定义的路径。您将位置定义为 code/about.html。你必须给它从你的index.html（主要html）的路径在你的情况下只是templateUrl: 'about.html'。

我建议将不同的文件放在不同的文件夹中。因此，一个用于您的模板，一个用于您的 js 文件（可能是一个 js 文件夹，其中另一个文件夹用于您的带有指令等的 js 文件）。

希望这对您有所帮助。但一定要阅读文档并观看一些教程。对你有很大帮助。

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

how to add routing in angularjs app?

routing

angularjs