html - AngularJS remove the # in url link -
i try remove hastag url in website, don't know how..
i researched on internet, , find it's neccesary insert location providers in controller, but...where?
here si 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: 'user1@schimbatot' }, { stars: 4, body: 'good!', author: 'user2@schimbatot' } ] }, ]; })(); and module code:
(function() { var app = angular.module('store-products', []); app.directive('producttitle', function () { return { restrict: 'e', templateurl: 'product-title.html' }; }); })(); also, find it's neccesary add <base href="/"> in index.
but, it's neccesary insert $locationprovider command? ( $locationprovider.html5mode(true);)
edit, here index page:
<!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 store"> <h1>angularjs app</h1> <div ng-repeat="product in store.products"> <h3> <product-title></product-title> </h3> <section ng-controller="panelcontroller 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 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> thank me!
you need specify html5 mode in config in below
var app = angular.module('store', ['store-products']) .config(['$locationprovider', function($locationprovider) { $locationprovider.html5mode(true); }]); read more hashbang mode , html5 mode [here] (https://docs.angularjs.org/guide/$location)
Comments
Post a Comment