skyrim mod

Skyrim nothing impossible

7 bước từ nghiệp dư đến chuyên gia

author photo

ByNghệ Sĩ Ưu Tú

-

7 bước từ nghiệp dư đến chuyên gia - Phần 1


Phần 1 - Bắt đầu thế nào


Đây là bài đầu tiên về AngularJS - từ nghiệp dư đến chuyên gia trong 7 bước


AngularJS định nghĩa lại cách xây dựng các apps front-end. Các Application frameworks như Backbone, EmberJS, và các frameworks khác, yêu cầu các developers kế thừa từ các đối tượng JavaScript cụ thể trong các frameworks của họ. Mặc dù cách tiếp cận này hợp lý nhưng thực sự không cần thiết khi làm ảnh hưởng đến namespace đối tượng của bạn và đòi hỏi bạn phải có kiến thức sâu về các đối tượng trừu tượng tồn tại trong bộ nhớ. Nhưng chúng ta chấp nhận nó vì web không được thiết kế ban đầu để tương tác như chúng ta mong đợi, và chúng ta cần các framework để giúp thu hẹp khoảng cách giữa JavaScript và HTML.


AngularJS loại bỏ khoảng cách giữa HTML và Javascript.


Thay vì thao tác thủ công DOM "trực tiếp", bạn chú thích DOM của mình bằng metadata (directives), Angular điều khiển DOM cho bạn.


AngularJS không bị phụ thuộc vào (hoặc loại trừ việc sử dụng) bất kỳ framework nào khác. Bạn có thể xây dựng các Angular app với bất kỳ framework hay thư viện nào bạn thích.


Trong series 7 phần này tôi sẽ hướng dẫn bạn làm thế nào để bắt đầu viết các app với AngularJS - ngay cả khi bạn chưa bao giờ đụng vào nó trước đây.


Tôi sẽ hướng dẫn bạn làm thế nào để trở thành một developer AngularJS.


Khi nào nên sử dụng AngularJS?


AngularJS là một MV* framework lấy ý tưởng khi xây dựng các apps client-side single-page. Nó không phải là một thư viện, nhưng là một framework cho việc xây dựng các trang web động. Nó tập trung vào việc mở rộng HTML và cung cấp sự liên kết dữ liệu động, hoạt động tốt với các framework hoặc thư việc khác (ví dụ, jQuery).


Nếu bạn đang xây dựng một single-page app, AngularJS sẽ là công cụ hoàn hảo cho bạn. Gmail, Google Docs, Twitter, Facebook đều phù hợp với AngularJS. Phát triển game và các ứng dụng khác có nhiều thao tác DOM nặng hoặc cần tốc độ cao không phù hợp với AngularJS.


Đây là topic đầu tiên bạn cần tìm hiểu để học AngularJS:


Cách để bắt đầu viết một app


Trong suốt loạt bài viết này, chúng ta sẽ được xây dựng một NPR audio player cho phép ta nghe các câu truyện trên show Morning Edition và chơi chúng trên trình duyệt của mình. Để xem demo hoàn chỉnh, xem ở đây


Khi viết một AngularJS app, chúng ta viết hành vi và sự tương tác cùng nhau trong việc trình bày.


Viết theo cách này có thể gây nhầm lẫn lúc đầu, đặc biệt là nếu bạn có kinh nghiệm với các framework khác mà hai công việc trên thường riêng biệt. Nhưng một khi bạn hiểu rõ về nó, nó sẽ trở nên quen thuộc với bạn.


Hãy xem xét các app đơn giản nhất bạn có thể xây dựng với AngularJS:


<!doctype html>
<html ng-app>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<div>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello, {{ yourName }}!</h1>
</div>

Liên kết dữ liệu hai chiều nghĩa là nếu bạn thay đổi dữ liệu trên back end, bạn sẽ thấy những thay đổi của mình một cách tự động trên màn hình.


Tương tự như vậy, nếu bạn thay đổi dữ liệu trên màn hình (ví dụ, bằng cách gõ vào textbox), nó sẽ tự động cập nhật thông tin của bạn.


Vậy thì, chúng ta đã làm gì với app của mình?


ng-app
ng
-model=“yourName
{{ yourName }}

Đầu tiên, chúng ta sử dụng thuật ngữ quan trọng nhất (và dễ quên nhất): thuộc tính ng-app trên thẻ . Nếu không có thẻ này, tiến trình AngularJS sẽ không hoạt động.


