2

Я пытаюсь использовать следующий код на своем сервере Apache, и он не работает (при нажатии ссылки ничего не происходит). Предположим, чтобы показать название/содержание для каждой ссылки.Параметры маршрутизации Angularjs не работают

index.html

<!doctype html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script> 
     <script src="app.js"></script> 
     <script src="post.js"></script> 
    </head> 
    <body ng-app="blogApp"> 
     <nav> 
      <a href="#/post/1">Blog post</a> 
      <a href="#/post/2">Other post</a> 
      <a href="#/post/3">Last post</a> 
     </nav> 
     <!-- Place where our user will be displayed --> 
     <div ng-view> 
     </div> 
    </body> 
</html> 

app.js

angular.module('blogApp', ['ngRoute']) 
    // Setting configuration for application 
    .config(function ($routeProvider) { 
     $routeProvider.when('/post/:postId', { 
      controller: postCtrl, 
      templateUrl: 'post.html' 
     }) 

    }) 
    // Ignore code below. This is usually in seperate html files 
    .run(function ($templateCache){ 
     $templateCache.put('post.html', '<p>Post number: {{postId}}</p><h1>{{title}}!</h1><p>{{content}}</p>'); 
    }); 

post.js

function postCtrl ($scope, $routeParams) { 
    $scope.title = "Error"; 
    $scope.content = "No post with that number"; 

    $scope.postId = $routeParams.postId; 
    switch ($routeParams.postId) { 
     case '1': 
      $scope.title = "Hello world"; 
      $scope.content = "This is my first post"; 
      break; 
     case '2': 
      $scope.title = "Post no 2"; 
      $scope.content = "This is my first post"; 
      break; 
     case '3': 
      $scope.title = "Last post"; 
      $scope.content = "Bye"; 
      break; 
    } 
} 

признательна за любую помощь.

ответ

2

Ваш код, кажется, хорошо, только вы пропустите один важный бит

app.controller('postCtrl', postCtrl); 

смотрите демо ниже

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

 
// Setting configuration for application 
 
app.config(function($routeProvider) { 
 
    $routeProvider.when('/post/:postId', { 
 
     controller: postCtrl, 
 
     templateUrl: 'post.html' 
 
    }) 
 

 
    }) 
 
    // Ignore code below. This is usually in seperate html files 
 
    .run(function($templateCache) { 
 
    $templateCache.put('post.html', '<p>Post number: {{postId}}</p><h1>{{title}}!</h1><p>{{content}}</p>'); 
 
    }); 
 

 

 
app.controller('postCtrl', postCtrl); 
 

 
function postCtrl($scope, $routeParams) { 
 
    $scope.title = "Error"; 
 
    $scope.content = "No post with that number"; 
 

 
    $scope.postId = $routeParams.postId; 
 
    switch ($routeParams.postId) { 
 
    case '1': 
 
     $scope.title = "Hello world"; 
 
     $scope.content = "This is my first post"; 
 
     break; 
 
    case '2': 
 
     $scope.title = "Post no 2"; 
 
     $scope.content = "This is my first post"; 
 
     break; 
 
    case '3': 
 
     $scope.title = "Last post"; 
 
     $scope.content = "Bye"; 
 
     break; 
 
    } 
 
}
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script> 
 
<script src="https://code.angularjs.org/1.4.0-beta.6/angular-route.js"></script> 
 
<body ng-app="blogApp"> 
 
    <nav> 
 
    <a href="#/post/1">Blog post</a> 
 
    <a href="#/post/2">Other post</a> 
 
    <a href="#/post/3">Last post</a> 
 
    </nav> 
 
    <!-- Place where our user will be displayed --> 
 
    <div ng-view> 
 
    </div> 
 
</body>

Смежные вопросы