AngularJS remove the # in url link - html

I try to remove hastag from url in my website, but i don't know exactly how..
i researched on the internet, and i find it's neccesary to insert a location providers in my controller, but...where?
Here si my 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 to add <base href="/"> in my index.
But, where it's neccesary to insert the $locationProvider command? ( $locationProvider.html5Mode(true);)
EDIT, here is my index from 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 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)}">Reviews</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>
Thank for help me!

You need to specify the html5 mode in the config like in below
var app = angular.module('store', ['store-products'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Read more about hashbang mode and html5 mode
[here] (https://docs.angularjs.org/guide/$location)

Related

Exposing $scope variable to ng-switch

Here is a small piece of code, where I am trying to render an HTML of my choice based on the "type" key of the json. Unfortunaltely, I don't see any error on executing the code nor am I getting the required HTML.
I am very new to Angular
<html>
<head>
<title></title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<script>
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.GenerateTable = function () {
$scope.Customers = [
{type:'email', name:'email',value:'',placeholder:"Your email here",required:true},
{type:'text', name:'password',value:'',placeholder:"Your password here",required:true},
{type:'number', name:'firstname',value:'',placeholder:"Your firstname here",required:false,min:"10",max:"100"},
];
$scope.IsVisible = true;
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Generate Table" ng-click="GenerateTable()" />
<hr />
<div ng-repeat="m in customers">
<div ng-switch="m.type">
<div ng-switch-when="text">
<h1>Hello</h1>
<p>Hello World.</p>
</div>
</div>
</div>
</div>
</body>
</html>
I hope it will help you.
<html>
<head>
<title></title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<script>
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.GenerateTable = function () {
$scope.Customers = [
{type:'email', name:'email',value:'',placeholder:"Your email here",required:true},
{type:'text', name:'password',value:'',placeholder:"Your password here",required:true},
{type:'number', name:'firstname',value:'',placeholder:"Your firstname here",required:false,min:"10",max:"100"},
];
$scope.IsVisible = true;
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Generate Table" ng-click="GenerateTable()" />
<hr />
<div ng-repeat="m in Customers">
<div><input type="{{m.type}}" value="{{m.Name}}" placeholder="{{m.placeholder}}" required="{{m.required}}" /></div>
</div>
</div>
</body>
</html>

AngularJS Routing not loading view

Total Angular newb here...
Just going through a Lynda course and I've got everything working until we get to routing. When all the app logic was in the controller things worked fine. But now for whatever reason my page loads completely blank now that I've added routing into the mix.
I've got an index.html file and I'm trying to pass in a view from list.html.
This is my folder structure so far.
Angular |
|-angular.js
|-angular-route.min.js
|-index.html
js |
|-app.js
|-controllers.js
|-data.json
partials |
|-list.html
The JS and Partials folders are both within the Angular folder.
This is my code so far...
Index
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular/Bootstrap Tests</title>
<link rel="stylesheet" href="bootstrap4/css/bootstrap.css">
<link rel="stylesheet" href="css/bands.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="bootstrap4/js/bootstrap.js"></script>
<script src="angular.js"></script>
<script src="angular-route.min.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<!-- Recent Listens Section -->
<div id="recent-listens-wrapper" ng-view>
</div>
<!-- End of Recent Listens Section -->
</body>
</html>
List
<div class="container">
<div class="row">
<div class="col-sm-12" id="search">
<h2>Band Directory</h2>
<input class="search-bar" ng-model="query" placeholder="Search for bands" type="text" autofocus>
<label class="search-labels">Sort By:
<select ng-model="bandSort">
<option value="name" selected="selected">Name</option>
<option value="genre">Genre</option>
<option value="year">Year</option>
</select>
</label>
<label class="search-labels">
Ascending:
<input type="radio" ng-model="direction" name="direction" checked>
</label>
<label class="search-labels">
Descending:
<input type="radio" ng-model="direction" name="direction" value="reverse">
</label>
</div>
<div class="col-sm-12">
<h1 class="recent-listens">Recent Listens</h1>
</div>
<div class="col-md-2" ng-repeat="item in bands | filter:query | orderBy:bandSort:direction">
<div class="album-preview">
<img class="img-responsive" ng-src="images/bands/{{item.shortname}}_tn.jpg" alt="Photo of {{item.shortname}}"/>
<h3>{{item.album}}</h3>
<p>{{item.name}}</p>
</div>
</div>
</div>
</div>
Controllers
var bandControllers = angular.module('bandControllers', []);
bandControllers.controller('RecentBands', ['$scope','$http', function RecentBands($scope, $http) {
$http.get('js/data1.json').then(function(bands) {
$scope.bands = bands.data;
$scope.bandSort = 'name';
});
}]);
App
var myApp = angular.module('myApp', [
'ngRoute',
'bandControllers'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'RecentBands'
}).
otherwise({
redriectTo:'/list'
});
}]);
Try using $stateProvider
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/list");
$stateProvider
.state('list', {
url: "/list",
templateUrl: 'partials/list.html',
controller:"RecentBands"
})
});
The error is in your recentBands controller. Change the first line for
var app = angular.module('myApp');
There is no need of [] if you don't use any injections. It was just the name of the module, it has to be the same as the general controller.

Angular Js Textbox not focus on button click

Unable to focus on textbox on button click:
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
//Here How to focus my textbox
}
};
});
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
document.getElementById("UserName").focus();
}
};
});
You can use angular.element to select your input box and can call focus(). Try something similar to below::
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username"/>
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.focusText =false;
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
angular.element("#UserName").focus();
}
};
});

Problems understanding inline templates in AngularJS

So im following thinkster.io for an Angular guide and I got stuck on the routing part, specifically, the templating and ui viewing. Heres my code, the problem is, nothing seems to show up anymore :/
var app = angular.module('flapperNews', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home')
}]);
app.factory('posts', [function(){
var o = {
posts: [
{title: 'post 1', upvotes: 5},
{title: 'post 2', upvotes: 2},
{title: 'post 3', upvotes: 15},
{title: 'post 4', upvotes: 9},
{title: 'post 5', upvotes: 4}
]
};
return o;
}]);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.posts = posts.posts;
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({title: $scope.title,
upvotes: 0,
link: $scope.link});
$scope.title = "";
$scope.link="";
};
$scope.increaseVotes = function(post) {
post.upvotes += 1;
};
}]);
html>
<head>
<meta charset="UTF-8">
<title>My Angular App!</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<!--template start-->
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div data-ng-repeat="post in posts | orderBy: '-upvotes'">
<span ng-click="increaseVotes(post)"><img src="lol.jpeg"></span>
<a ng-show="post.link" href="https://{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
- upvotes: {{post.upvotes}}
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
</html>
I cant exactly understand whats wrong with it, in my mind ui-view should be rendering the template, yet for some strange reason, it is not. I tried looking in other questions and it seems that doesnt work either.

.config $routeprovider angularjs

i am using angularjs ..
mainhtml.html
<!DOCTYPE html>
<html data-ng-app="demoapp">
<head>
<script src="scripts/angular.min.js"></script>
<title>Angular js</title>
</head>
<body> <div data-ng-controller="SimpleController">
<div data-ng-view=""></div>
<div class="ng-view"></div>
Name:<input type="text" data-ng-model="name" />{{name}}
<br />
<ul>
<li data-ng-repeat="cust in customers|filter:name|orderBy:'city'">{{cust.name|uppercase}}-{{cust.city|lowercase}}</li>
</ul>
<script>
var demoapp = angular.module('demoapp', []);
demoapp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'view1.html',
controller: 'SimpleController'
}).
when('/partial2', {
templateUrl: 'view2.html',
controller: 'SimpleController'
}).
otherwise({
redirectTo: '/'
});
}]);
demoapp.controller('SimpleController', function ($scope) {
$scope.customers = [{ name: 'aman', city: 'boom' },
{ name: 'ajay', city: 'reem dee' },
{ name: 'hood', city: 'meen' }
];
});
</script>
</div>
</body>
</html>
view1
<div class="container">
<h2>View1</h2>
Name:
<input type="text" data-ng-model="filter.name" />
<br />
<ul>
<li data-ng-repeat="cust in customers|filter :filter.name|orderby"></li>
</ul>
<br />
Customer name:
<input type="text" data-ng-model="newCustomer.name"/>
<br />
<br />
Customer city:
<input type="text" data-ng-model="newCustomer.city"/>
<br />
<br />
<button data-ng-click="addCustomer()">Add customer</button>
<br />
View2
</div>
it works well before adding config($routeprovider) function,,,, routeprovider function is destroying the program... anyhelp to work it correctly
you probably
missed to include angular-route
<script data-require="angular-route#1.2.12" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular-route.js"></script>
next step is to add dependency to ngRoute module, as below
var demoapp = angular.module('demoapp', ['ngRoute']);
enjoy to live sample : http://plnkr.co/edit/sgQGz0JHjKk4CRcoZSUf?p=preview
btw: more info here
https://egghead.io/lessons/angularjs-routeprovider-api
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
official angular page