2015-01-23 2 views
1

단지 HTML, JS 및 CSS 파일로 내 전체 응용 프로그램을 연결 : 그것은 더 많은 디렉토리와의 js 파일이, 분명히나는이 같은 구조 뭔가가있는 AngularJS와 응용 프로그램 내장

theprojectroot 
|- src 
|  |- app 
|  |  |- index.html 
|  |  |- index.js 
|  |  |- userhome 
|  |  |  |- userhome.html 
|  |  |  |- userhome.js 
|  |  |- management 
|  |  |  |- management.html 
|  |  |  |- management.js 
|  |  |- social 
|  |  |  |- social.html 
|  |  |  |- social.js 
|  |- assets 
|- vendor 
|- package.json 

을하지만, 아이디어는 내가 HTML 페이지 (ui-router을 사용하여 index.html에로드 됨)를 포함하여 다른 디렉토리에있는 앱의 각 구성 요소를 가지며 각도 모듈, 컨트롤러 등을 포함하는 JS 파일입니다.

넣어 주려고합니다. 내 애플 리케이션 생산 및 나는 어딘가에 이것이 할 수있는 그런 일을 끝까지 읽었던 기억이 그 끝 resu 그냥 세 파일입니다.

  • theproject.html
  • theproject.js
  • theproject.css

내가 바람직 그런트를 사용하여 몇 가지 조사를하고 이러한 솔루션에 대한 인터넷 검색을 했어요. 그러나, 나는 이것을하는 방법에 대한 지침을 찾지 못했습니다.

누구나 방향을 알려주거나이를 수행하는 방법에 대한 지침을 제공 할 수 있습니까?

감사합니다.

답변

-2

나는 소프트웨어 솔루션이 있는지 모르지만, 없이는 가능합니다.

  • 가장 간단한 것은 .css 파일이며, 함께 복사하면됩니다. IE 용으로 특수한 .css를 포함해야하는 경우에는 할 수 없지만 대부분은 하나 또는 두 가지 요청에 적합해야합니다. 덮어 쓴 내용을 손상시키지 않도록로드하는 순서와 동일한 순서로 복사하십시오. 네트워크 대기 시간을 줄이려면 인라인으로 연결하십시오.
  • JS가 조금 더 어렵습니다. 기본 각도 스크립트를 수정해서는 안되기 때문에 하나의 파일이 좋지 않을 수 있지만 모든 파일을 하나의 파일에 저장하면 효과가 있습니다. onLoad 함수를 연결해야합니다. 각도 코드 아래에 붙여 넣을 수도 있지만 미리 테스트 해 보는 것이 좋습니다. 다시 말하지만 코드를 인라인 할 수 있습니다.
  • 아마도 대부분의 네트워크 집중적이지만 가장 어려운 파일은 html 파일입니다.
    • 서버 측에서 사전 처리가 필요한 경우 운이 없게됩니다. 이것을 API로 내보내보십시오.
    • 정적 html 인 경우 2 가지 옵션이 있습니다. 첫 번째는 하나의 (임베디드) json 파일에있는 모든 HTML을 가져온 다음 'RAM에서로드'하는 것입니다. 더 좋은 방법은 theproject.html에 모든 코드를 포함시키고 페이지를로드 할 때까지 코드를 숨기는 것입니다. 이것은 아마도 가장 효과적인 방법 일 것입니다.

다른 팁 당신은 원시로드 속도가 필요한 경우 :

  • 작게하다을하고 HTML, JS 및 CSS 파일을 압축.
  • gzip 활성화
  • 두 번째 요청으로 색인 페이지에서 렌더링 할 필요가없는 데이터를로드하면 브라우저가이 모든 것을 가져올 때까지 기다릴 필요가 없습니다. 이것은 응용 프로그램이 큰 경우 첫 페이지 렌더링 시간을 크게 향상시킵니다.컨트롤러를 인라인하고 색인 페이지에 필요한 CSS 부분을 가져오고 나머지는 나중에 가져옵니다. 귀하의 페이지는 두 번의 네트워크 요청 후에 렌더링 될 수 있습니다.
+0

귀하의 솔루션은 I 즉 수동으로 작업하는 모든 작업을 수행합니까? 그게 이상하지 않아. – CodyBugstein

+0

JS onLoad를 스캔하고 HTML 로딩을 편집하는 것 (모든 것을 얻을 수있는 너무 많은 방법으로 수행 할 수 있음)을 제외한 모든 것을 신속하게 수행 할 수있는 간단한 Perl 스크립트를 작성하는 것은 불가능합니다. 또한 나는 그것을하는 방법을 지적했다. 나는 그것을하기위한 프로그램이 있다는 것을 모른다. 그러나 나는 위의 문제로 인해 있다고 생각하지 않는다. 그러나 귀하의 특정 프로젝트에 쉽게 할 수 있어야합니다. – Sebb

관련 문제