AngularJS
쓸데없는 일

로컬에서 응용 프로그램 실행

다음 예제에서는 node.js 가 설치되어 있고 npm 을 사용할 수 있어야합니다.
전체 작업 코드는 GitHub @ https://github.com/mikkoviitala/angular-grunt-run-local 에서 얻을 수 있습니다.

일반적으로 새로운 웹 애플리케이션을 개발할 때 가장 먼저해야 할 일은 로컬로 실행하는 것입니다.

아래에서 당신은 grunt (javascript task runner), npm (노드 패키지 관리자) 및 bower (또 다른 패키지 관리자)를 사용하여 완벽한 예제를 찾을 수 있습니다.

실제 응용 프로그램 파일 옆에 위에서 언급 한 도구를 사용하여 몇 가지 타사 종속성을 설치해야합니다. 프로젝트 디렉토리에서 루트 (선호 )를 사용하려면 세 개의 파일이 필요합니다.

• package.json (npm으로 관리되는 종속성)
• bower.json (bower가 관리하는 종속성)
• gruntfile.js (쓸데없는 작업)

따라서 프로젝트 디렉토리는 다음과 같습니다.

package.json

우리는 불평 자체를 설치하고, matchdep 를 통해 삶의 편의성을 높이고 , 이름으로 의존성을 걸러 낼 수있게 해줄 것입니다. grunt-express 는 말장난을 통해 표현 웹 서버를 시작하는 데 사용됩니다. grunt-open 을 통해 URL / 파일을 엽니 다.

따라서이 패키지는 모두 "인프라"와 응용 프로그램을 구축 할 도우미에 관한 것입니다.

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",
    "matchdep": "~0.1.2",
    "grunt-express": "~1.0.0-beta2",
    "grunt-open": "~0.2.1"
  },
  "scripts": {
    "postinstall": "bower install"
  }
}

bower.json

Bower는 프런트 엔드에 관한 모든 것 (또는 적어도 있어야 함)이며 각도 를 설치하는 데 사용합니다.

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {
    "angular": "~1.3.x"
  },
  "devDependencies": {}
}

gruntfile.js

gruntfile.js 안에는 http : // localhost : 9000 / 에 실행중인 새로운 브라우저 창에서 응용 프로그램을 여는 실제 "실행중인 응용 프로그램"마법이 있습니다 .

'use strict';

// see http://rhumaric.com/2013/07/renewing-the-grunt-livereload-magic/

module.exports = function(grunt) {
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
 
  grunt.initConfig({
    express: {
      all: {
        options: {
          port: 9000,
          hostname: 'localhost',
          bases: [__dirname]
        }
      }
    },
 
    open: {
      all: {
        path: 'http://localhost:<%= express.all.options.port%>'
      }
    }
  });
 
  grunt.registerTask('app', [
    'express',
    'open',
    'express-keepalive'
  ]);
};

용법

응용 프로그램을 처음부터 시작하여 실행하려면 위의 파일을 프로젝트의 루트 디렉토리에 저장하십시오 (빈 폴더라면 가능). 그런 다음 콘솔 / 명령 행을 시작하고 다음을 입력하여 필요한 모든 의존성을 설치하십시오.

npm install -g grunt-cli bower
npm install

그런 다음

grunt app

그렇습니다. 실제 응용 프로그램 파일도 필요할 것입니다.
거의 대부분의 예제에서는이 예제의 시작 부분에서 언급 한 GitHub 저장소 를 검색하십시오.

구조가 그렇게 다르지 않습니다. index.html 템플릿, 각도 코드는 app.js 이고 app.css 에서는 스타일이 app.css . 다른 파일은 힘내, 에디터 구성 및 일반적인 것들을위한 것이다. 시도 해봐!