Chrome 앱을 AngularJS로 작성하는 단계

9106 단어 AngularyeomanChromebowergrunt

전제


  • Yeoman의 Chrome 앱 병아리 유형을 사용합니다.
  • 이것: htps : // 기주 b. 코 m / 오오 만 / 게네라와 rch 로메 아 p


  • 개발 환경은 Mac OS입니다.

  • Yeoman의 환경이 없으면 다음과 같이 빌드하십시오.
    # npm install -g yo grunt-cli bower
  • 참고: Yeoman으로 AngularJS & UI Bootstrap 개발 환경 구축


  • 이번은 우선 움직이는 곳까지.

    • 순서①: Chrome 앱 병아리형 생성


  • (아직 설치하지 않은 경우) Chrome 앱의 병아리 생성기를 설치 
    • # npm install -g generator-chromeapp
  • 병아리 생성기 실행 
    • $ mkdir chrome-test
$ cd chrome-test
$ yo chromeapp

  • 기본값으로 진행

  • 실제로는 여러가지 퍼미션을 설정할 필요가 있지만, 나중에도 변경할 수 있으므로 이번은 스루(모두 그대로 [ENTER]키)







  • 설정한 권한에 대한 정보는 app/manifest.json에 기록되어 있습니다.

    app/manifest.json
    {
    "name": "__MSG_appName__",
    "description": "__MSG_appDescription__",
    "version": "1",
    "manifest_version": 2,
    "default_locale": "en",
    "permissions": [],
    "icons": {
        "16": "images/icon-16.png",
        "128": "images/icon-128.png"
    },
    "app": {
        "background": {
            "scripts": [
                "scripts/main.js",
                "scripts/chromereload.js"
            ]
        }
    }
  }

    보충: 나중에 권한을 변경하고 싶다면,
    $ yo chromeapp:permission


  • 일단, 이것으로 최저한은 움직일 것이므로, Chrome으로 확인해 본다. Chrome 확장 프로그램 메뉴를 열고,



  • 병아리 유형 app 디렉토리 선택



  • 방금 전의 병아리 Chrome 앱이 로드되므로,



  • 부팅



  • 이 시점에서 Mac의 앱 목록에도 추가되었습니다.



  • 다음은 메모.

  • Chromo 앱으로 동작 확인 (파일의 변경을 감시 & 반영해 준다)
    $ grunt debug

  • 상기를 통상의 브라우저로 동작 확인하는 경우
    $ grunt debug:server

  • 프로덕션을 위한 미니화된 소스 만들기
    $ grunt build

    그러면 dist 디렉토리에 파일이 생성됩니다.

  • Chrome에서 배포용 패키지 만들기


  • 로고 이미지는 app/manifest.json에 정의되어 있으므로 변경하고 싶으면 변경합니다.


    • 절차②: Chrome 앱 병아리형에 AngularJS 내장



  • Bower로 AngularJS 설치
    $ bower install angular --save

  • 사실 AngularJS를 MVC? 의 구성으로 하고 싶은 곳이지만, 이번은 생략. app/index.html 편집

    app/index.html
    <!doctype html>
-<html>
+<html ng-app ng-csp>
    <head>
        <meta charset="utf-8">
        <title>chrome test</title>
+        <link rel="stylesheet" href="bower_components/angular/angular-csp.css">
        <!-- build:css styles/main.css -->
        <link rel="stylesheet" href="styles/main.css">
        <!-- endbuild -->
+        <script src="bower_components/angular/angular.js"></script>
    </head>
    <body>
        <h1>'Allo</h1>

+        <div ng-controller="TestCtrl">
+            {{sample}}
+        </div>

        <!-- build:js scripts/index.js -->
        <script src="scripts/index.js"></script>
        <!-- endbuild -->
    </body>
</html>

  • app/scripts/index.js 편집

    app/scripts/index.js
    'use strict';
document.addEventListener('DOMContentLoaded', function() {
    var h1 = document.getElementsByTagName('h1');
    if (h1.length > 0) {
        h1[0].innerText = h1[0].innerText + ' \'Allo';
    }
}, false);

+function TestCtrl($scope){
+    $scope.sample = "こんにちは世界！";
+};


  • 결과



  • 포인트
  • index.html 에 ng-csp 의 기재와 angular-csp.css 의 로드가 필요하다
  • 어쨌든, function 를 쓰는 장소가 중요할 것 같다
  • 위의 function 을 index.html 의 head
  • 일반 브라우저에서 작동

  • 어떤 작법이 올바른가는 별로, 통상 브라우저와는 거동이 다르다고



    • 결론



    또 기회가 있으면 계속을 검증합니다.
    grunt-ect로 편안한 HTML 코딩
    GruntJS로 묻는 것을 조작하는 grunt-sstp를 만들었다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage