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

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

-
so when requesting group sequelize follows: return models.workingcalendar .findall({ attributes: [ 'workingcalendar.periodid', 'workingcalendar.date', 'period.name' ], include: [ { model: models.period, attributes: [] } ], where: { getsudoid: currentgetsudo.id, unitplantid: unitplantid }, group: ['workingcalendar.periodid', 'workingcalendar.date', 'period.name'], }); sequelize run query: select [workingcalendar].[id], [workingcalendar].[periodid], [workingcalendar].[date], [period].[name] [workingcalendars] [workingcalendar] left outer join [periods] [period] on [wor...
Read more

c++ - Migration from QScriptEngine to QJSEngine -

-
i'm migrating qscriptengine code on qjsengine. now, have: class pars { public: static qscriptvalue printmainlog(qscriptcontext* c, qscriptengine* e); }; qscriptvalue pars::printmainlog(qscriptcontext* c, qscriptengine* e) { //some actions return e->globalobject().property(""); } ... qscriptengine engine; ... engine.globalobject().setproperty("printlog",engine.newfunction(pars::printmainlog)); so, user can put printlog("what ever"); in application in , example, qlineedit , function pars::printmainlog evalute. is there way qjsengine? so, user put same printlog("what ever");? way find here , user should put logger.printlog("what ever"); logger class inherited qobject printlog slot.
Read more

delphi - Take screenshot in webcam using VFrames in Console Application -

-
i'm doing program take picture of webcam using delphi xe2 , vframes achieve this, problem have figured out, in graphic application works fine, when use unit in console application, returns me error saying first chance exception @ $76b6b727. exception class eaccessviolation message 'access violation @ address 004a271b in module 'console.exe'. read of address 00000260'. process console.exe (3676) my unit : unit webcam; interface uses sysutils, windows, vcl.imaging.jpeg, vcl.graphics, vsample, vframes, classes; type twebcam = class private procedure newvideoframeevent(sender: tobject; width, height: integer; dataptr: pointer); public constructor create; destructor destroy; override; procedure capture_webcam(take_name: string); end; var web_image: tvideoimage; name_screen: string; implementation constructor twebcam.create; begin inherited create; end; destructor twebcam.destroy; begin inherited destroy; end; ...
Read more