I have tried all the methods available on a stack and given on angularjs official documentation, so please don't mark it as a duplicate. I'm creating an E-commerce site so is it good that I use angular 4 or 5 in it. Please help me.
The code I've tried is given.
angular.module('myApp', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/home.html',
controller : mainController
})
.when('/about', {
templateUrl : 'partials/about.html',
controller : mainController
})
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : mainController
});
$locationProvider.html5Mode(true);
});
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
</html>
check browser support for the html5 history API:
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
Related
For some reason, routeProvider is not working in my code when I'm clicking on the link. I can't seem to find the error.
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template: "Order Details"
})
.when("/first", {
templateUrl: "first.html"
})
.when("/second", {
templateUrl: "second.html"
})
.when("/third", {
templateUrl: "third.html"
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
show details
show details
show details
<div ng-view></div>
Here is your fix :
Change href="#/first" to href="#!first"
And add to your angular app configuration the following lines:
.config(function ($locationProvider) {
$locationProvider.hashPrefix('!');
}
Here is the working plunkr for the same : Click Here
Since we are defining templateUrl parameter to which we provide the path of template to load, it is creating a difference. If we would have used template parameter to which we provide direct html code to load, then your code will work perfectly.
I am trying to insert a view in my index.html using $routeProvider and ng-view from Angularjs libraries. Can anyone help figure out why it is not getting inserted?
Here are my index.html, my views, and my app.js files:
index.html:
<!doctype html>
<html lang='en' ng-app="myApp">
<head>
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular-route.min.js"></script>
<script src="app/lib/app.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main ng-view>
</main>
</body>
</html>
app.js:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/login', {
templateUrl: 'views/login.html'
})
.otherwise({
redirectTo: '/login'
});
}]);
my login.html (which is in the views folder of my project):
<h1>Welcome to the login page!</h1>
When I try and preview this page in atom the index.html is empty. Any idea what is going wrong?
Hopefully You're running your application on some server.Because the same code is working fine for me.
app.js file
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/login', {
template: '<h1>Welcome to the login page!</h1>'
})
.otherwise({
redirectTo: '/login'
});
}]);
Click here for working plunker.
I am playing around with adding in an Angular-UI router which is working perfectly when I click on links within my application. For example, if I go from / to /feed/9 it will load in the /partials/post.html file into the ui-view div and I can then use the '9' held in $stateParams to populate the template with the data from post 9. However if I refresh the page, the site breaks and Angular tries to load index.html as the ng-app.js file? I have no idea what is happening here. I've uploaded some screenshots to demonstrate this and I've included my node server, angular routing and the relevant html partials. I have no idea where this is going wrong so I can provide any additional data and any help would be greatly appreciated!
Working fine when coming from another link on '/'
On refresh!!
Node - server.js
var = /* Dependencies and vars */;
mongoose.connect(dbConfig.url, dbConfig.options);
app.use(express.static(__dirname + '/public'));
app.use(morgan('dev'));
app.use(bodyParser());
app.use(flash());
require('./routes/api.js')(app); //For CRUD operations on the database
require('./routes/api_proc.js')(app); //Protected endpoints for CDN
require('./routes/api_ext.js')(app); //For getting data from GCal, fb, Twitter and Instagram
/* The following code is a url rewrite to pass all
further get requests that aren't defined in the
above routing files through the index page and
hence through the Angular 'frontend' routes */
app.use(function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
app.listen(port);
Angular ng-app.js
var app = angular.module('app', ['ui.bootstrap', 'ngResource', 'ui.router']);
//Using state ui-router
// ROUTES
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url : '/',
templateUrl : 'partials/home.html'
})
/* ... */
.state('feed', {
url : '/feed',
templateUrl : 'partials/feed.html'
})
.state('post', {
url : '/feed/{id:.*}',
templateUrl : 'partials/post.html',
controller: 'postController'
})
$locationProvider.html5Mode(true);
});
app.factory("Feed", function($resource) {
return $resource("/api/feed/:id", {}, {
query: {
isArray: true
}
});
});
app.controller("postController", function($scope, Feed, $stateParams) {
var feed = Feed.query();
feed.$promise.then(function(promiseData) {
postArray = promiseData.slice(0,promiseData.length);
$scope.feed = promiseData;
$scope.id = $stateParams.id;
});
});
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<!-- CDN -->
<!-- Angular, Bootstrap, Angular modules, etc. -->
<!-- Styles -->
<!-- Angular Script import -->
<script type="text/javascript" src="ng-app.js"></script>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav><!--Bootstrap nav--></nav>
<div ui-view></div>
<footer></footer>
<script>
//For Bootstrap tooltips which are in some of the partials.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[rel=tooltip]').tooltip();
});
</script>
</body>
</html>
/partials/post.html
<div class="container-fluid main-content">
<header class="banner" class="row">
<h1 class="page-title">{{id}}</h1>
</header>
<!-- Main page info -->
</div>
I think you have relative paths pointing to your css files.
When you load page from /feed/9 then links are invalid.
Maybe it happens also for templates referenced from angular.
I am trying to learn about angular Directives and following the example given in here (http://docs.angularjs.org/guide/directive), have written the below code. Could anyone please guide me as what am i doing wrong that the data from the scope of the controller is not being read in the directive? The site says nothing about it! And there is no error upon executing the code, it just does not display any data. Please help.
//My Html
<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<title>Angular Directives</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body >
<div data-ng-controller = "MyCtrl"></div>
<div data-template-expanding-directive></div>
<script src="lib/angular.js"></script>
<script src="js/templateExpandingDirective.js"></script>
</body>
</html>
//My JS
'use strict';
var myapp = angular.module('MyApp',[]);
myapp.controller('MyCtrl',['$scope',function($scope){
$scope.customer = {
name: "Jenny",
place: "England"
};
}])
.directive('templateExpandingDirective',function(){
return {
template: 'Name: {{customer.name}}'
};
});
Regards
The directive is currently out of controller scope. So you need to have directive inside the controller scope. The html should be like this -
<div data-ng-controller = "MyCtrl">
<div data-template-expanding-directive></div>
</div>
If you do not move the directive element inside the controller div element then you can either have one more parent 'div' element or access the data from global root scope.
I'm trying to remove index.html of the url using html5Mode(true) in angularjs, this is the code:
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/home', {templateUrl: 'views/home.html'});
$routeProvider.when('/about', {templateUrl: 'views/about.html'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
If I dont write $locationProvider.html5Mode(true); the url shows:
localhost:(port)/MyApplication/index.html
If I write $locationProvider.html5Mode(true); the url shows:
localhost:(port)
MyApplication is removed of the url.
And I want the url shows:
localhost:(port)/MyApplication/
What I'm doing wrong? What's the problem?
UPDATE:
How should show my <a> tags? Right now I have:
<a href="#/about">About</>
When I click on the link, the url shows:
localhost:(port)/MyApplication/index.html#/about
I'm lost with this.
Thanks in advance!
If your application runs under /MyApplication/ try to set the base path in your index.html and switch on html5Mode:
<html>
<head>
<base href="/MyApplication/index.html" />
...
See Using $location.