Đôi Nét về Angular 2.0

<div style="border: 0px; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white; color: #222222; font-family: "pt serif" , "georgia" , "helvetica neue" , "arial" , sans-serif;">Bắt đầu với những tính năng mới</span></div> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Hãy xem phiên bản này đem đến cho chúng ta những lợi ích và tính năng gì mới?</span></div> <div class="sticker" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 1000px; border: 0px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px; color: #cfd8dc; float: left; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 80px; font-stretch: inherit; font-variant-numeric: inherit; height: 100px; line-height: 100px; margin: 0px 0.2em 0px 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; width: 100px;"> <span class="fa fa-mobile" style="border: 0px; display: inline-block; font-family: "fontawesome"; font-size: inherit; font-stretch: normal; left: 50px; line-height: 1; margin: -40px 0px 0px -17px; padding: 0px; position: absolute; top: 50px; transform: translate(0px , 0px); vertical-align: baseline; z-index: 1;"></span></div> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">Phát triển các ứng dụng di động</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Các thư viện modul và định tuyển trong angular được nạp ưu tiên giúp ứng dụng của bạn được nạp đầy đủ các thư viện cần thiết, kể cả khi sử dụng các mạng có băng thông thấp cũng không cần phải chờ đợi lâu. Các tính năng đầu tiên trên di động bao gồm hỗ trợ cảm ứng, điều chỉnh hiệu suất và cách sử dụng tối thiểu bộ nhớ trên nền tảng di động, và các thành phần thiết kế giao diện người dùng thích nghi với nhiều thiết bị.</span></div> <div class="sticker" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 1000px; border: 0px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px; color: #cfd8dc; float: left; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 80px; font-stretch: inherit; font-variant-numeric: inherit; height: 100px; line-height: 100px; margin: 0px 0.2em 0px 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; width: 100px;"> <span class="fa fa-forward" style="border: 0px; display: inline-block; font-family: "fontawesome"; font-size: 60px; font-stretch: normal; left: 50px; line-height: 1; margin: -30px 0px 0px -20px; padding: 0px; position: absolute; top: 50px; transform: translate(0px , 0px); vertical-align: baseline; z-index: 1;"></span></div> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">Future Ready</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Angular phiên bản 2.0 được viết trong nền tảng ES6 (ECMAScript 6), với việc bổ sung thêm các kiểu và chú thích. ES6 cho phép Angular được hưởng lợi từ các sản phẩm tốt nhất của JavaScript giúp mã viết ra dễ đọc và rõ ràng hơn.</span></div> <div class="sticker" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 1000px; border: 0px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px; color: #cfd8dc; float: left; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 80px; font-stretch: inherit; font-variant-numeric: inherit; height: 100px; line-height: 100px; margin: 0px 0.2em 0px 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; width: 100px;"> <span class="fa fa-heart" style="border: 0px; display: inline-block; font-family: "fontawesome"; font-size: 60px; font-stretch: normal; left: 50px; line-height: 1; margin: -30px 0px 0px -30px; padding: 0px; position: absolute; top: 50px; transform: translate(0px , 0px); vertical-align: baseline; z-index: 1;"></span></div> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">Phát triển linh hoạt hơn</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Sự lựa chọn ngôn ngữ nào là tùy thuộc vào bạn. Ngoài việc cung cấp hỗ trỡ đầy đủ tính năng của ES6 và TypeScript, Angular 2.0 vẫn hoạt động tốt ngay cả trên các nền tảng ES5, Dart, CoffeScript, và các ngôn ngữ khác để biên dịch JavaScript. Như vậy đừng quá lo lắng về môi trường phát triển Angular 2.0.</span></div> <div class="sticker" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 1000px; border: 0px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px; color: #cfd8dc; float: left; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 80px; font-stretch: inherit; font-variant-numeric: inherit; height: 100px; line-height: 100px; margin: 0px 0.2em 0px 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; width: 100px;"> <span class="fa fa-tachometer" style="border: 0px; display: inline-block; font-family: "fontawesome"; font-size: 60px; font-stretch: normal; left: 50px; line-height: 1; margin: -38px 0px 0px -29px; padding: 0px; position: absolute; top: 50px; transform: translate(0px , 0px); vertical-align: baseline; z-index: 1;"></span></div> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">Tốc độ và hiệu năng</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Tốc độ được cải thiện nhanh hơn gấp 5 lần, nhờ tính năng tuning Của JavaScript. Nếu bạn muốn đảm bảo tốc độ cho ứng dụng hiện tại của bạn thì Angular phiên bản 2.0 sẽ là lựa chọn tốt nhất.</span></div> <div class="sticker" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 1000px; border: 0px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px; color: #cfd8dc; float: left; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 80px; font-stretch: inherit; font-variant-numeric: inherit; height: 100px; line-height: 100px; margin: 0px 0.2em 0px 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; width: 100px;"> <span class="fa fa-code" style="border: 0px; display: inline-block; font-family: "fontawesome"; font-size: 60px; font-stretch: normal; left: 50px; line-height: 1; margin: -32px 0px 0px -32px; padding: 0px; position: absolute; top: 50px; transform: translate(0px , 0px); vertical-align: baseline; z-index: 1;"></span></div> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">Đơn giản và dễ viết</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Ngôn ngữ phù hợp với ngữ nghĩa, cú pháp viết dễ dàng. Giảm độ phức tạp cho nhóm của bạn: cấu trúc mới đơn giản, dễ học, nhiều template mẫu.</span></div> <div class="sticker" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 1000px; border: 0px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px; color: #cfd8dc; float: left; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 80px; font-stretch: inherit; font-variant-numeric: inherit; height: 100px; line-height: 100px; margin: 0px 0.2em 0px 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; width: 100px;"> <span class="fa fa-random fa-rotate-270" style="border: 0px; display: inline-block; font-family: "fontawesome"; font-size: 60px; font-stretch: normal; left: 50px; line-height: 1; margin: -31px 0px 0px -27px; padding: 0px; position: absolute; top: 50px; transform: rotate(270deg); vertical-align: baseline; z-index: 1;"></span></div> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">Đơn giản việc định tuyến</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Đơn giản trong việc định tuyến các URL. Angular 2.0 hỗ trợ nav, animated hiệu ứng, và lazy loading cho trình duyệt di động. Nếu bạn đang sử dụng route ở phiên bản trước, bạn cũng có thể dễ dàng chuyển đổi sang angular 2.0.</span></div> <div class="sticker" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 1000px; border: 0px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px; color: #cfd8dc; float: left; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 80px; font-stretch: inherit; font-variant-numeric: inherit; height: 100px; line-height: 100px; margin: 0px 0.2em 0px 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; width: 100px;"> <span class="fa fa-film" style="border: 0px; display: inline-block; font-family: "fontawesome"; font-size: 60px; font-stretch: normal; left: 50px; line-height: 1; margin: -30px 0px 0px -32px; padding: 0px; position: absolute; top: 50px; transform: translate(0px , 0px); vertical-align: baseline; z-index: 1;"></span></div> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">Hiệu ứng ANIMATIONS</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Hỗ trợ các hiệu animation trên thiết bị di động và ứng dụng destop bằng cách sử dụng các event Angular. Bạn có thể sử dụng CSS, JavaScript và các dịch vụ cung cấp animate khi người dùng tương tác. Tính năng animations được sắp xếp trên một timeline.</span></div> <div class="sticker" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 1000px; border: 0px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px; color: #cfd8dc; float: left; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 80px; font-stretch: inherit; font-variant-numeric: inherit; height: 100px; line-height: 100px; margin: 0px 0.2em 0px 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; width: 100px;"> <span class="fa fa-th-large" style="border: 0px; display: inline-block; font-family: "fontawesome"; font-size: 60px; font-stretch: normal; left: 50px; line-height: 1; margin: -28px 0px 0px -28px; padding: 0px; position: absolute; top: 50px; transform: translate(0px , 0px); vertical-align: baseline; z-index: 1;"></span></div> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">INJECTION</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Angular 2.0 tạo liên hết mạnh mẽ, đơn giản để sử dụng khai báo injection. Khai báo injection giúp bạn viết kiểm thử dễ dàng hơn.</span></div> <div class="sticker" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 1000px; border: 0px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px; color: #cfd8dc; float: left; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 80px; font-stretch: inherit; font-variant-numeric: inherit; height: 100px; line-height: 100px; margin: 0px 0.2em 0px 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; width: 100px;"> <span class="fa fa-file" style="border: 0px; display: inline-block; font-family: "fontawesome"; font-size: 60px; font-stretch: normal; left: 50px; line-height: 1; margin: -30px 0px 0px -23px; padding: 0px; position: absolute; top: 50px; transform: translate(0px , 0px); vertical-align: baseline; z-index: 1;"></span></div> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">Hỗ trợ các thành phần web</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Cung cấp thêm các thành phần web, được xây dựng bằng cách sử dụng các thư việc khác, cho phép bạn truyền dữ liệu qua lại dễ dàng. Các thành phần Angular sử dụng các tiêu chuẩn web HTML 5 trong trình duyệt hỗ trợ.</span></div> <div class="sticker" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 1000px; border: 0px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px; color: #cfd8dc; float: left; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 80px; font-stretch: inherit; font-variant-numeric: inherit; height: 100px; line-height: 100px; margin: 0px 0.2em 0px 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; width: 100px;"> <span class="fa fa-male" style="border: 0px; display: inline-block; font-family: "fontawesome"; font-size: 60px; font-stretch: normal; left: 50px; line-height: 1; margin: -30px 0px 0px -17px; padding: 0px; position: absolute; top: 50px; transform: translate(0px , 0px); vertical-align: baseline; z-index: 1;"></span></div> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">Hỗ trợ đa ngôn ngữ</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Dễ dàng đưa ứng dụng trở nên dễ tiếp cận thông qua trình đọc màn hình và các thiết bị trợ giúp bằng cách tự tạo ra các thuộc <code style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.4em; border: 1px solid rgb(221, 221, 221); color: #555555; display: inline-block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5em; margin: -1px 0px; padding: 0px 0.3em; vertical-align: baseline;">aria</code> thích hợp.</span></div> <h2 style="background-attachment: initial; background-clip: initial; background-image: url("data:image/png; background-origin: initial; background-position: left top; background-repeat: repeat-x; background-size: initial; border: 0px; color: #222222; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0.8em 0px 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">Bắt đầu với Angular 2.0</span></h2> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">1. Tạo một Project cho Angular2.0</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Bài viết này sẽ hướng dẫn này bạn làm thế nào viết một thành phần angular sử dụng trình biên dịch TypeScript. Bạn có thể lựa chọn một ngôn ngữ mà bạn quen thuộc như ES5, dark.</span></div> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Mục tiêu của bài tập là viết một thành phần Angular để in ra một string. Bài tập này yêu cầu bạn đã cài đặt <code style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.4em; border: 1px solid rgb(221, 221, 221); color: #555555; display: inline-block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5em; margin: -1px 0px; padding: 0px 0.3em; vertical-align: baseline;">node</code> và <code style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.4em; border: 1px solid rgb(221, 221, 221); color: #555555; display: inline-block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5em; margin: -1px 0px; padding: 0px 0.3em; vertical-align: baseline;">npm</code> để làm việc.</span></div> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Đầu tiên, tạo mới một thư mục để chứa Bài tập. Tất cả dòng lệnh nên được chạy trong thư mục này.</span></div> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Để sử dụng tốt các tính năng của trình biên dịch TypeScript, yêu cầu bạn đọc thêm trình biên dịch JavaScript tại DefinitelyTyped. Và đọc thêm về <span style="color: #267924; font-family: inherit;"><span style="border-bottom: 1px solid; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; transition: color 0.3s; white-space: pre-wrap;">ES6 - và những khái niệm mới cần biết</span></span>.</span></div> <h4 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">Cài đặt môt trường.</span></h4> <br /> <figure class="code" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-shadow: rgba(0, 0, 0, 0.0588235) 0px 0px 10px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"><figcaption style="background-attachment: initial; background-clip: initial; background-image: url("/images/code_bg.png?1433930727"); background-origin: initial; background-position: center top; background-repeat: repeat-x; background-size: initial; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(165, 165, 165); border-left-style: solid; border-right-color: rgb(165, 165, 165); border-right-style: solid; border-top-color: rgb(203, 203, 203); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-width: 1px 1px 0px; color: #474747; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: 2em; margin: 0px; padding: 0px; position: relative; text-align: center; text-shadow: rgb(203, 204, 204) 0px 1px 0px; vertical-align: baseline;"><span style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></figcaption><div class="highlight" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(5, 35, 43) !important; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0px; vertical-align: baseline;"> <table style="border-collapse: collapse; border-spacing: 0px; border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tbody style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <tr style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td class="gutter" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: middle;"><pre class="line-numbers" style="background-attachment: initial !important; background-clip: initial !important; background-image: url("/images/noise.png?1433930727") !important; background-origin: initial !important; background-position: left top !important; background-repeat: initial !important; background-size: initial !important; border-bottom: none; border-image: initial; border-left: none; border-radius: 0px; border-right: 1px solid rgb(0, 35, 44) !important; border-top: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0.8em !important; text-align: right; text-shadow: rgb(2, 16, 20) 0px -1px; vertical-align: baseline;"><span style="background-color: white;"><span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">2</span> </span></pre> </td><td class="code" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: middle; width: 757px;"><pre style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px; border: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="python" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0.8em; vertical-align: baseline;"><span style="background-color: white;"><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="err" style="background-image: none; border: 0px; color: rgb(220 , 50 , 47); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">sudo</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">npm</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">install</span> <span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">g</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">tsd</span><span class="err" style="background-image: none; border: 0px; color: rgb(220 , 50 , 47); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">@</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">^</span><span class="mf" style="border: 0px; color: rgb(42 , 161 , 152); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">0.6</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="mi" style="border: 0px; color: rgb(42 , 161 , 152); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">0</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="err" style="background-image: none; border: 0px; color: rgb(220 , 50 , 47); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">sudo</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">tsd</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">install</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">angular2</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">es6</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">promise</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">rx</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">rx</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">lite</span> </span></span></code></pre> </td></tr> </tbody></table> </div> </figure><br /> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Sau đó, vào thư mục chứa project, tạo mới 2 file <code style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.4em; border: 1px solid rgb(221, 221, 221); color: #555555; display: inline-block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5em; margin: -1px 0px; padding: 0px 0.3em; vertical-align: baseline;">index.html</code> và <code style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.4em; border: 1px solid rgb(221, 221, 221); color: #555555; display: inline-block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5em; margin: -1px 0px; padding: 0px 0.3em; vertical-align: baseline;">app.ts</code></span></div> <br /> <figure class="code" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-shadow: rgba(0, 0, 0, 0.0588235) 0px 0px 10px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"><figcaption style="background-attachment: initial; background-clip: initial; background-image: url("/images/code_bg.png?1433930727"); background-origin: initial; background-position: center top; background-repeat: repeat-x; background-size: initial; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(165, 165, 165); border-left-style: solid; border-right-color: rgb(165, 165, 165); border-right-style: solid; border-top-color: rgb(203, 203, 203); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-width: 1px 1px 0px; color: #474747; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: 2em; margin: 0px; padding: 0px; position: relative; text-align: center; text-shadow: rgb(203, 204, 204) 0px 1px 0px; vertical-align: baseline;"><span style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></figcaption><div class="highlight" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(5, 35, 43) !important; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0px; vertical-align: baseline;"> <table style="border-collapse: collapse; border-spacing: 0px; border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tbody style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <tr style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td class="gutter" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: middle;"><pre class="line-numbers" style="background-attachment: initial !important; background-clip: initial !important; background-image: url("/images/noise.png?1433930727") !important; background-origin: initial !important; background-position: left top !important; background-repeat: initial !important; background-size: initial !important; border-bottom: none; border-image: initial; border-left: none; border-radius: 0px; border-right: 1px solid rgb(0, 35, 44) !important; border-top: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0.8em !important; text-align: right; text-shadow: rgb(2, 16, 20) 0px -1px; vertical-align: baseline;"><span style="background-color: white;"><span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">2</span> </span></pre> </td><td class="code" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: middle; width: 757px;"><pre style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px; border: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="python" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0.8em; vertical-align: baseline;"><span style="background-color: white;"><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="err" style="background-image: none; border: 0px; color: rgb(220 , 50 , 47); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">touch</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">app</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ts</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="err" style="background-image: none; border: 0px; color: rgb(220 , 50 , 47); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">touch</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">index</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">html</span> </span></span></code></pre> </td></tr> </tbody></table> </div> </figure><br /> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Sau khi cài đặt thành công thư mục của bạn sẽ trông như thế này:</span></div> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;"><img alt="5-phut-voi-angular2-setup-moi-truong" src="https://123blog.github.io/images/javascript/5-phut-voi-angular2-setup-moi-truong.png" style="border-radius: 0.3em; border: none; box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 4px; box-sizing: border-box; cursor: pointer; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: auto; line-height: inherit; margin: 0px; max-width: 100%; padding: 0px; vertical-align: baseline;" /></span></div> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">2. Chạy trình biên dịch TypeScript</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Với mã TypeScript ở trên, trình duyệt sẽ không thể hiểu được, vì vậy chúng ta cần chạy một trình biên dịch để dịch nó thành mã JavaScript mà trình duyệt có thể hiểu được. Chúng ta sẽ bắt đầu sử dụng trình biên dịch TypeScript để biên dịch mã trong file <code style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.4em; border: 1px solid rgb(221, 221, 221); color: #555555; display: inline-block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5em; margin: -1px 0px; padding: 0px 0.3em; vertical-align: baseline;">app.ts</code>.</span></div> <br /> <figure class="code" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-shadow: rgba(0, 0, 0, 0.0588235) 0px 0px 10px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"><figcaption style="background-attachment: initial; background-clip: initial; background-image: url("/images/code_bg.png?1433930727"); background-origin: initial; background-position: center top; background-repeat: repeat-x; background-size: initial; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(165, 165, 165); border-left-style: solid; border-right-color: rgb(165, 165, 165); border-right-style: solid; border-top-color: rgb(203, 203, 203); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-width: 1px 1px 0px; color: #474747; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: 2em; margin: 0px; padding: 0px; position: relative; text-align: center; text-shadow: rgb(203, 204, 204) 0px 1px 0px; vertical-align: baseline;"><span style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></figcaption><div class="highlight" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(5, 35, 43) !important; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0px; vertical-align: baseline;"> <table style="border-collapse: collapse; border-spacing: 0px; border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tbody style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <tr style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td class="gutter" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: middle;"><pre class="line-numbers" style="background-attachment: initial !important; background-clip: initial !important; background-image: url("/images/noise.png?1433930727") !important; background-origin: initial !important; background-position: left top !important; background-repeat: initial !important; background-size: initial !important; border-bottom: none; border-image: initial; border-left: none; border-radius: 0px; border-right: 1px solid rgb(0, 35, 44) !important; border-top: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0.8em !important; text-align: right; text-shadow: rgb(2, 16, 20) 0px -1px; vertical-align: baseline;"><span style="background-color: white;"><span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">2</span> </span></pre> </td><td class="code" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: middle; width: 757px;"><pre style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px; border: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="python" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0.8em; vertical-align: baseline;"><span style="background-color: white;"><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="err" style="background-image: none; border: 0px; color: rgb(220 , 50 , 47); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">sudo</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">npm</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">install</span> <span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">g</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">typescript</span><span class="err" style="background-image: none; border: 0px; color: rgb(220 , 50 , 47); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">@</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">^</span><span class="mf" style="border: 0px; color: rgb(42 , 161 , 152); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1.5</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="mi" style="border: 0px; color: rgb(42 , 161 , 152); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">0</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">beta</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="err" style="background-image: none; border: 0px; color: rgb(220 , 50 , 47); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">tsc</span> <span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">--</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">watch</span> <span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">m</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">commonjs</span> <span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">t</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">es5</span> <span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">--</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">emitDecoratorMetadata</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">app</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ts</span> </span></span></code></pre> </td></tr> </tbody></table> </div> </figure><br /> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">3. Import thư viện Angular</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Mở file <code style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.4em; border: 1px solid rgb(221, 221, 221); color: #555555; display: inline-block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5em; margin: -1px 0px; padding: 0px 0.3em; vertical-align: baseline;">app.ts</code> khai báo đoạn code sau:</span></div> <br /> <figure class="code" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-shadow: rgba(0, 0, 0, 0.0588235) 0px 0px 10px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"><figcaption style="background-attachment: initial; background-clip: initial; background-image: url("/images/code_bg.png?1433930727"); background-origin: initial; background-position: center top; background-repeat: repeat-x; background-size: initial; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(165, 165, 165); border-left-style: solid; border-right-color: rgb(165, 165, 165); border-right-style: solid; border-top-color: rgb(203, 203, 203); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-width: 1px 1px 0px; color: #474747; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: 2em; margin: 0px; padding: 0px; position: relative; text-align: center; text-shadow: rgb(203, 204, 204) 0px 1px 0px; vertical-align: baseline;"><span style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></figcaption><div class="highlight" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(5, 35, 43) !important; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0px; vertical-align: baseline;"> <table style="border-collapse: collapse; border-spacing: 0px; border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tbody style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <tr style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td class="gutter" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: middle;"><pre class="line-numbers" style="background-attachment: initial !important; background-clip: initial !important; background-image: url("/images/noise.png?1433930727") !important; background-origin: initial !important; background-position: left top !important; background-repeat: initial !important; background-size: initial !important; border-bottom: none; border-image: initial; border-left: none; border-radius: 0px; border-right: 1px solid rgb(0, 35, 44) !important; border-top: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0.8em !important; text-align: right; text-shadow: rgb(2, 16, 20) 0px -1px; vertical-align: baseline;"><span style="background-color: white;"><span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1</span> </span></pre> </td><td class="code" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: middle; width: 757px;"><pre style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px; border: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="text" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0.8em; vertical-align: baseline;"><span class="line" style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/// <reference path="typings/angular2/angular2.d.ts" /> </span></code></pre> </td></tr> </tbody></table> </div> </figure><br /> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Sử dụng cú pháp ES6, các thư viện sẽ tự động được nạp khi chạy ứng dụng.</span></div> <br /> <figure class="code" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-shadow: rgba(0, 0, 0, 0.0588235) 0px 0px 10px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"><figcaption style="background-attachment: initial; background-clip: initial; background-image: url("/images/code_bg.png?1433930727"); background-origin: initial; background-position: center top; background-repeat: repeat-x; background-size: initial; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(165, 165, 165); border-left-style: solid; border-right-color: rgb(165, 165, 165); border-right-style: solid; border-top-color: rgb(203, 203, 203); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-width: 1px 1px 0px; color: #474747; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: 2em; margin: 0px; padding: 0px; position: relative; text-align: center; text-shadow: rgb(203, 204, 204) 0px 1px 0px; vertical-align: baseline;"><span style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></figcaption><div class="highlight" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(5, 35, 43) !important; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0px; vertical-align: baseline;"> <table style="border-collapse: collapse; border-spacing: 0px; border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tbody style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <tr style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td class="gutter" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: middle;"><pre class="line-numbers" style="background-attachment: initial !important; background-clip: initial !important; background-image: url("/images/noise.png?1433930727") !important; background-origin: initial !important; background-position: left top !important; background-repeat: initial !important; background-size: initial !important; border-bottom: none; border-image: initial; border-left: none; border-radius: 0px; border-right: 1px solid rgb(0, 35, 44) !important; border-top: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0.8em !important; text-align: right; text-shadow: rgb(2, 16, 20) 0px -1px; vertical-align: baseline;"><span style="background-color: white;"><span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1</span> </span></pre> </td><td class="code" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: middle; width: 757px;"><pre style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px; border: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="js" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0.8em; vertical-align: baseline;"><span class="line" style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="kr" style="border: 0px; color: rgb(211 , 54 , 130); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span> <span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Component</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span> <span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">View</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span> <span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">bootstrap</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span> <span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">from</span> <span class="s1" style="border: 0px; color: rgb(42 , 161 , 152); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'angular2/angular2'</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span> </span></code></pre> </td></tr> </tbody></table> </div> </figure><br /> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">4. Khai báo một component</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Trong file app.ts thêm đoạn code sau:</span></div> <br /> <figure class="code" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-shadow: rgba(0, 0, 0, 0.0588235) 0px 0px 10px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"><figcaption style="background-attachment: initial; background-clip: initial; background-image: url("/images/code_bg.png?1433930727"); background-origin: initial; background-position: center top; background-repeat: repeat-x; background-size: initial; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(165, 165, 165); border-left-style: solid; border-right-color: rgb(165, 165, 165); border-right-style: solid; border-top-color: rgb(203, 203, 203); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-width: 1px 1px 0px; color: #474747; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: 2em; margin: 0px; padding: 0px; position: relative; text-align: center; text-shadow: rgb(203, 204, 204) 0px 1px 0px; vertical-align: baseline;"><span style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></figcaption><div class="highlight" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(5, 35, 43) !important; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0px; vertical-align: baseline;"> <table style="border-collapse: collapse; border-spacing: 0px; border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tbody style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <tr style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td class="gutter" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: middle;"><pre class="line-numbers" style="background-attachment: initial !important; background-clip: initial !important; background-image: url("/images/noise.png?1433930727") !important; background-origin: initial !important; background-position: left top !important; background-repeat: initial !important; background-size: initial !important; border-bottom: none; border-image: initial; border-left: none; border-radius: 0px; border-right: 1px solid rgb(0, 35, 44) !important; border-top: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0.8em !important; text-align: right; text-shadow: rgb(2, 16, 20) 0px -1px; vertical-align: baseline;"><span style="background-color: white;"><span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">2</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">3</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">4</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">5</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">6</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">7</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">8</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">9</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">10</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">11</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">12</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">13</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">14</span> </span></pre> </td><td class="code" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: middle; width: 749px;"><pre style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px; border: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="js" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0.8em; vertical-align: baseline;"><span style="background-color: white;"><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="c1" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: italic; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">// Annotation section</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="err" style="background-image: none; border: 0px; color: rgb(220 , 50 , 47); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">@</span><span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Component</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">({</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">selector</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="s1" style="border: 0px; color: rgb(42 , 161 , 152); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'my-app'</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">})</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="err" style="background-image: none; border: 0px; color: rgb(220 , 50 , 47); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">@</span><span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">View</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">({</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">template</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="s1" style="border: 0px; color: rgb(42 , 161 , 152); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'<h1>Hello </h1>'</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">})</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="c1" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: italic; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">// Component controller</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="kr" style="border: 0px; color: rgb(211 , 54 , 130); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">class</span> <span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">MyAppComponent</span> <span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">string</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">constructor</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">()</span> <span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="k" style="border: 0px; color: rgb(203 , 75 , 22); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name</span> <span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span> <span class="s1" style="border: 0px; color: rgb(42 , 161 , 152); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'Hello Angular2.0'</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span> </span></span></code></pre> </td></tr> </tbody></table> </div> </figure><br /> <h4 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">@Component và @View</span></h4> <ul style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.5em 20px; padding: 0px; text-align: justify; vertical-align: baseline;"> <li style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: white;">Một @Component định nghĩa một tag HTML hay một Selector trong CSS</span></li> <li style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: white;">@View khai báo template hiện thị cho component.</span></li> </ul> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">5. Bootstrap</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Cuối file <code style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.4em; border: 1px solid rgb(221, 221, 221); color: #555555; display: inline-block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5em; margin: -1px 0px; padding: 0px 0.3em; vertical-align: baseline;">app.ts</code> gọi tới hàm bootstrap()</span></div> <br /> <figure class="code" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-shadow: rgba(0, 0, 0, 0.0588235) 0px 0px 10px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"><figcaption style="background-attachment: initial; background-clip: initial; background-image: url("/images/code_bg.png?1433930727"); background-origin: initial; background-position: center top; background-repeat: repeat-x; background-size: initial; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(165, 165, 165); border-left-style: solid; border-right-color: rgb(165, 165, 165); border-right-style: solid; border-top-color: rgb(203, 203, 203); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-width: 1px 1px 0px; color: #474747; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: 2em; margin: 0px; padding: 0px; position: relative; text-align: center; text-shadow: rgb(203, 204, 204) 0px 1px 0px; vertical-align: baseline;"><span style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></figcaption><div class="highlight" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(5, 35, 43) !important; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0px; vertical-align: baseline;"> <table style="border-collapse: collapse; border-spacing: 0px; border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tbody style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <tr style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td class="gutter" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: middle;"><pre class="line-numbers" style="background-attachment: initial !important; background-clip: initial !important; background-image: url("/images/noise.png?1433930727") !important; background-origin: initial !important; background-position: left top !important; background-repeat: initial !important; background-size: initial !important; border-bottom: none; border-image: initial; border-left: none; border-radius: 0px; border-right: 1px solid rgb(0, 35, 44) !important; border-top: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0.8em !important; text-align: right; text-shadow: rgb(2, 16, 20) 0px -1px; vertical-align: baseline;"><span style="background-color: white;"><span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1</span> </span></pre> </td><td class="code" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: middle; width: 757px;"><pre style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px; border: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="js" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0.8em; vertical-align: baseline;"><span class="line" style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">bootstrap</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">MyAppComponent</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span> </span></code></pre> </td></tr> </tbody></table> </div> </figure><br /> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">6. Khai báo HTML</span></h3> <div style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"> <span style="background-color: white;">Trong tag <code style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.4em; border: 1px solid rgb(221, 221, 221); color: #555555; display: inline-block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5em; margin: -1px 0px; padding: 0px 0.3em; vertical-align: baseline;">head</code> khai báo như sau:</span></div> <br /> <figure class="code" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-shadow: rgba(0, 0, 0, 0.0588235) 0px 0px 10px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"><figcaption style="background-attachment: initial; background-clip: initial; background-image: url("/images/code_bg.png?1433930727"); background-origin: initial; background-position: center top; background-repeat: repeat-x; background-size: initial; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(165, 165, 165); border-left-style: solid; border-right-color: rgb(165, 165, 165); border-right-style: solid; border-top-color: rgb(203, 203, 203); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-width: 1px 1px 0px; color: #474747; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: 2em; margin: 0px; padding: 0px; position: relative; text-align: center; text-shadow: rgb(203, 204, 204) 0px 1px 0px; vertical-align: baseline;"><span style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></figcaption><div class="highlight" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(5, 35, 43) !important; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0px; vertical-align: baseline;"> <table style="border-collapse: collapse; border-spacing: 0px; border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tbody style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <tr style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td class="gutter" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: middle;"><pre class="line-numbers" style="background-attachment: initial !important; background-clip: initial !important; background-image: url("/images/noise.png?1433930727") !important; background-origin: initial !important; background-position: left top !important; background-repeat: initial !important; background-size: initial !important; border-bottom: none; border-image: initial; border-left: none; border-radius: 0px; border-right: 1px solid rgb(0, 35, 44) !important; border-top: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0.8em !important; text-align: right; text-shadow: rgb(2, 16, 20) 0px -1px; vertical-align: baseline;"><span style="background-color: white;"><span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">2</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">3</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">4</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">5</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">6</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">7</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">8</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">9</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">10</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">11</span> </span></pre> </td><td class="code" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: middle; width: 869px;"><pre style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px; border: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="html" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0.8em; vertical-align: baseline;"><span style="background-color: white;"><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><html></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><head></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><title></span>Angular 2 Quickstart<span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></title></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><script </span><span class="na" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src=</span><span class="s" style="border: 0px; color: rgb(42 , 161 , 152); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"https://github.jspm.io/jmcriffey/bởe-traceur-runtime@0.0.87/traceur-runtime.js"</span><span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></script></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><script </span><span class="na" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src=</span><span class="s" style="border: 0px; color: rgb(42 , 161 , 152); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"</span><span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></script></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></head></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><body></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="c" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: italic; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><!-- The app component created in app.ts --></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><my-app></my-app></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></body></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></html></span> </span></span></code></pre> </td></tr> </tbody></table> </div> </figure><br /> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">7. Nạp component</span></h3> <h4 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">JS</span></h4> <br /> <figure class="code" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-shadow: rgba(0, 0, 0, 0.0588235) 0px 0px 10px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"><figcaption style="background-attachment: initial; background-clip: initial; background-image: url("/images/code_bg.png?1433930727"); background-origin: initial; background-position: center top; background-repeat: repeat-x; background-size: initial; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(165, 165, 165); border-left-style: solid; border-right-color: rgb(165, 165, 165); border-right-style: solid; border-top-color: rgb(203, 203, 203); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-width: 1px 1px 0px; color: #474747; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: 2em; margin: 0px; padding: 0px; position: relative; text-align: center; text-shadow: rgb(203, 204, 204) 0px 1px 0px; vertical-align: baseline;"><span style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></figcaption><div class="highlight" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(5, 35, 43) !important; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0px; vertical-align: baseline;"> <table style="border-collapse: collapse; border-spacing: 0px; border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tbody style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <tr style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td class="gutter" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: middle;"><pre class="line-numbers" style="background-attachment: initial !important; background-clip: initial !important; background-image: url("/images/noise.png?1433930727") !important; background-origin: initial !important; background-position: left top !important; background-repeat: initial !important; background-size: initial !important; border-bottom: none; border-image: initial; border-left: none; border-radius: 0px; border-right: 1px solid rgb(0, 35, 44) !important; border-top: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0.8em !important; text-align: right; text-shadow: rgb(2, 16, 20) 0px -1px; vertical-align: baseline;"><span style="background-color: white;"><span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">2</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">3</span> </span></pre> </td><td class="code" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: middle; width: 757px;"><pre style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px; border: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="html" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0.8em; vertical-align: baseline;"><span style="background-color: white;"><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><head></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><script </span><span class="na" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src=</span><span class="s" style="border: 0px; color: rgb(42 , 161 , 152); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"https://jspm.io/system@0.16.js"</span><span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></script></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></head></span> </span></span></code></pre> </td></tr> </tbody></table> </div> </figure><br /> <h4 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">Component</span></h4> <br /> <figure class="code" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-shadow: rgba(0, 0, 0, 0.0588235) 0px 0px 10px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"><figcaption style="background-attachment: initial; background-clip: initial; background-image: url("/images/code_bg.png?1433930727"); background-origin: initial; background-position: center top; background-repeat: repeat-x; background-size: initial; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(165, 165, 165); border-left-style: solid; border-right-color: rgb(165, 165, 165); border-right-style: solid; border-top-color: rgb(203, 203, 203); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-width: 1px 1px 0px; color: #474747; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: 2em; margin: 0px; padding: 0px; position: relative; text-align: center; text-shadow: rgb(203, 204, 204) 0px 1px 0px; vertical-align: baseline;"><span style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></figcaption><div class="highlight" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(5, 35, 43) !important; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0px; vertical-align: baseline;"> <table style="border-collapse: collapse; border-spacing: 0px; border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tbody style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <tr style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td class="gutter" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: middle;"><pre class="line-numbers" style="background-attachment: initial !important; background-clip: initial !important; background-image: url("/images/noise.png?1433930727") !important; background-origin: initial !important; background-position: left top !important; background-repeat: initial !important; background-size: initial !important; border-bottom: none; border-image: initial; border-left: none; border-radius: 0px; border-right: 1px solid rgb(0, 35, 44) !important; border-top: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0.8em !important; text-align: right; text-shadow: rgb(2, 16, 20) 0px -1px; vertical-align: baseline;"><span style="background-color: white;"><span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">2</span> </span></pre> </td><td class="code" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: middle; width: 757px;"><pre style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px; border: none; box-shadow: none; color: #93a1a1; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="html" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0.8em; vertical-align: baseline;"><span style="background-color: white;"><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><my-app></my-app></span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><script></span><span class="nx" style="border: 0px; color: rgb(181 , 137 , 0); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">System</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="kr" style="border: 0px; color: rgb(211 , 54 , 130); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="s1" style="border: 0px; color: rgb(42 , 161 , 152); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'app'</span><span class="p" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="nt" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></script></span> </span></span></code></pre> </td></tr> </tbody></table> </div> </figure><br /> <h3 style="border: 0px; color: #267924; font-family: "PT Serif", Georgia, "Helvetica Neue", Arial, sans-serif; font-size: 1.3em; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; text-align: justify; text-rendering: optimizeLegibility; vertical-align: baseline;"> <span style="background-color: white;">8. Chạy thử trên localhost</span></h3> <ul style="border: 0px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.5em 20px; padding: 0px; text-align: justify; vertical-align: baseline;"> <li style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: white;">Bạn cần cài đặt gói <code style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.4em; border: 1px solid rgb(221, 221, 221); color: #555555; display: inline-block; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5em; margin: -1px 0px; padding: 0px 0.3em; vertical-align: baseline;">http-server</code></span></li> </ul> <br /> <figure class="code" style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-shadow: rgba(0, 0, 0, 0.0588235) 0px 0px 10px; color: #222222; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-size: 18.4px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1.5em; padding: 0px; text-align: justify; vertical-align: baseline;"><figcaption style="background-attachment: initial; background-clip: initial; background-image: url("/images/code_bg.png?1433930727"); background-origin: initial; background-position: center top; background-repeat: repeat-x; background-size: initial; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: rgb(165, 165, 165); border-left-style: solid; border-right-color: rgb(165, 165, 165); border-right-style: solid; border-top-color: rgb(203, 203, 203); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-width: 1px 1px 0px; color: #474747; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: 2em; margin: 0px; padding: 0px; position: relative; text-align: center; text-shadow: rgb(203, 204, 204) 0px 1px 0px; vertical-align: baseline;"><span style="background-color: white; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></figcaption><div class="highlight" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(5, 35, 43) !important; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0px; vertical-align: baseline;"> <table style="border-collapse: collapse; border-spacing: 0px; border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tbody style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <tr style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td class="gutter" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: middle;"><pre class="line-numbers" style="background-attachment: initial; background-clip: initial; background-image: url("about:blank"); background-origin: initial; background-position: left top; background-repeat: initial; background-size: initial; border-bottom: none; border-left: none; border-radius: 0px; border-right: 1px solid rgb(0, 35, 44); border-top: none; box-shadow: none; color: #93a1a1; font-family: menlo, monaco, "andale mono", "lucida console", "courier new", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0.8em; text-align: right; text-shadow: rgb(2, 16, 20) 0px -1px; vertical-align: baseline;"><span style="background-color: white;"><span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1</span> <span class="line-number" style="border: 0px; color: rgb(88 , 110 , 117); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">2</span> </span></pre> </td><td class="code" style="border: 0px; font-family: inherit; font-size: 18.4px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: middle; width: 757px;"><pre style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px; border: none; box-shadow: none; color: #93a1a1; font-family: menlo, monaco, "andale mono", "lucida console", "courier new", monospace; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="python" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: block; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.45em; margin: 0px; overflow-x: auto; overflow-y: hidden; padding: 0.8em; vertical-align: baseline;"><span style="background-color: white;"><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="err" style="background-image: none; border: 0px; color: rgb(220 , 50 , 47); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">sudo</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">npm</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">install</span> <span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">g</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">http</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">server</span> </span><span class="line" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">cd</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">angular2</span> <span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&&</span> <span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">http</span><span class="o" style="border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="n" style="border: 0px; color: rgb(38 , 139 , 210); font-family: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">server</span></span></span></code></pre> </td></tr> </tbody></table> </div> </figure>

Đôi Nét về Angular 2.0

Bắt đầu với những tính năng mới Hãy xem phiên bản này đem đến cho chúng ta những lợi ích và tính năng gì mới? Phát triển các ứng dụng...

Read more »