2016-07-06 9 views
0

Ich versuche hastag von URL in meiner Website zu entfernen, aber ich weiß nicht genau, wie ..AngularJS entfernen Sie das # in URL-Link

ich im Internet recherchiert, und ich finde es neccesary ist eine Position einzufügen Anbieter in meinem Controller, aber ... wo?

Hier si meinen Controller-Code:

'use strict'; 

(function() { 
    var app = angular.module('store', ['store-products']); 


    app.controller('StoreController', ['$log', function($log) { 

    this.products = gems; 
    $log.info('Dependency Info'); 
    }]); 

    app.controller('PanelController', function() { 
    this.tab = 1; 

    this.selectTab = function(setTab) { 
     this.tab = setTab; 
    }; 

    this.isSelected = function(checkTab) { 
     return this.tab === checkTab; 
    }; 
    }); 

    app.controller('ReviewController', function() { 
    this.review = {}; 

    this.addReview = function(product) { 
     product.reviews.push(this.review); 
     this.review = {}; 
    }; 

    }); 



    var gems = [ 
    { 
     name: 'Dodecahedron', 
     price: 2.95, 
     description: 'Dodecahedron description...', 
     images: [ 
     { 
      full: 'http://courseware.codeschool.com.s3.amazonaws.com/shaping-up-with-angular-js/images/gem-01.gif' 
     } 
     ], 
     canPurchase: true, 
     soldOut: false, 
     reviews: [ 
     { 
      stars: 5, 
      body: 'Awesome website', 
      author: '[email protected]' 
     }, 
     { 
      stars: 4, 
      body: 'Good!', 
      author: '[email protected]' 
     } 
     ] 
    }, 

    ]; 


})(); 

und Modulcode:

(function() { 
    var app = angular.module('store-products', []); 
    app.directive('productTitle', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'product-title.html' 
    }; 
    }); 
})(); 

Auch findet es neccesary <base href="/"> in meinem Index hinzuzufügen.

Aber wo ist es notwendig, den Befehl $ locationProvider einzufügen? ($locationProvider.html5Mode(true);)

EDIT, hier ist mein Index-Seite:

<!doctype html> 
    <html ng-app="store"> 

    <head> 
     <title>AngularJS App</title> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" /> 
     <link rel="stylesheet" href="application.css" /> 
     <script src="app.js"></script> 
<base href="/"> 
     </head> 
    <body> 

     <h1>AngularJS App</h1> 

    <div class="container" ng-controller="StoreController as store"> 

     <h1>AngularJS App</h1> 

     <div ng-repeat="product in store.products"> 
      <h3> 
      <product-title></product-title> 
      </h3> 

      <section ng-controller="PanelController as panel"> 
      <ul class="nav nav-pills"> 
       <li ng-class="{active:panel.isSelected(3)}"><a href="#" ng-click="panel.selectTab(3)">Reviews</a></li> 
      </ul> 
      <div class="panel" ng-show="panel.isSelected(1)"> 
       <h4>Description</h4> 
       <blockquote>Product description...</blockquote> 
      </div> 
      <div class="panel" ng-show="panel.isSelected(2)"> 
       <h4>Specifications</h4> 
       <blockquote>None yet</blockquote> 
      </div> 
      <div class="panel" ng-show="panel.isSelected(3)"> 
       <h4>Reviews</h4> 
       <blockquote ng-repeat="review in product.reviews"> 
       <b>Stars: {{review.stars}}</b> 
       {{review.body}} 
       <cite>by: {{review.author}}</cite> 
       </blockquote> 
       <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate> 
       <blockquote> 
        <b>Stars: {{reviewCtrl.review.stars}}</b> 
        {{reviewCtrl.review.body}} 
        <cite>by: {{reviewCtrl.review.author}}</cite> 
       </blockquote> 
       <select ng-model="reviewCtrl.review.stars" required> 
        <option value="1">1 star</option> 
        <option value="2">2 star</option> 
        <option value="3">3 star</option> 
        <option value="4">4 star</option> 
        <option value="5">5 star</option> 
       </select> 
       <textarea ng-model="reviewCtrl.review.body" required></textarea> 
       <label>by:</label> 
       <input ng-model="reviewCtrl.review.author" type="email" required /> 

       <input class="btn" type="submit" value="Submit" /> 
       </form> 
      </div> 
      </section> 
      </div> 


     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script> 
     <script src="products.js"></script> 
     <script src="app.js"></script> 
    </div> 



    </body> 



    </html> 

danken, dass mir helfen!

+0

wo Ihre 'routings' ist definiert hat ?, Ich sehe nicht, dass' ngRoute' ist auch nicht enthalten .. –

+0

In meinem Index. Entschuldigung, ich füge jetzt meinen Index in den ursprünglichen Post ein –

+0

Sie vermissen eine Abhängigkeit von Angular-Route und wo sind die Routen-Definitionen? – Weedoze

Antwort

2

Sie müssen den html5-Modus in der Config wie angeben, in unter

var app = angular.module('store', ['store-products']) 
.config(['$locationProvider', function($locationProvider) { 
    $locationProvider.html5Mode(true); 
}]); 

Lesen Sie mehr über Hash-Bang-Modus und html5-Modus [hier] (https://docs.angularjs.org/guide/ $ location)

1

Sie es nicht tun können, wie dies .... Es gibt eigentlich nur wenige Schritte zu diesem

Sie können auf das folgende Video verweisen und es wird Ihnen ein klares Bild geben, wie es geht

https://www.youtube.com/watch?v=XsRugDQaGOo&ab_channel=kudvenkat

+0

Sie müssen mach es in app.config, ... $ locationProvider ist ein Service wie $ routeProvider –

Verwandte Themen