15 công cụ AngularJS hữu ích cho nhà phát triển

Nghĩ đến việc nhúng ngón chân vào Angular? Nếu bạn đã trải qua 10 hướng dẫn tốt nhất của chúng tôi để tìm hiểu bài đăng AngularJS và muốn tự mình chơi xung quanh với Angular, bạn sẽ chọn đúng bài. Chúng tôi có một số các công cụ có thể hợp lý hóa quy trình phát triển của bạn.

Chúng tôi đang xem xét 15 IDE tốt nhất, trình soạn thảo văn bản, công cụ để kiểm tra và gỡ lỗi, mô-đun và các công cụ và ứng dụng phát triển để xây dựng với Angular. Nếu bạn có các công cụ hoặc ứng dụng yêu thích của mình, hãy chia sẻ chúng với chúng tôi trong các bình luận bên dưới.

IDE & Trình soạn thảo văn bản

Trong thế giới lập trình, có hai loại biên tập viên: đầy đủ tính năng Môi trường phát triển tích hợp (IDE) và biên tập văn bản nhẹ. Cả hai đều cho phép tiến trình phát triển nhanh hơn. IDE và trình soạn thảo văn bản mà chúng tôi liệt kê dưới đây là những công cụ khá tốt để tăng tốc độ phát triển Angular của bạn. Chúng có thể được cấu hình dễ dàng cho môi trường Angular.

WebStorm

WebStorm phù hợp không chỉ với Javascript mà cả HTML và CSS. Nó có một trình chỉnh sửa trực tiếp tuyệt vời cho phép bạn xem kết quả mã hóa của mình trên trình duyệt mà không cần thường xuyên làm mới. Theo mặc định, phiên bản mới nhất của họ mang gói plugin AngularJS mặc dù trước tiên bạn cần đưa tập lệnh Angular vào dự án của mình. Để biết thêm chi tiết, hãy đọc bài đăng trên blog của WebStorm.

Aptana

Aptana là một IDE mã nguồn mở miễn phí, thực sự là phiên bản tùy biến của Eclipse tập trung vào Javascript, HTML, CSS và các tính năng web khác. Để mở rộng Aptana cho hỗ trợ Angular, tất cả những gì bạn cần làm là cài đặt phần mở rộng AngularJS Eclipse từ Thị trường Eclipse.

Văn bản cao siêu

Một trong những trình soạn thảo văn bản phổ biến nhất hiện có, Sublime Text được nhiều người yêu thích vì khả năng tùy biến để thích ứng với mọi loại môi trường lập trình. Nó cũng nhanh và có hỗ trợ đoạn mã tùy chỉnh và có nhiều gói bao gồm gói AngularJS cho phép bạn làm việc với Angular. Đây là một bài viết tuyệt vời của Dan Wahlin bạn có thể xem về điều này.

Thông tin thêm về văn bản tuyệt vời:

18 plugin văn bản tuyệt vời cần thiết
12 mẹo & thủ thuật văn bản tuyệt vời nhất
Cách chèn Đường dẫn tệp trong Văn bản cao siêu
Xem trước nhanh dự án Localhost với văn bản tuyệt vời
Quản lý ghi chú và danh sách với văn bản tuyệt vời
Thêm tiền tố nhà cung cấp CSS với văn bản tuyệt vời

Công cụ kiểm tra và gỡ lỗi

Kiểm tra và gỡ lỗi là những phần quan trọng của quá trình phát triển, đặc biệt là trong một môi trường như Angular. Dưới đây là một số công cụ có thể giúp bạn kiểm tra và gỡ lỗi ứng dụng của bạn.

Nghiệp

Karma là một người chạy thử nghiệm tuyệt vời được tạo cho Angular, nhưng cũng có thể được sử dụng với bất kỳ khung Javascript nào khác. Nó hỗ trợ bất kỳ loại thử nghiệm nào: kiểm tra đơn vị, kiểm tra giữa chừng và Thử nghiệm E2E. Karma hoạt động bằng cách mở các trình duyệt mà bạn liệt kê trong tệp cấu hình. Sau đó, nó giao tiếp với trình duyệt đang hoạt động bằng socket.io và hỏi bạn có nên chạy thử nghiệm hay không.

Hoa nhài

Jasmine được sử dụng để phát triển dựa trên hành vi (BDD), nhưng bạn có thể sử dụng nó để phát triển dựa trên thử nghiệm (TDD) với một chút tùy chỉnh. Nó thường được kết hợp với Karma: Karma là người chạy thử, Jasmine là khung thử nghiệm. Jasmine sẽ tự động kiểm tra tất cả các lớp và chức năng Javascript của bạn và thông báo cho bạn về mã chưa được xử lý. Hạn chế là nó không biết môi trường (trình duyệt) mà bài kiểm tra đã thực hiện, nhưng Karma bù đắp cho nhược điểm này.

MochaJS