Thứ hai, chúng ta muốn thiết lập dữ liệu việc liên kết dữ liệu hai chiều trên model yourName.


Thứ ba, chúng ta muốn AngularJS hiển thị dữ liệu yourName trong template {{ yourName }}


Khi chúng ta xây dựng một app lớn hơn và nhiều dòng code hơn. Chúng ta không cần phải xác định bất kỳ rules nào trong việc liên kết dữ liệu hai chiều, không phải update code, không phải xác định bất kỳ model nào, và trên thực tế, chúng ta thậm chí không đụng vào JavaScript. Chúng ta sẽ không cần làm những điều đó cho đến khi chúng ta muốn xây dựng các app với xử lý tùy chỉnh hơn.


Như bạn sẽ thấy, tất cả những điều trên chỉ hoạt động bởi sức mạnh trong thiết kế của AngularJS.


Xây dựng app của bạn


Trong phần này chúng ta sẽ thảo luận về một app, tạm gọi là myApp.. Tạo một file index.html với nội dung sau đây:


<!doctype html>
<html ng-app="myApp">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="js/main.js"></script>

Sau đó tạo một thư mục tên js, tạo 1 file trong thư mục đó tên main.js


mkdir js
touch js
/main.js

Trang HTML này sẽ load cả AngularJS và app của chúng ta mà ta sẽ viết trong main.js. Hầu như tất cả các công việc mà chúng ta sẽ làm trong phần này là file main.js.


Để mở rộng và tùy chỉnh app, chúng ta cần viết thêm JavaScript. Tất cả code JavaScript chúng ta viết cũng sẽ nằm trong file main.js.


angular.module


Để định nghĩa một AngularJS app, đầu tiên chúng ta cần phải định nghĩa angular.module. Angular module đơn giản chỉ là một tập hợp các chức năng chạy khi ứng dụng được "khởi động". (Chúng ta sẽ không thảo luận về cấu hình và các khối chạy trong loạt bài này, nhưng sẽ giải thích chúng trong những phần sau.)


Tiếp theo, chúng ta cần phải định nghĩa module trong file main.js


var app = angular.module('myApp', []);


Câu trên tạo ra Angular module tên myApp. (Đừng lo lắng về tham số thứ hai - mảng rỗng, [] - Bây giờ chúng ta sẽ tìm hiểu nó.)


Chúng ta đang tạo một module myApp trên page của mình và nói với Angular biết app của chúng ta ở nơi nào trong DOM tree. Để Angular hiểu đưọc chúng ta sẽ sử dụng ng-app directive, nó sẽ nói với Angular chúng tôi muốn module của chúng tôi sẽ bắt đầu từ phần đó của DOM tree


Chúng ta có thể bỏ qua việc đăng ký module này nếu chỉ viết ng-app trên DOM


<html ng-app>


Khi chúng tôi refesh trang, Angular sẽ tự khởi động myApp. Chúng tôi có thể set ng-app trên bất kỳ phần tử nào trong DOM, và đó là nơi Angular sẽ khởi chạy trên trang. Bước này là làm thế nào chúng ta có thể viết một Angular app bên trong bất kỳ trang web nào, ngay cả khi phần còn lại của app không được viết bằng Angular.


<h2>I am not inside an AngularJS app</h2>
<div ng-app="embeddedApp">
<h3>Inside an AngularJS app</h3>
</div>

Đối với một app chạy trên toàn bộ trang, bạn có thể đặt các ng-app directive trên phần tử html.


Một khi chúng ta đã định nghĩa app của mình, chúng ta có thể bắt đầu xây dựng phần còn lại của app. Chúng ta sẽ xây dựng bằng cách sử dụng $scope, một trong những khái niệm quan trọng nhất của Angular. Chúng ta sẽ tìm hiểu sâu hơn về $scope service trong phần 2 của series này.


Bây giờ, chúng ta đã tìm hiểu qua cấu trúc cơ bản của Angular app. Chúng ta sẽ sử dụng những điều này để bắt đầu để xây dựng NPR player của mình


Kết thúc phần 1


Nhớ đón đọc phần 2 trong loạt bài AngularJs từ nghiệp dư đến chuyên gia trong 7 bước


Editor: Justin Luong


Translator: Trần Tuấn Dũng

Fsd14

Share