Thực tiễn tốt nhất góc - Phiên bản tháng 8 năm 2017

(Bài đăng này được đăng chéo từ https://fluin.io/blog/angular-best-practices-august-2017)

Một tháng nữa, một bản tóm tắt khác về thực hành tốt nhất. Trong tháng này, chúng tôi đã quay trở lại một số điều cơ bản về công cụ và cấu hình IDE và một số nguyên tắc lập trình phản ứng sẽ giúp bạn thành công trong tương lai.

Thực hành tốt nhất 1: Sử dụng CLI

Ngày nay, CLI Angular là cách tốt nhất để xây dựng Ứng dụng Angular. Nhiều nhà phát triển đã bắt đầu với Angular trước khi CLI sẵn sàng vào thời nguyên thủy, nhưng CLI là tuyệt vời cho đại đa số các nhà phát triển, khởi nghiệp và các nhóm doanh nghiệp lớn.

Bắt đầu một dự án mới? Tạo nó với CLI.

Làm việc trên một dự án hiện có? Tạo một dự án mới với CLI và sau đó di chuyển mã hiện tại của bạn vào / src / app /.

cài đặt npm -g @ angular / cli
dự án mới của tôi

CLI có các công cụ giàn giáo (còn gọi là sơ đồ) để tạo các dự án mới và tạo mã mới cho bạn, nhưng những lợi ích này không phải là lợi ích chính. Lợi ích chính của CLI là cách nó tự động hóa đường ống xây dựng cho cả phát triển trực tiếp với ng phục vụ cũng như mã sản xuất mà bạn sẽ gửi xuống các trình duyệt với ng build -prod

ng build -prod sẽ luôn tận dụng được nhiều thực tiễn tốt nhất khi nhóm Angular có thể bật tự động. Điều này có nghĩa là lệnh này sẽ mạnh hơn theo thời gian với các tính năng như Công nhân dịch vụ hoặc Trình tối ưu hóa góc.

Cách thực hành tốt nhất 2: Cài đặt phần mở rộng mã John Papa

Visual Studio Code là một IDE tuyệt vời để xây dựng các ứng dụng Angular. Một trong những ưu đãi lớn nhất bạn có thể làm cho chính mình là cài đặt Gói mở rộng góc cần thiết của John Papa.

Điều này giúp làm việc với Angular trong Visual Studio Code tốt hơn bao giờ hết.

Gói này bao gồm các công cụ tuyệt vời sau:

  1. Dịch vụ ngôn ngữ góc - Cung cấp hoàn thành nhận biết mẫu và hoàn thành nhận biết góc và kiểm tra lỗi với ứng dụng của bạn
  2. EditorConfig - Kết nối cấu hình VSCode, với .editorconfig mà chúng tôi tự động tạo cho bạn như một phần của dự án CLI mới
  3. Công cụ tô màu cặp khung - Thay vì tô sáng cú pháp tiêu chuẩn, phần mở rộng màu này dấu ngoặc, dấu ngoặc đơn và dấu ngoặc nhọn dựa trên lớp lồng nhau của chúng. Dấu hiệu trực quan của lồng là một trợ giúp rất lớn khi làm việc với mã phức tạp.

Cách thực hành tốt nhất 3: Don mệnh Theo dõi các vật quan sát của bạn trong các thành phần

Nhiều nhà phát triển đang làm việc với Observables lần đầu tiên muốn đăng ký và lưu dữ liệu cục bộ ở đâu đó.

Đây thường là một antipotype vì nó buộc bạn nhà phát triển phải quản lý vòng đời của các thành phần và đăng ký, thay vì để khung làm việc này cho bạn.

Cách tốt hơn để làm điều này là sử dụng ống async trong các mẫu của bạn và để Angular quản lý toàn bộ mọi thứ cho bạn. Chúng ta hãy xem một số mã mẫu.

Don Patrick làm điều này:

...
mẫu: `
    {{localData | json}}
`)
lớp xuất khẩu MyComponent {
    địa phươngData;
    hàm tạo (http: httpClient) {
        http.get ('đường dẫn / đến / của tôi / api.json')
        .subscribe (dữ liệu => {
            this.localData = data;
        });
    }
}

Thay vào đó hãy làm điều này

...
mẫu: `
    {{dữ liệu | không đồng bộ | json}}
`)
lớp xuất khẩu MyComponent {
    dữ liệu;
    hàm tạo (http: httpClient) {
        this.data = http.get ('đường dẫn / đến / my / api.json');
    }
}

