2017-12-29 2 views
0

Hier ist mein Code:Aktualisieren AngularJS Module und Routing

index.html

<!DOCTYPE html> 
<html lang="en" ng-app="groceryListApp"> 
<meta charset="utf-8"> 

<head> 
    <meta http-equiv="X-UA-Compatible" content="IE-edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>Bootstrap 101 Template</title> 

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 


</head> 

<body ng-controller="HomeController"> 
    <nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
      <span class="glyphicon glyphicon-apple" style="color: #5bdb46"> 
      </span> 
     Grocery List 
     </a> 
     </div> 
    </div> 
    </nav> 

    <div class="container" ng-view> 

    </div> 

<script src="lib/angular.min.js"></script> 
<script src="lib/angular-route.min.js"></script> 
<script src="lib/underscore-min.js"></script> 
<script src="lib/jquery-3.2.1.min.js"></script> 
<script src="lib/bootstrap.min.js"></script> 
<script src="js/app.js"></script> 
</body> 

</html> 

app.js

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

app.config(function($routeProvider) { 
    $routeProvider 
    .when("/", { 
     templateUrl: "views/groceryList.html", 
     controller: "HomeController" 
    }) 

    .when("/addItem",{ 
     templateUrl: "views/addItem.html", 
     controller: "GroceryListItemController" 

     }) 

    .when("/addItem/edit/:id",{ 
     templateUrl: "views/addItem.html", 
     controller: "GroceryListItemController" 

     }) 
     .otherwise({ 
     redirectTo: "/" 

     }) 
}); 



app.service("GroceryService",function(){ 

var groceryService = {}; 

groceryService.groceryItems = [ 
    { 
     id:1, 
     completed: true, 
     itemName: 'milk', 
     date: '2017-10-01' 
    }, 
    { 
     id:2, 
     completed: true, 
     itemName: 'cookies', 
     date: '2017-10-02' 
    }, 
    { 
     id:3, 
     completed: true, 
     itemName: 'ice cream', 
     date: '2017-10-03' 
    }, 
    { 
     id:4, 
     completed: true, 
     itemName: 'potatoes', 
     date: '2017-10-04' 
    }, 
    { 
     id:5, 
     completed: true, 
     itemName: 'cereal', 
     date: '2017-10-05' 
    }, 
    { 
     id:6, 
     completed: true, 
     itemName: 'bread', 
     date: '2017-10-06' 
    }, 
    { 
     id:7, 
     completed: true, 
     itemName: 'eggs', 
     date: '2017-10-07' 
    }, 
    { 
     id:8, 
     completed: true, 
     itemName: 'tortillas', 
     date: '2017-10-08' 
    } 
    ]; 

    groceryService.findById = function(id){ 
    for(var item in groceryService.groceryItems){ 

     if(groceryService.groceryItems[item].id === id) { 
      console.log(groceryService.groceryItems[item]); 
      return groceryService.groceryItems[item]; 
     } 
    } 
    }; 

    groceryService.getNewId = function(){ 

    if(groceryService.newId){ 
     groceryService.newId++; 
     return groceryService.newId; 

    }else{ 
     var maxId = _.max(groceryService.groceryItems,function(entry){return entry.id;}) 

     groceryService.newId = maxId.id + 1; 
     return groceryService.newId; 
    } 

    }; 


    groceryService.save = function(entry){ 

    entry.id = groceryService.getNewId(); 

    groceryService.groceryItems.push(entry); 

    }; 

    return groceryService; 


}); 


app.controller("HomeController", ["$scope","GroceryService", function"($scope, GroceryService) { 

    $scope.groceryItems = GroceryService.groceryItems; 

}]); 

app.controller("GroceryListItemController", ["$scope","$routeParams","$location","GroceryService", function($scope,$routeParams,$location,GroceryService) { 

    if(!$routeParams.id){ 
    $scope.groceryItem = { id:0, completed:false, itemName: "", date: new Date() }; 
    }else{ 
     $scope.groceryItem = GroceryService.findById(parseInt($routeParams.Id)); 

    } 

    //$scope.groceryItems = GroceryService.groceryItems; 

    //$scope.rp ="Route Parameter Values:" + $routeParams.id; 

// $scope.groceryItem ={ id:7,completed:true, itemName: "cheese",date: new Date() } 

    $scope.save = function(){ 
    GroceryService.save($scope.groceryItem); 
    $location.path("/"); 
    }; 

    //console.log($scope.groceryItems); 

}]); 

groceryList.html

<div class="col-xs-12"> 
    <a href="#!/addItem" style="margin-bottom: 10px:" class="btn btn-primary btn-lg btn-block"> 
    <span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a> 
    <ul class="list-group"> 
    <li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix"> 
     <span style="font-weight: bold">{{item.itemName | uppercase}}</span> 
     <a href="#!/addItem/edit/{{item.id}}" class="btn btn-nm btn-default pull-right"> 
     <span class="glyphicon glyphicon-pencil"></span> 
     </a> 
    </li> 
    </ul> 
</div> 

addItem.html

<div class="col-xs-12"> 
     <div class="jumbotron text-center"> 
      <h1>Add Item Below</h1> 
     </div> 
<form name="groceryForm"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder ="Grocery Item" ng-model="groceryItem.itemName"> 
    </div> 


    <div class="form-group"> 
     <button type="button" class="btn btn-success btn lg btn-block" ng-click="save()"> 
      <span class="glyphicon glyphicon-pushpin"></span> 
      Save 
     </button> 
    </div> 


    <div class="form-group"> 
     <a href="#/" class="btn btn-default btn lg btn-block"> 
      <span class="glyphicon glyphicon-remove"></span> 
      Cancel 
     </a> 
    </div> 
</form> 

</div> 

Nach index.html auf einem Webserver ausgeführt wird, ist die Ausgabe im Browser:

Grocery List

jedoch die Liste der Lebensmittel Artikel werden nicht angezeigt zusammen mit "Einkaufsliste"

Die verschiedenen Elemente sollen auf dem angezeigt werden selbe Seite.

Sind die Klammern und alle korrekt?

Bitte helfen Sie !!!

Danke !!

Antwort

0

Sie brauchen einen Staat für die Auflistung aus dem Lebensmittelgeschäft als

.when("/grocery", { 
     templateUrl: "groceryList.html", 
     controller: "HomeController" 
    }) 

und ändern Sie die Vorlage als

<a class="navbar-brand" href="#grocery"> 
      <span class="glyphicon glyphicon-apple" style="color: #5bdb46"> 
      </span> Grocery List 
</a> 

DEMO

+0

dies url Änderung definiert werden, es ist nicht? – Andy

+0

hast du die beigefügte Demo überprüft – Sajeetharan

+0

Ich habe die beigefügte Demo überprüft und deine Demo zeigt nicht die Bootrap-Funktionen, da du die Skripte nicht geladen hast. Allerdings habe ich – Ashley