Issue with html5Mode in angularjs - html

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.

Related

angularJS script file not working when called in html

Only the html output and the {{10 + 10}} of the web page is rendered. I'm not sure what what I'm doing wrong but I'm guessing it's some setup type issue in my visual studio project.
(function () {
var app = angular.module("ShipmentsHome", []);
var EditShipmentsController = function ($scope) {
$scope.message = "--Still need to create grid here--";
};
app.controller("EditShipmentsController", ["$scope", EditShipmentsController]);
}());
!DOCTYPE html>
<html>
<head>
<title>Shipments Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="../../lib/home.js"></script>
</head>
<body ng-app="ShipmentsHome" ng-controller="EditShipmentsController">
<h1>Product Transfers</h1>
<p>Create or modify a transfer below:</p>
<div> {{message}}</div>
<p>look above for message from controller</p>
<h2>{{10 + 10}}</h2>
</body>
</html>
I am not seeing any errors in the console. Below is what I am seeing:
Probably the problem will be with your relative path. I got it working when I replace the script source with the actual controller script. please check your path and correct it.
Issue was the project I was working with was setup to use .ts files and not .js files. I needed to create the project to work with angularjs not typescript.

how to remove # from url in angularjs 1.6.4

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);
}

Angular loads HTML index instead of ng-app.js on refresh

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.

AngularJS, AngularUi (Bootstrap) and NgRoute

Im using AngularJS 1.4.1, ngRoute 1.4.1 and https://angular-ui.github.io/bootstrap/
The base structure is
<html ng-app="myApp">
<base href="/">
<body>
<div ng-view></div>
</body>
</html>
and I use ngRoute to load each page of my website such as about, contact us, etc... into the div with ng view.
When the page is loaded into ng view using
var myApp = angular.module('myApp', ['ngRoute', 'ngProgress', 'ui.bootstrap']);
myApp.config(function($routeProvider,$locationProvider){$routeProvider
.when('/about',{templateUrl:'about.php',controller:'mainController'})
.otherwise({redirectTo:'/'});
staffPanelApp.controller('mainController', function($scope, $route, $routeParams, $location, $templateCache, ngProgress) {
$templateCache.removeAll();
ngProgress.start();
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
ngProgress.complete();
});
the ui bootstrap feature such as alert should work but it doesn't appear to work in the ngview, it only seems to work when i add it to the main base page. Is there a way to get it to work in the ngView loaded page?
Example Bootstrap UI Feature:
<alert type="success">This should work</alert>
Update:
Plunker but couldn't get ngroute to work but the basis is there:
http://plnkr.co/edit/Njg16e01Ocv1iC1qzn7A?p=preview
Could it be because you create controller on 'staffPanelApp' but your ngApp is called myApp?

AngularJS - "import" different JS files from HTML

I was trying to import certain script depending on which URL I'm.
Simple <script> tag in my HTML is:
<html ng-app="myApp">
...
<script type="text/javascript" src="{{srcRoute}}" language="JavaScript"></script>
...
</html>
I was trying to get this after main module "myApp", in a run block:
angular.module('myApp', [])
.config(function($routeProvider) {
$routeProvider.
when('/', {controller: MyController, templateUrl: 'partials/home.html'}).
otherwise({redirectTo: '/'});
})
.run(function($rootScope) {
$rootScope.srcRoute = 'some/route/here.js';
});
but when running this I get something like:
GET myRoute/%7B%7BsrcRoute%7D%7D 404 (Not Found)
What I want to do is add a conditional sentence in the run block to decide which route to use. Is there a way to do this?
Thanks!