Ember와 Ember Cli를 시작합니다

코어 포인트

Ember CLI는 EMBER 용으로 제작 된 명령 줄 도구로 발전기, 압축기, CSS 전처리기 컴파일러, 자동 재 장전 및 ES6 모듈 로더와 같은 다양한 기능을 결합합니다. 새로운 Ember 프로젝트를 설정하기위한 Grunt 및 Gulp와 같은 도구의 대안으로 사용할 수 있습니다.

ember는 규칙이 구성보다 낫다는 개념을 따릅니다. 즉, 개발 프로세스를 단순화하는 많은 기본 설정이 있습니다. 주요 요소에는 라우팅, 컨트롤러, 템플릿, 구성 요소 및 Ember-Data가 포함됩니다.

이 튜토리얼은 Ember CLI를 사용하여 간단한 연락처 응용 프로그램을 구축하는 방법에 대한 단계별 안내서를 제공합니다. 새로운 EMBER 프로젝트 생성, 고정 데이터 설정, 사용자 모델 생성 및 라우팅, 사용자 템플릿 생성 및 디스플레이 추가 및 사용자 정보 편집 기능이 다룹니다.
• Ember는 대형 웹 응용 프로그램을 구축하기위한 강력한 JavaScript 프레임 워크입니다. Ember CLI를 사용하면 의존성을보다 쉽게 ​​관리하고 작업을 자동화하며 모범 사례를 실행할 수있는 표준화 된 개발 환경을 제공합니다.
• Ember는 수년에 걸쳐 많은 변화를 겪었습니다. 가장 큰 변화는 Ember를 위해 구축 된 명령 줄 도구 인 Ember Cli의 도입입니다. 발전기, 압축기, CSS 전 처리기 컴파일러, 자동 재 장전 및 ES6 모듈 로더와 같은 다양한 기능을 결합합니다. 이 명령 줄 도구는 Grunt 및 Gulp와 같은 도구를 설정하는 데 소비하는 시간을 줄이는 데 도움이됩니다. 새로운 Ember 프로젝트를위한 이러한 도구에 대한 좋은 대안 일 것입니다. 이 기사에서는 Ember CLI를 사용하여 간단한 연락처 응용 프로그램을 구축하는 방법을 배우게됩니다. 이 튜토리얼은 Ember CLI와 함께 제공되지 않기 때문에 itepoint에 게시 한 Ember에 대한 다른 기사와 약간 다릅니다. 그러나 이러한 개념의 대부분은 여전히 ​​여전히 적용되므로 확인하고 계속 학습하는 것이 좋습니다. 이 기사의 전체 코드는 Github에서 찾을 수 있습니다.
• ember cli
그런 다음 ember Cli를 설치하려면 다음 명령을 실행하십시오. 새로운 ember 프로젝트를 만드는 방법 훌륭한 작업을 시작하기 전에 ContactManager라는 새 프로젝트 폴더를 만들려면 터미널을 열고 다음 명령을 실행해야합니다.

두 번째 단계에서 디렉토리로 이동하여 다음 명령을 사용하여 모든 NPM 및 Bower Dependencies를 설치하십시오.

이시기에 다음 명령을 실행하여 내장 EMBER 서버를 시작하십시오.

이제 URL LocalHost : 4200에서 새 응용 프로그램에 액세스 할 수 있습니다. 이것은 로컬 컴퓨터에서 실행되는 Ember 응용 프로그램의 기본 포트이지만 원하는대로 변경할 수 있습니다. 지시받은 모든 단계를 따르면 이제 "Ember에 오신 것을 환영합니다"라는 브라우저에 제목이 표시됩니다. ember 컨벤션 및 구조

우리가 신청서에 뛰어 들기 전에 일부 ember 컨벤션을 검토합시다. 라우터와 라우터 라우팅은 Ember 응용 프로그램의 진입 점입니다. 라우터 정의는 app/router.js 파일에 사용됩니다. 응용 프로그램의 다른 부분에 액세스 할 수 있습니다. 예를 들어, 응용 프로그램에서 사용자를 관리해야한다고 결정하면 사용자 경로를 정의해야합니다. 다음 구문을 사용 하여이 작업을 수행 할 수 있습니다

이것은 우리를 위해 다음 URL을 생성합니다 :

/user/

/user/index/

/사용자/로드/

