ngAppRoot #3102

geddski · 2013-07-01T06:15:31Z

A new directive to make it easier to run Angular in a subdirectory.

<html ng-app="app" ng-app-root="/myContext"></html>

@IgorMinar the components that should be affected are $location, $routeProvider, $resource, and $http. Have I missed any?

The text was updated successfully, but these errors were encountered:

petebacondarwin · 2013-07-01T15:39:24Z

Can we change the name to ng-app-base - to better map to the previous
idea of using base[href] and to prevent confusion with $rootScope and root
element?

On 1 July 2013 07:15, Dave Geddes notifications@github.com wrote:

A new directive to make it easier to run Angular in a subdirectory.

@IgorMinar https://github.com/IgorMinar the components that should be
affected are $location, $routeProvider, $resource, and $http. Have I
missed any?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/3102
.

petebacondarwin · 2013-07-01T15:47:04Z

Oh, just read your comment in #2805 (comment).

I still think ng-app-root is confusing. Perhaps ng-app-root-url?

Narretz · 2013-08-22T15:23:24Z

This would be extremely helpful. What are the main difficulties with that? Naively thinking, every component that loads a template or similar just needs to prepend the app base url.

pholly · 2013-10-15T11:11:22Z

As of angular 1.2.0 rc2 the only way to make html5mode work in non-pushstate browsers if your app is in a subdirectory is to use the <base href="" > tag. So the ability to specify app root in another way would be great.

drozzy · 2013-12-05T15:26:08Z

@pholly This does not fix the issue of angular app being in a subdirectory. It is completely broken if using ui-router (which generates urls relative to the root / and not the base href).

Also, is anyone still interested in this? How did you solve your problems? This issue seems to have died...

P.S.: Issue #2805 seemed very relevant and much easier to implement. Did anyone succeed?

Narretz · 2013-12-19T15:22:01Z

+1

pholly · 2013-12-19T15:48:02Z

@drozzy @Narretz I have it all working. Here are my settings:

The root of my app is /Library

Module Config

Set html5Mode

appModule.config( ['$locationProvider', function ($locationProvider) {
    $locationProvider.hashPrefix('!');
    $locationProvider.html5Mode(true);
}]);

Make sure all paths are lowercase so we can match routes

appModule.config(function ($urlRouterProvider) {
    // This is taken from a post somewhere here on the forums
   // I modified it so it doesn't return a url. Rather it changes the location directly. 
   // I only wanted the path to be lowercased so my ids in query string parameters don't get lowercased.
  // So rather than reconstructing the url to return I just set the $location.path and replace the $location.
    $urlRouterProvider.rule(function ($injector, $location) {
        var path = $location.path(), normalized = path.toLowerCase();
        if (path != normalized) {
            //instead of returning a new url string, I'll just change the $location.path directly!
            $location.replace().path(normalized);
        }
    });
})

Routing table

appModule.config(['$stateProvider', function ($stateProvider) {
    var urlRoot = '/library';

    $stateProvider
        .state('munipro', {
            url: urlRoot + '/munipro',
            templateUrl: serverProps.templateUrlRoot + '__MuniproPartial',
            controller: 'MuniproController'
        })
        .state('munipro.content', {
            url: '/?stateAbbr&clientName&contentTypeId&productName&nodeId'
        })
        .state('states', {
            url: urlRoot + '?searchText&codeArchiveDate',
            abstract: true,
            templateUrl: serverProps.templateUrlRoot + '__StatesWrapperPartial',
            controller: 'StatesWrapperController'
        })
        .state('states.stateListing', {
            url: '',
            templateUrl: serverProps.templateUrlRoot + '__States.StateListingPartial',
            controller: 'StateListingController'
        })
        .state('states.clientListing', {
            url: '/{stateAbbr}',
            templateUrl: serverProps.templateUrlRoot + '__States.ClientListingPartial',
            controller: 'ClientListingController'
        })
        .state('client', {
            abstract: false,
            url: urlRoot + '/{stateAbbr}/{clientName}?codeArchiveDate',
            templateUrl: serverProps.templateUrlRoot + '__ClientWrapperPartial',
            controller: 'ClientWrapperController',
            resolve: {
                client: ['mccSharedApi', '$stateParams', 'mccHelpers',
                    function (mccSharedApi, $stateParams, mccHelpers) {
                        return mccSharedApi.getClients({'stateAbbr' : mccHelpers.UrlDecodeComponent($stateParams.stateAbbr), 'clientName' : mccHelpers.UrlDecodeComponent($stateParams.clientName)});
                    }],
                clientRootToc: ['mccSharedApi', '$stateParams', 'mccHelpers', 'mccApi',
                    function (mccSharedApi, $stateParams, mccHelpers, mccApi) {
                        return mccSharedApi.getClients({'stateAbbr' : mccHelpers.UrlDecodeComponent($stateParams.stateAbbr), 'clientName' : mccHelpers.UrlDecodeComponent($stateParams.clientName)}).then(function (client) {
                            return mccApi.getContentToc({ clientId: client.ClientID });
                        });
                    }],
                state: ['mccSharedApi', '$stateParams', 'mccHelpers',
                    function (mccSharedApi, $stateParams, mccHelpers) {
                        return mccSharedApi.getStates({ 'stateAbbr': mccHelpers.UrlDecodeComponent($stateParams.stateAbbr) });
                    }]
            }
        })
        .state('client.ContentType', {
            url: '/{contentTypeId}'
        })
        .state('client.ContentType.Product', {
            url: '/{productName}'
        })
        .state('client.ContentType.Product.Id', {
            url: '/?nodeId'
        });
}]);

