Minimalist Angular2 Thiết lập

Question

Tôi đang có một thời gian khó hiểu những gì thực sự cần thiết để sử dụng chức năng cơ bản của Angular2 với Typescript. Như trong, một dự án nhỏ gọn trông như thế nào? Những phụ thuộc nào tôi hoàn toàn cần phải có trong một dự án "thực" (không chỉ là "Hello World", nhưng không có gì phức tạp)?

Tôi nhận thấy rằng câu hỏi này có câu trả lời, ví dụ: trên angular site, nhưng chúng dường như bao gồm rất nhiều lông tơ. Sách góc dường như đã lỗi thời. Ví dụ, tôi chạy npm cài đặt trên angular2 và có các gói khác nhau so với những gì ng-book2 được liệt kê (mặc dù thừa nhận, tôi đã nhận nó một thời gian trở lại, vì vậy nó có thể đã được cập nhật).

1. Cài đặt node HOẶC ĐẢM BẢO BẠN CÓ GÌ MỚI NHẤT! Ngay cả các cài đặt tương đối mới mẻ cũng có thể đã lỗi thời. Cách dễ nhất để cài đặt lại nút trên cửa sổ là chỉ cần truy cập trang web và tải xuống lại trình cài đặt.
2. npm cài đặt angular2
3. npm install -g typescript
4. ???

Tôi đang ném tiền thưởng về điều này, vì vậy sẽ rất tuyệt khi nhận danh sách các bước và một chút mã mẫu với chức năng cơ bản. Tôi cũng quan tâm đến những gì cần được tham chiếu trong dự án và tại sao. (Ví dụ, một sự khác biệt tôi nhận thấy từ Góc 1 là mọi người dường như tham chiếu nhiều tệp trong thư mục Góc 2 mà npm cài đặt, tại sao?)

P.S. Ưu tiên hơn với Webpack, hoặc một lời giải thích về việc liệu SystemJs và WebPack có thể được bỏ qua cho một thiết lập tối giản.

Answer 1

Đây là một plunker cho thiết lập angular2 tối thiểu. Đây là mẫu bắt đầu mà nhóm góc sử dụng.

http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue

They have been maintaining this link as they update the framework. 

Answer 2

Góc 2 là một khung mô-đun, có một số mô đun cốt lõi và sau đó là nhiều mô-đun tùy chọn. Các mô-đun này có thể được kết nối với nhau để tạo thành các loại ứng dụng khác nhau với các tính năng khác nhau.

Có một số tài liệu chính thức tốt về nó ở đây https://angular.io/docs/ts/latest/guide/architecture.html

Về cách nhanh nhất để bắt đầu Tôi muốn giới thiệu góc-cli, chỉ cần sử dụng các chi nhánh webpack https://github.com/angular/angular-cli/tree/v1.0.0-beta.11-webpack.8

Answer 3

Trả lời 1:

Chỉ cần xem một liên kết - Đặt thủ công Angular 2 Environment trong đó thực sự giải thích lý do tại sao chúng tôi thêm như vậy và các tệp cho thiết lập ứng dụng Angular 2 của chúng tôi.

• Có những bước thủ công tham gia như vậy là so với npm install angular-cli chúng tôi tốt hơn (tối đa chừng mực nào đó) biết những gì chúng tôi đang làm
• Đó là tối giản - không có thử nghiệm - chỉ bao gồm những gì là cần thiết cho Angular2 - Hello world.

Có một lỗi mà tôi tìm thấy trong tệp mã mà họ đã cung cấp. Trong index.html tập tin, thay vì

System.import('/angular2/src/app/environment_main') 
      .then(null, console.error.bind(console)); 

Tham khảo

System.import('/app/environment_main') 
      .then(null, console.error.bind(console)); 

Nó nên là đường dẫn tương đối của các tập tin mà chúng tôi nói với các góc để tải các thành phần.

Hy vọng câu trả lời sẽ là câu trả lời.

---

Trả lời 2:

Sau nodejs cài đặt, bạn có thể làm điều này bằng cách chỉ 3 lệnh.

npm install -g typings 
npm install -g angular-cli 

ng new PROJECT_NAME 

Điều này sẽ thiết lập dự án mới với Angular2.

Chạy các lệnh:

ng new PROJECT_NAME 
cd PROJECT_NAME 
ng serve 

Đó là nó, bây giờ bạn có một dự án ví dụ đơn giản được thực hiện với góc 2. Bây giờ bạn có thể điều hướng đến các liên kết được hiển thị trong terminal và xem những gì nó đang chạy .

---

Đối với người mới bắt đầu Tôi đề nghị phương pháp đầu tiên để hiểu rõ hơn - những gì đang xảy ra và tất cả ..

Answer 4

Angular2 là một khuôn khổ và có rất nhiều phụ thuộc. Vì vậy, yeah, có rất nhiều fluff mà cần cấu hình cho tất cả mọi thứ để làm việc.

The Angular2 quickstart là những gì bạn cần. Vì vậy, đối với một câu trả lời ngắn: dự án tối thiểu là gần giống như với một dự án phức tạp (libs/dependencies/build related).