컨벤션별로, 경로를 정의 할 때 Ember는 경로, 컨트롤러 및 템플릿과 같은 다른 연관 유형을 찾을 것으로 예상합니다. 우리는 이러한 유형을 명시 적으로 만들거나 Ember가 우리를 위해 만들 수 있도록 결정할 수 있습니다. 많은 응용 프로그램에서, 당신은 그들을 직접 만들어야 할 가능성이 높지만 그것은 당신에게 달려 있습니다. 라우터와 경로를 구별하는 것이 중요합니다. 위에서 만든 URL 구조는 라우터를 사용하여 수행됩니다. 이들은 응용 프로그램에서 이러한 URL을 사용하려는 의도 만 보여줍니다. 우리는 실제 경로를 만들지 않았지만 해당 경로의 URL 만 만들었습니다. 경로를 만들려면 경로 폴더 에서이 프로세스를 따라야합니다. 혼란 스러우면이 주제를 더 깊이 살펴 보면 걱정하지 마십시오.
컨트롤러 컨트롤러는 앱/컨트롤러 폴더에 위치한 뷰 상태를 저장하는 데 사용되는 유형입니다. 그들은 라우팅과 함께 작동합니다. 이 경우 위의 URL은 /user /에 해당하며 /사용자 /이름이 지정된 컨트롤러가 필요합니다. 또한 여기에서는 직접 정의할지 여부를 자유롭게 선택할 수 있습니다. 컨트롤러는 또한 뷰 작업 (예 : 클릭, 호버 등)의 이벤트 처리기를 정의합니다.

npm install -g bower

템플릿 <🎜 🎜> 템플릿은 Ember의 표현 부분입니다. 당신은 그것을 순수한 HTML로 컴파일하는 핸들 바라는 템플릿 언어로 작성합니다. 템플릿은 앱/템플릿 폴더에 있습니다.

<<> 구성 요소
구성 요소는 작은 자체 포함 기능 블록입니다. 당신은 그것들을 표현과 특징의 조합으로 생각할 수 있으며, 재사용 가능하고 유지하기 쉽습니다.
• ember-data <🎜 🎜> 이것은 Ember Core 팀이 Ember Core를 보완하고 데이터 모델을 관리하기위한 프론트 엔드 ORM 역할을하는 라이브러리입니다. Ember-Data를 사용할 것이므로 이전에 사용하지 않은 다른 대안이 있으며이 기사의 범위를 벗어났습니다.
• <<> app
• 우리가 빌드 할 연락처 관리 응용 프로그램에는 사용자 목록과 사용 가능한 연락처 정보가 포함됩니다. 응용 프로그램을 사용하면 사용자를 생성, 편집, 삭제 및보기 할 수 있습니다. 응용 프로그램을 간결하고 명확하게하기 위해 Ember CLI와 함께 제공되는 고정 어댑터를 사용합니다. 이것은 페이지가 새로 고침 될 때 데이터가 지속되지 않는다는 점을 제외하고 백엔드 역할을합니다. 먼저, 당신이 그것을 만들지 않았다면, Ember New ContactManager를 사용하여 새로운 Ember 프로젝트를 만듭니다.
사용자 모델을 생성합니다 프로젝트 폴더로 이동하여 다음 명령을 사용하여 사용자 모델을 생성합니다.
이것은 다음 내용으로 app/models에서 user.js라는 파일을 만듭니다.

npm install -g bower

내보내기 명세서가 다음과 같이 보이도록 필요한 변경을 수행합니다.

이것은 사용자 모델이 가지고있는 속성을 정의합니다.

사용자 경로를 생성 <🎜

npm install -g ember-cli

이제 router.js 파일에 다음 줄을 추가하여 사용 가능한 URL을 제공합니다.

우리는 세 개의 새로운 URL이 있습니다. 하나는 사용자를 나열하고 다른 하나는 개별 사용자를 보는 것이고 마지막은 사용자 정보를 편집하는 것입니다. 다음으로, 다음 명령을 사용하여 사용자 경로를 만들어 봅시다 :

이 경로는 사용자 목록을 검색하는 데 사용됩니다. 다음 코드 스 니펫을 사용하여 컨텐츠를 변경하십시오

고정 데이터를 설정하고 사용자 템플릿을 생성

이 시점에서 응용 프로그램에 임시 데이터를 추가하겠습니다. 이렇게하려면 다음 명령을 실행하십시오