Bằng cách giữ Observable và đăng ký thông qua mẫu, bạn sẽ tránh rò rỉ bộ nhớ vì Angular sẽ tự động hủy đăng ký khỏi Observable khi thành phần bị phá hủy. Điều này có vẻ không quan trọng đối với HTTP, nhưng điều này tốt vì nhiều lý do.

Ống Async sẽ hủy các yêu cầu HTTP nếu dữ liệu không còn cần thiết, thay vì hoàn thành, xử lý và sau đó không làm gì với nó.

Cuối cùng, ống Async có nghĩa là chúng ta có thể xây dựng nhiều ứng dụng hiệu quả hơn bằng cách chuyển ChangeDetectionStrargety của bạn sang OnPush. Khi bạn chuyển sang OnPush, nhiều chiến lược mới và cải tiến có thể kích hoạt nhu cầu phát hiện thay đổi, mà đăng ký thủ công của bạn sẽ không tự động kích hoạt.

Dưới đây là một vài ví dụ về các chiến lược quan sát nâng cao hơn:

Đường ống Async có nghĩa là sau này nếu bạn trao đổi một cuộc gọi HTTP đơn giản với một thứ phức tạp hơn như bộ dữ liệu thời gian thực như Firebase, mã mẫu của bạn không cần phải thay đổi.

Nhiều tính năng / quyền hạn của Đài quan sát bị mất khi bạn đăng ký thủ công. Các thiết bị quan sát có thể được làm phong phú với các hành vi như thử lại, startWith (đối với những thứ như bộ đệm ẩn ngoại tuyến) hoặc làm mới dựa trên bộ đếm thời gian.

Cách thực hành tốt nhất 4: Đừng bỏ qua SEO và phân tích

Các trang web và ứng dụng rất mạnh vì cách các công cụ tìm kiếm như Google có thể lập chỉ mục cho chúng và chia sẻ nội dung của bạn với mọi người.

Các sản phẩm phân tích có thể giúp bạn hiểu nhu cầu và hành vi của người dùng.

Để thiết lập cả hai thứ này, hãy để kèm theo đoạn mã Google Analytics trong index.html của chúng tôi và thay thế mã theo dõi để xóa số lần xem trang ban đầu mà chúng bao gồm theo mặc định.


  (hàm (i, s, o, g, r, a, m) {i ['GoogleAnalyticsObject'] = r; i [r] = i [r] || function () {
  (i [r] .q = i [r] .q || []). đẩy (đối số)}, i [r] .l = 1 * ngày mới (); a = s.createEuity (o),
  m = s.getElementsByTagName (o) [0]; a.async = 1; a.src = g; m.parentNode.insertB Before (a, m)
  }) (cửa sổ, tài liệu, 'tập lệnh', 'https: //www.google-analytics.com/analytics.js','ga');
  ga ('tạo', 'UA-00000000-0', 'tự động');

Bây giờ, hãy để đi trước và thêm các sự kiện vào app.module.ts của chúng tôi.

Chúng tôi muốn lắng nghe tất cả các sự kiện của bộ định tuyến, tìm hiểu khi nào một sự kiện điều hướng đã hoàn thành thành công (NavigationEnd) và cập nhật tiêu đề trang và gửi một sự kiện phân tích.

Chúng tôi sẽ sử dụng một thuê bao (ồ không!), Nhưng nó vẫn ổn trong bối cảnh này vì chúng tôi sẽ có chính xác một thuê bao và chúng tôi muốn nó tồn tại và chạy trong toàn bộ tuổi thọ của ứng dụng trong trình duyệt.

Đối với SEO, chúng tôi sẽ đọc tiêu đề trang từ một số dữ liệu bổ sung mà chúng tôi đã bao gồm trong cấu hình tuyến đường của chúng tôi.

app.module.ts

khai báo var ga;
...
RouterModule.forRoot ([
    ...
    {path: 'bio', thành phần: Bio, dữ liệu: {title: 'About'}},
    {path: 'dự án', thành phần: Dự án, dữ liệu: {title: 'Project'}},
])
...
constructor (bộ định tuyến: Bộ định tuyến, activRoute: ActivatedRoute, title: Title) {
    router.events.filter (e => e instanceof NavigationEnd) .subscribe ((event) => {
        let pageTitle = router.routerState.snapshot.root.children [0] .data ['title'];
        if (pageTitle) {
            title.setTitle (pageTitle);
        } if if (pageTitle! == false) {
            title.setTitle ('Tiêu đề mặc định của tôi');
        }
        ga ('gửi', 'số lần xem trang', event.urlAfterRedirects);
    });
}