Điều duy nhất bạn có thể bỏ qua từ đó bắt đầu nhanh là các thử nghiệm.

Answer 5

tôi đã mô tả làm thế nào để tạo ra các góc dự án 2 RC.6 Minimalistic sử dụng SystemJS đây: https://yakovfain.com/2016/09/01/starting-an-angular-2-rc-6-project/

Đối với các dự án Webpack dựa trên Minimalistic xem dự án này: https://github.com/Farata/angular2typescript/tree/master/chapter10/basic-webpack-starter

Answer 6

Hãy để tôi giới thiệu cho bạn những best angular2 seed Tôi thực sự biết.

Hạt giống đó là đặc biệt bởi vì nó không phải là một dự án angular2 cổ điển, nhưng một hạt giống đẳng cấu cho angular2 dựa trên một công nghệ gọi là angular universal. Nó cũng có một hệ thống nén giúp cho dự án của bạn nhanh hơn, thank to webpack.

Dưới đây là lược đồ hiển thị cho bạn khái niệm về ứng dụng đồng bộ .

Các khái niệm này là khá dễ dàng: đẳng cấu từ "ISO" tiếng Hy Lạp "bình đẳng" và "morph" cho "hình dạng". Sự đẳng cấu mô tả rằng nếu bạn nhìn vào cùng một thực thể trong hai bối cảnh khác nhau, bạn sẽ nhận được cùng một điều. Ở đây các ngữ cảnh là máy chủ và máy khách. Mặc dù thuật ngữ này chủ yếu được sử dụng trong toán học cho đến bây giờ, nó là một thuật ngữ apt để mô tả một mẫu lập trình web, nơi mã được chia sẻ bởi front-end và back-end.

Để tiếp tục, mẫu đó được cho là để cho phép bạn make a server rendering. Cải tiến đó sẽ làm cho ứng dụng web của bạn nhanh hơn, do đó, bằng cách rất thân thiện với SEO và dễ bảo trì hơn. Google sẽ thực sự yêu thích nó vì không có mẫu đẳng hình, ứng dụng angular2 của bạn sẽ có cấu trúc HTML gần như trống rỗng, rất xấu đối với ngữ nghĩa.

Tôi cũng mời bạn xem that demonstration of Angular Universal.

Tôi đoán bạn đã nghe nói về React.JS, là đối thủ cạnh tranh mạnh mẽ của Angular2. React is also an isomorphic framework và bạn có thể thích nó vì một số lý do, đó là lý do tại sao bạn nên đọc bài viết đó có tên "Angular 2 versus React: There Will Be Blood".

Thuyết phục? : Hãy cài đặt Angular2 Universal!

Bước đầu tiên rất dễ dàng: kiểm tra xem bạn có điều kiện tiên quyết hay không. Chỉ cần gõ lệnh sau:

node -v && npm -v 

Nếu kết quả trông giống như đầu ra sau, có nghĩa là bạn đã cài đặt NodeJS và NPM.

v5.8.0 
3.10.6 

Nếu đầu ra là khác nhau, sau đây là toàn bộ lời giải thích để cài đặt NodeJS và NPM trên environnent cụ thể của bạn. Để sao chép kho lưu trữ, bạn cũng sẽ need to install git.

Khi bạn đã hoàn tất, clone kho bằng cách viết:

git clone https://github.com/angular/universal-starter myProject 
cd myProject 

Sau đó, bạn sẽ phải cài đặt các module Node được sử dụng bởi dự án đó. Danh sách các phụ thuộc của dự án được trình bày chi tiết trong tệp package.json. Để cài đặt, bạn chỉ cần sử dụng lệnh sau trong thư mục của dự án của bạn:

npm install 

Nếu bạn đang sử dụng Ubuntu, bạn có thể có một vấn đề uỷ quyền NPM. Trong trường hợp đó, bạn chỉ có thể chạy npm install làm người dùng sudo nhưng hãy cẩn thận, nó có thể không thành công do phiên bản npm cho người dùng sudo của bạn có thể khác với phiên bản npm cho người dùng hiện tại. Nó có nghĩa là sudo npm -v có thể cung cấp cho bạn một đầu ra khác với lệnh trước đó, trong trường hợp đó cập nhật npm là người dùng sudo và là người dùng hiện tại của bạn để có phiên bản mới nhất trong cả hai trường hợp.

Để hoàn tất quá trình cài đặt, bạn cần một gói NPM gọi typings chỉ cần cài đặt nó bằng cách chạy

npm install typings --global 

Khi nó được thực hiện, chỉ cần chạy lệnh sau để cài đặt typings phụ thuộc:

typings install 

Khi bạn hoàn tất, bạn chỉ có thể chạy dự án bằng cách chạy

npm start 

Nếu bạn gặp sự cố EACCESS (ủy quyền), you can fix it hoặc vẫn khởi chạy lệnh đó với tư cách người dùng sudo. Bây giờ bạn có thể khám phá dự án đó, chơi với, và nếu bạn có bất kỳ câu hỏi nào: the Angular2 Documentation is here for you!