이것은 앱/ 어댑터/ 폴더에서 application.js라는 파일을 생성합니다. 기본적으로 Ember는 재시험사를 사용하여 모델을 쿼리합니다. 이 어댑터는 EMBER 클라이언트 응용 프로그램에 JSON 데이터를 제공하는 백엔드 시스템이 있다고 가정합니다. 백엔드가 없으므로이 경우 고정 데이터를 대신 사용하려고합니다. 따라서 어댑터 코드를 다음과 같이 업데이트합니다.

ember new contactmanager

및 사용자 모델에 다음을 추가하여 일부 비품을 만듭니다.
URL LocalHost : 4200/사용자로 이동하면 방금 추가 한 사용자 고정 데이터가 아닌 이전 인사말 메시지 만 표시됩니다. 사용자 데이터를 보려면 다음 명령을 사용하여 사용자를위한 템플릿을 만들어야합니다.

cd contactmanager
npm install
bower install

이것은 앱/ 템플릿/ 폴더에서 user.hbs라는 파일을 만듭니다. 이 파일을 열고 다음과 같이 내용을 업데이트하십시오.

이제 옆에 편집 텍스트가있는 사용자 목록이 표시되어야합니다. 고정 데이터에는 한 명의 사용자 만 있으므로 한 명의 사용자 만 볼 수 있습니다. 필요에 따라 사용자 객체에 더 많은 사용자 객체를 추가 할 수 있습니다. 각 객체에 고유 한 ID가 있는지 확인하십시오.

<<> 개별 사용자를 보여주십시오

ember serve

이제 사용자를 나열 했으므로 사용자의 전체 정보를 표시하는 방법을 살펴 보겠습니다. 첫 번째. 각 사용자 이름 옆의 "편집"텍스트를 링크로 둘러싸고 사용자 템플릿의 코드를 변경하십시오. 그런 다음 "편집"을 다음과 같이 변경하십시오

<'s> 다음, 다음 명령을 사용하여 사용자 컨트롤러를 생성합시다.

내부 (사용자 컨트롤러), 내용을 다음으로 변경하십시오.

<,> 완료 후 다음 명령을 사용하여 사용자를 편집하기위한 템플릿을 생성하십시오.

현재 생성 된 템플릿 (App/Templates/Users/Show.hbs)이 비어 있습니다. 그것을 열고 다음 코드를 추가하십시오

Router.map(function() {
  this.resource('users', function() {});
});

이 작업을 수행하면 클릭하면 각 사용자에 대한 전체 정보를 볼 수 있어야합니다.

단일 사용자 <🎜

편집 단일 사용자를 편집하려면 몇 가지 간단한 단계를 따라야합니다. 먼저, 각 사용자 이름 옆의 "편집"텍스트를 링크로 둘러싸고 사용자 편집 경로에 링크하십시오. 그런 다음 "편집"을 다음과 같이 변경하십시오

<'s> 다음, 다음 명령을 사용하여 사용자 컨트롤러를 생성합시다.

내부 (사용자 컨트롤러), 내용을 다음으로 변경하십시오.

<,> 완료 후 다음 명령을 사용하여 사용자를 편집하기위한 템플릿을 생성하십시오.

npm install -g bower

새 템플릿 앱/템플릿/사용자/편집에서 다음 코드를 붙여 넣으십시오.

이 코드는 양식을 제출할 때 컨트롤러에서 SaveUser () 함수를 호출합니다. 이 기능은 사용자를 편집하고 수정 된 정보를 저장합니다. 이 변경으로 사용자의 편집 링크를 클릭하면 사용자의 세부 사항을 편집 할 수 있습니다. 저장 버튼을 클릭하면 저장 버튼을 저장할 수 있으며, 그 후에는 사용자 목록으로 다시 리디렉션됩니다. 오랫동안 살다! 이제 간단한 연락처 목록 관리자가 있습니다. 페이지가 새로 고침 될 때 지속적인 데이터를 위해 실제 백엔드에 연결하여 전체 응용 프로그램으로 변환 할 수 있습니다. 또한 원치 않는 사용자를 언제든지 삭제할 수 있도록 앱에 삭제 기능을 추가하는 것이 좋습니다.

npm install -g ember-cli

결론 <🎜 🎜> <🎜🎜> ember <🎜