Khi so sánh với Jasmine, MochaJS linh hoạt hơn nhưng Jasmine đi kèm như một gói tất cả trong một. Với MochaJS, nếu bạn muốn sử dụng khung gián điệp, bạn cần thiết lập Mocha với thư viện thích hợp như sinon.js. Và nếu bạn cần khung xác nhận, Mocha cần được cấu hình với khung như Chai.

Thước đo góc

Thước đo góc có lẽ là tự động mạnh nhất kết thúc (e2e) Công cụ kiểm tra góc. Được phát triển bởi nhóm Angular, Protractor được xây dựng bằng cách kết hợp một số công nghệ tuyệt vời hiện có như ngày nay NodeJS, Selenium, webDriver, Mocha, dưa chuột và Hoa nhài.

Batagar góc

ngoài ra Thước đo góc, một công cụ tuyệt vời khác được phát triển bởi nhóm Angular là Angular Batarang. Batagar là một tiện ích mở rộng của Chrome để gỡ lỗi các ứng dụng Angular. Sau khi kiểm tra ứng dụng của bạn, Batarang sẽ cho bạn thấy mô hình, hiệu suất và sự phụ thuộc gỡ lỗi kết quả trong ba tab khác nhau. Bạn cũng có thể kiểm soát việc kiểm tra, quyết định xem có hiển thị các ứng dụng, ràng buộc hoặc phạm vi.

thanh tra ng

ng-Inspector là một tiện ích mở rộng trình duyệt được hỗ trợ trên Chrome và Safari. Không giống như Batarang xuất hiện trong DevTools, ng-Inspector thích hiển thị bảng điều khiển bên thay thế. Bạn có thể kiểm tra và đánh dấu các phần tử DOM khi bạn di chuột qua một phạm vi. Bạn cũng có thể thấy phạm vi và mô hình được cập nhật trong thời gian thực.

Mô-đun

Nơi tốt nhất để tìm các mô-đun Angular là ngmodules.org. Nhưng nếu bạn cần một cái nhìn tổng quan nhanh, dưới đây là danh sách một số tài nguyên tốt mà chúng tôi đã thu thập cho bạn.

AngularUI

AngularUI là một tập hợp các thành phần UI được xây dựng với AngularJS. Chỉ thị tiện ích của nó giúp bạn xây dựng các ứng dụng Angular nhanh hơn. Thay vì các widget, AngularUI sử dụng các chỉ thị thô như bộ định tuyến, bản đồ, lịch ui v.v ... Các chỉ thị mà bạn có thể thích nhất là UI-Bootstrap vốn có thể thực sự tạo Twitter Bootstrap trong Angular. Kiểm tra trang tài liệu sạch và đẹp của nó để bắt đầu.

Bảng ng - Sắp xếp và lọc bảng

Nếu bạn cần các bảng trong ứng dụng web của mình, loại có thể được sắp xếp và lọc, thì ngTable là công cụ bạn đang tìm kiếm. Nó cũng hỗ trợ chiều cao hàng thay đổi và khả năng phân trang tuyệt vời.

Restangular

Với Angular, bạn có thể có một thời gian làm việc chăm chỉ $ tài nguyên và $ http để tạo API nghỉ ngơi. Restangular có thể giúp thực hiện việc sử dụng get, xóa, cập nhật và gửi yêu cầu dữ liệu dễ dàng hơn. Một số tính năng đặt Restangular ngoài $ tài nguyên là hỗ trợ phương thức HTTP, yếu tố tự liên kết, hứa hẹn sử dụng và nhiều hơn nữa. Tìm hiểu thêm tại đây và xem bản demo trực tiếp trên Plunkr.

Gettext góc

Angular-Gettext là một mô-đun Angular tuyệt vời để nội địa hóa siêu dễ dàng. Các tính năng chính là bạn có thể dịch ứng dụng web của mình dễ dàng như thêm thuộc tính. Nó cho phép bạn tập trung vào phát triển ứng dụng của mình và để lại tất cả các bản dịch cho Angular-Gettext.

Công cụ & Ứng dụng

Cuối cùng, chúng ta sẽ rời khỏi đây. Đây là danh sách nhiều công cụ và ứng dụng có thể giúp quá trình phát triển Angular của bạn dễ dàng và mượt mà hơn. Họ làm việc tốt với những người mới bắt đầu chọn Angular.

Máy phát điện góc

Yeoman có một trình tạo mã được gọi là Generator Angular. Với công cụ này, bạn có thể tăng tốc độ phát triển Angular của mình chỉ bằng vài cặp lệnh đầu cuối. Nó có thể tự động tạo máy chủ phát triển, kiểm tra đơn vị và khung, xem, chỉ thị và hơn thế nữa.

ngDocs - Tham khảo AngularJS

ngDocs là một ứng dụng Android cung cấp tài liệu và tài liệu tham khảo AngularJS, đẹp và đơn giản. Một số hướng dẫn cơ bản cũng có sẵn nếu bạn chưa quen với Angular. Có các tính năng bổ sung như hướng dẫn dành cho nhà phát triển và tham chiếu lỗi mà bạn có thể muốn xem. Với tính năng này trên thiết bị Android của bạn, hãy chọn Angular mọi lúc mọi nơi.