AngularJS Leeres Ergebnis in der zweiten URL

Erwartetes Ergebnis: öffnet Title und Comment in titleDetails.html wenn Title in index.html geklickt wird.AngularJS Leeres Ergebnis in der zweiten URL

Problem: URL ändert sich auf wenn Title geklickt wird.

Der Inhalt bleibt jedoch gleich. Die Seite zeigt 0 Post an, wenn ich die URL aktualisiert habe.

Screenshot:(index.html) & (titleDetails.html nach einem Titel in index.html klicken)

Screenshot:(nach titleDetails.html erfrischend, wenn der Inhalt bleibt der gleiche, nachdem sie von index.html Umleitung)

Code:

1) index.html

<!DOCTYPE html> 
<html lang="en" ng-app="BlogApp"> 
<head> 
<base href="/" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    <script src="app.js"></script> 
    <title>Title</title> 
</head> 
<body> 
    <div class="container" ng-controller="BlogController"> 
     <h1>Blog</h1> 
      <input ng-model="post.title" class="form-control" placeholder="title"/> 
      <textarea ng-model="post.body" class="form-control" placeholder="body"></textarea> 
      <button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button> 
      <button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button> 

      <div ng-repeat="post in posts"> 
       <h2> 
        <a ng-click="titleDetails(post)">{{ post.title }} </a> 
        <a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a> 
        <a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a> 
       </h2> 
       <em>{{post.posted}}</em> 
       <p>{{post.body}}</p> 
      </div> 
    </div> 
</body> 
</html>

2) titleDetails.html

<!DOCTYPE html> 
<html lang="en" ng-app="BlogApp"> 
<head> 
<base href="/" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    <script src="app.js"></script> 
    <title>Title</title> 
</head> 
<body> 
    <div class="container" ng-controller="BlogController"> 
     <h1>Blog</h1> 
      <div> 
       <h2> 
        <a>{{ postDetail.title }} </a> 
       </h2> 
        <em>{{postDetail.posted}}</em> 
        <p>{{postDetail.body}}</p> 
      </div> 
    </div> 
</body> 
</html>

3) app.js

(function() { 
    angular 
    .module("BlogApp", []) 
    .config(function($locationProvider) { 
     $locationProvider.html5Mode(true).hashPrefix('!'); 
    }) 
    .controller("BlogController", BlogController); 

    function BlogController($scope, $http, $rootScope, $location) { 
     $scope.createPost = createPost; 
     $scope.deletePost = deletePost; 
     $scope.editPost = editPost; 
     $scope.updatePost = updatePost; 
     $scope.titleDetails = titleDetails; 
     $scope.postDetail = null; 

    function init() { 
     getAllPosts(); 
    } 
    init(); 

    function titleDetails(post) 
    { 
     $scope.postDetail = post; 
     $location.path('/titleDetails.html'); 
    } 

    function updatePost(post){ 
     console.log(post); 
     $http 
     .put("/api/blogpost/"+post._id, post) 
     .success(getAllPosts); 
    } 

    function editPost(postId){ 
     $http 
     .get("/api/blogpost/"+postId) 
     .success(function(post){ 
      $scope.post = post; 
     }); 
    } 

     function deletePost(postId){ 
      $http 
      .delete("/api/blogpost/"+postId) 
      .success(getAllPosts); 
     } 

     function getAllPosts(){ 
      $http 
      .get("/api/blogpost") 
      .success(function(posts) { 
       $scope.posts = posts; 
      }); 
     } 

     function createPost(post) { 
      console.log(post); 
      $http 
      .post("/api/blogpost",post) 
      .success(getAllPosts); 
     } 
    } 
})();

Quelle

2017-03-18 gymcode

Angualar wird für die Entwicklung einzelner Seiten verwendet. Gehe durch [SPA mit eckigen] (https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating) –

AngularJS ist eine SPA (Single-Page-Application) orientiert. Ihre Links sind immer noch an die klassische Mehrfachnavigation gebunden. Sie müssen Ihre App erneut bearbeiten, da $location und $http.get nicht die richtigen Dienste zum Laden von Vorlagen und Navigation in Ihrem Szenario sind.

AngularJS kann die Vorlage laden und die Adressleiste entsprechend aktualisieren, solange Sie die $routeProvider verwenden. Scoth.io made a simple tutorial zum Einrichten des Routing.

Aber Sie müssen grundsätzlich ngRoute auf Ihre Bewerbung gehören:

angular.module('ngRouteExample', ['ngRoute'])

Dann Ihre Routen konfigurieren:

.config(function($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl: 'blogPosts.html', 
     controller: 'BlogController' 
    }) 
    .when('/post/:id', { 
     templateUrl: 'titleDetails.html', 
     controller: 'TitleController' 
    }); 
}

Da die Antwort sehr lange erhalten kann, zeigen die folgenden Plunker eine einfache Routing-Implementierung damit du lernst:

https://plnkr.co/edit/twmbG0G9XjOqF82JtyMC?p=preview

Quelle

2017-03-18 16:39:15 Dorival

AngularJS Leeres Ergebnis in der zweiten URL

Antwort

Verwandte Themen