/www.php.cn/link/0e0f9e664029e8912996d65c1cf09761

는 대형 웹 애플리케이션을 구축하기위한 프레임 워크입니다. 규칙이 구성보다 낫다는 생각이 있습니다. 즉, 여러 가지 일반적인 결정을 기반으로하며 많은 기본값 (규칙)이있어 개발 프로세스가 더 쉬워집니다. 이런 식으로 개발 과정에서 많은 사소한 결정을 내릴 필요가 없습니다. 이 튜토리얼을 읽고 프로젝트에서 강력하고 간단한 JavaScript 프레임 워크를 사용하는 방법에 대한 새로운 것을 배우는 것을 즐겼기를 바랍니다. 아래 의견에 대해 어떻게 생각하는지 알려주십시오. GitHub에서 응용 프로그램 코드를 찾을 수 있습니다.

ember new contactmanager

<🎜 🎜> <<> Ember와 Ember Cli <🎜 🎜 <🎜 <🎜 🎜>에 대한 질문에 대해 자주 묻는 질문 Ember와 Ember Cli의 차이점은 무엇입니까?

Ember는 웹 애플리케이션을 구축하기위한 JavaScript 프레임 워크이며 Ember CLI는 EMBER 애플리케이션을 작성, 개발 및 구축하는 데 도움이되는 명령 줄 도구입니다. Ember CLI는 표준화 된 개발 환경을 제공하여 종속성을보다 쉽게 ​​관리하고 작업을 자동화하며 모범 사례를 실행할 수 있습니다.

Ember CLI를 설치하는 방법은 무엇입니까?

cd contactmanager
npm install
bower install

Ember CLI를 설치하려면 시스템에 node.js 및 npm을 설치해야합니다. 이 전제 조건을 설치 한 후 터미널의 다음 명령을 사용하여 Ember CLI를 설치할 수 있습니다.

나는 "Serve Command를 사용하기 위해 Ember CLI 프로젝트 내부에 있어야한다"라는 오류 메시지를받습니다. 이것이 무엇을 의미합니까?

이 오류는 Ember CLI 프로젝트 디렉토리 외부에서

ember serve

명령을 실행하려고 할 때 발생합니다. 이 문제를 해결하려면

명령을 사용하여 를 실행하기 전에 프로젝트의 루트 디렉토리로 이동하십시오.

Ember CLI를 사용하여 새 Ember 애플리케이션을 만드는 방법은 무엇입니까?
명령과 응용 프로그램 이름을 사용하여 새 Ember 응용 프로그램을 생성 할 수 있습니다. 예를 들어,

는 "My-App"이라는 새로운 Ember 응용 프로그램을 만듭니다. ember new 어떤 기본 Ember CLI 명령을 알아야합니까? ember new my-app > 알아야 할 일부 기본 EMBER CLI 명령에는 (개발 서버 시작), (응용 프로그램 빌드 배포 프로그램).

Ember CLI를 사용하여 생산 응용 프로그램을 구축하는 방법은 무엇입니까?

명령을 사용하고 .

Ember CLI를 사용하여 Ember 응용 프로그램에서 새 파일을 생성하는 방법은 무엇입니까? ember new ember serve 명령과 파일 유형과 이름을 사용하여 이름을 사용하여 Ember 응용 프로그램에서 새 파일을 생성 할 수 있습니다. 예를 들어, ember generate는 "about"라는 새로운 경로를 생성합니다. ember build Ember CLI를 사용하여 개발 서버를 시작하는 방법은 무엇입니까?

명령을 사용하여 개발 서버를 시작할 수 있습니다. 이렇게하면 서버가 시작되어 응용 프로그램에 http : // localhost : 4200에서 액세스 할 수 있습니다.

Ember CLI를 업데이트하는 방법은 무엇입니까?

명령을 사용하여 이전 버전을 제거한 다음 명령을 제거한 다음 명령을 사용하여 새 버전을 설치하여 Ember CLI를 업데이트 할 수 있습니다.

.ember-cli 파일의 목적은 무엇입니까? ember build 파일은 Ember CLI의 구성 파일입니다. Ember CLI 프로젝트의 동작을 사용자 정의 할 수 있습니다. 예를 들어, 개발 서버의 기본 포트를 지정하고 특정 기능을 활성화 또는 비활성화 할 수 있습니다. --environment

위 내용은 Ember와 Ember Cli를 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!