In the Head tag of my server-side html for the app I add a base tag with a full url so it works in IE also

The @ syntax is for C# Razor but I think it's clear what the point is. Use the full Url. Trailing slash or not doesn't matter.

<base href="@Request.Url.Scheme://@Request.Url.Authority/Library" />

Let me know if there's something I left out. But I tested in pushstate and non-pushstate browsers and it works.
Philip

taylorcode · 2014-09-16T04:35:40Z

I think that there should be the ability to set the "base" path for both $location and $resource/$http separate from the html <base> path.

In my opinion there is a logical flaw with keying off of the "base href" value for everything, because these three components are functionally decoupled.

The base for html assets (images, fonts, etc.) shares no functional relation to the base for API endpoints, nor the URL paths in an application.

It's coincidental if the base for these three components is the same -- this only occurs if all three are on the same domain and path level.

The best place for the configuration of these providers is in config... I disagree with creating a directive to configure $location, and even more so for configuring $resource. I think it's silly to configure services in the template when they perform no direct operations on or in it.

Furthermore I don't think there is ever a case where you would want to change the base path after the config phase, and creating directives with read-only attributes to configure only causes confusion (such as, 'why doesn't <html ng-location-base-path="{{locationBase}}"> work when I change $rootScope.locationBase?)

davidbilge · 2014-10-13T14:03:37Z

+1

GeertJohan · 2015-03-22T21:40:58Z

+1

andrewferk · 2015-03-23T20:09:42Z

+1

soluml · 2015-05-13T21:24:34Z

+1

jackvsworld · 2015-05-13T22:52:57Z

+1

ogennadi · 2015-06-08T21:53:20Z

+1

janjaali · 2015-06-12T07:40:15Z

+1

mjrk · 2015-07-06T16:25:17Z

+1

rcollette · 2015-07-06T17:14:31Z

+1

codeofsumit · 2015-09-08T08:08:50Z

+1

petebacondarwin · 2015-09-08T11:00:37Z

I kind of agree with @taylorcode here: #3102 (comment).
@IgorMinar and @geddski can we reconsider splitting the configuration of "root" paths for the different components and configuring them in their respective providers instead of a directive?

LunarDevelopment · 2015-09-14T08:54:47Z

I'm having issues with $http get/ post etc working, is there a fix for $http requests base href?

doesn't work for this, nor does .htaccess (As I'd have to place the .htaccess in root folder)

pietrotull · 2016-04-08T15:01:10Z

+1

geddski mentioned this issue Jul 1, 2013

add $locationProvider.baseHref() #2805

Closed

IgorMinar mentioned this issue Aug 13, 2013

html5Mode appbase regression in 1.1.5 #2799

Closed

IgorMinar added component: $location labels Feb 10, 2014

IgorMinar mentioned this issue Feb 10, 2014

fix($location): support alternative means of setting application base path #6129

Closed

petebacondarwin modified the milestones: 1.5.x - migration-facilitation, Backlog Mar 23, 2015

Narretz mentioned this issue Jun 7, 2016

angular ngRoute breaks when using base tag #4442

Closed

Narretz modified the milestones: 1.5.x, 1.7.0, Backlog Apr 21, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ngAppRoot #3102

ngAppRoot #3102

geddski commented Jul 1, 2013

petebacondarwin commented Jul 1, 2013

petebacondarwin commented Jul 1, 2013

Narretz commented Aug 22, 2013

pholly commented Oct 15, 2013

drozzy commented Dec 5, 2013

Narretz commented Dec 19, 2013

pholly commented Dec 19, 2013

taylorcode commented Sep 16, 2014

davidbilge commented Oct 13, 2014

GeertJohan commented Mar 22, 2015

andrewferk commented Mar 23, 2015

soluml commented May 13, 2015

jackvsworld commented May 13, 2015

ogennadi commented Jun 8, 2015

janjaali commented Jun 12, 2015

mjrk commented Jul 6, 2015

rcollette commented Jul 6, 2015

codeofsumit commented Sep 8, 2015

petebacondarwin commented Sep 8, 2015

LunarDevelopment commented Sep 14, 2015

pietrotull commented Apr 8, 2016

ngAppRoot #3102

ngAppRoot #3102

Comments

geddski commented Jul 1, 2013

petebacondarwin commented Jul 1, 2013

petebacondarwin commented Jul 1, 2013

Narretz commented Aug 22, 2013

pholly commented Oct 15, 2013

drozzy commented Dec 5, 2013

Narretz commented Dec 19, 2013

pholly commented Dec 19, 2013

Module Config

Set html5Mode

Make sure all paths are lowercase so we can match routes

Routing table

In the Head tag of my server-side html for the app I add a base tag with a full url so it works in IE also

taylorcode commented Sep 16, 2014

davidbilge commented Oct 13, 2014

GeertJohan commented Mar 22, 2015

andrewferk commented Mar 23, 2015

soluml commented May 13, 2015

jackvsworld commented May 13, 2015

ogennadi commented Jun 8, 2015

janjaali commented Jun 12, 2015

mjrk commented Jul 6, 2015

rcollette commented Jul 6, 2015

codeofsumit commented Sep 8, 2015

petebacondarwin commented Sep 8, 2015

LunarDevelopment commented Sep 14, 2015

pietrotull commented Apr 8, 2016