1

This is a strange issue that I have been having. I moved an app I was building locally to cloud9 so i could do all the development online through a browser. I don't think it was the moving of the local to cloud9. I have a idea that it was more I am missing or have out dated dependencies. I don't know if there is a way to check if that is the issue. I am not really an expert on angular. Here is my dependencies package.json file below.

    {
  "name": "mean-app",
  "version": "1.0.0",
  "description": "MEAN stack application",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "mean"
  ],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "angular": "^1.6.0",
    "angular-jwt": "^0.1.8",
    "angular-route": "^1.6.0",
    "bcrypt-nodejs": "0.0.3",
    "bluebird": "^3.4.6",
    "body-parser": "^1.15.2",
    "express": "^4.14.0",
    "jsonwebtoken": "^7.2.1",
    "mongodb": "^2.2.16",
    "mongoose": "^4.7.3",
    "purecss": "^0.6.1",
    "twilio": "^2.11.1"
  },
  "devDependencies": {
    "mocha": "^2.3.3"
  }
}

I am not sure about the reason why now I have the /#!/ once I reloaded this file and moved my other files to the new cloud9 development env.

If someone could direct me to how I can have the /#/ back to normal because it is messing with my routing. and now none of my links load.

Thanks in advance.

HardLuckHank
  • 29
  • 5
  • you can follow this link: http://stackoverflow.com/questions/41140716/routing-issue-with-angularjs-project-using-yeoman-setup/41142588#41142588 – Shiva Dec 21 '16 at 04:42

1 Answers1

1

Did you upgrade versions of Angular around the same time you deployed your code to the cloud? There appears to be a breaking change in $locationProvider from Angular 1.5.x to 1.6.x.

Angular 1.6.0 specifies that the default prefix for the location provider is a bang. You can change this by injecting $locationProvider into your app's config function, then calling $locationProvider.hashPrefix("");

Here's a Pen with an example: http://codepen.io/mac5977/pen/aBMGGm?editors=1011

JS 

(function(){
      'use strict';
       angular.module('app', ['ngRoute'])
          .config(configFxn);
       configFxn.$inject = ['$routeProvider', '$locationProvider'];
     function configFxn($routeProvider, $locationProvider){
       $locationProvider.hashPrefix("");

       $routeProvider.when('/', {
       template: '<h3>/Route</h3><br/><a ng-href="#/secondpage">Switch Route</a>'} )
          .when('/secondpage', {
          template: '<h3>/SecondPage Route</h3><br/><a ng-href="#/">Goto Other Route</a>'} );
  }
})();

HTML

<div ng-app="app">
    <ng-view></ng-view>
</div>
Shel
  • 64
  • 5