[javascript] .js 파일에 상대적인 각도 지시문 templateUrl

이 코드는 route.js라는 파일에 있습니다.

다음은 나를 위해 작동하지 않았습니다.

var scripts = document.getElementsByTagName("script")
var currentScriptPath = scripts[scripts.length-1].src;
var baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);

다음은 수행했습니다.

var bu2 = document.querySelector("script[src$='routes.js']");
currentScriptPath = bu2.src;
baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);

내 테스트는 require to lazy load angular 사용에 대한 다음 블로그를 기반으로합니다.
http://ify.io/lazy-loading-in-angularjs/

require.js는 requireConfig 부트 스트랩을 낳습니다.

requireConfig는 각도 app.js를 낳습니다.

각도 app.js가 내 routes.js를 낳습니다.

revel 웹 프레임 워크와 asp.net mvc에서 동일한 코드를 제공했습니다. revel document.getElementsByTagName ( “script”)에서 내 routes.js가 아닌 필요한 부트 스트랩 js 파일에 대한 경로를 생성했습니다. ASP.NET MVC에서는 디버깅 세션 중에 배치되는 Visual Studio의 삽입 된 브라우저 링크 스크립트 요소에 대한 경로를 생성했습니다.

이것은 내 작업 route.js 코드입니다.

define([], function()
{
    var scripts = document.getElementsByTagName("script");
    var currentScriptPath = scripts[scripts.length-1].src;
    console.log("currentScriptPath:"+currentScriptPath);
    var baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);
    console.log("baseUrl:"+baseUrl);
    var bu2 = document.querySelector("script[src$='routes.js']");
    currentScriptPath = bu2.src;
    console.log("bu2:"+bu2);
    console.log("src:"+bu2.src);
    baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);
    console.log("baseUrl:"+baseUrl);
    return {
        defaultRoutePath: '/',
            routes: {
            '/': {
                templateUrl: baseUrl + 'views/home.html',
                dependencies: [
                    'controllers/HomeViewController',
                    'directives/app-style'
                ]
            },
            '/about/:person': {
                templateUrl: baseUrl + 'views/about.html',
                dependencies: [
                    'controllers/AboutViewController',
                    'directives/app-color'
                ]
            },
            '/contact': {
                templateUrl: baseUrl + 'views/contact.html',
                dependencies: [
                    'controllers/ContactViewController',
                    'directives/app-color',
                    'directives/app-style'
                ]
            }
        }
    };
});

이것은 Revel에서 실행할 때의 콘솔 출력입니다.

currentScriptPath:http://localhost:9000/public/ngApps/1/requireBootstrap.js routes.js:8
baseUrl:http://localhost:9000/public/ngApps/1/ routes.js:10
bu2:[object HTMLScriptElement] routes.js:13
src:http://localhost:9000/public/ngApps/1/routes.js routes.js:14
baseUrl:http://localhost:9000/public/ngApps/1/ 

내가 한 또 다른 좋은 일은 require 구성을 활용하고 몇 가지 사용자 정의 구성을 넣는 것입니다. 즉 추가

customConfig: { baseRouteUrl: '/AngularLazyBaseLine/Home/Content' }

그런 다음 route.js 내부에서 다음 코드를 사용하여 가져올 수 있습니다.

var requireConfig = requirejs.s.contexts._.config;
console.log('requireConfig.customConfig.baseRouteUrl:' + requireConfig.customConfig.baseRouteUrl);

때로는 baseurl을 미리 정의해야하고 때로는 동적으로 생성해야합니다. 상황에 맞는 선택.