hocvietcode.com
  • Trang chủ
  • Học lập trình
    • Lập trình C/C++
    • Lập trình HTML
    • Lập trình Javascript
      • Javascript cơ bản
      • ReactJS framework
      • AngularJS framework
      • Typescript cơ bản
      • Angular
    • Lập trình Mobile
      • Lập Trình Dart Cơ Bản
        • Dart Flutter Framework
    • Cơ sở dữ liệu
      • MySQL – MariaDB
      • Micrsoft SQL Server
      • Extensible Markup Language (XML)
      • JSON
    • Lập trình PHP
      • Lập trình PHP cơ bản
      • Laravel Framework
    • Lập trình Java
      • Java Cơ bản
    • Cấu trúc dữ liệu và giải thuật
    • Lập Trình C# Cơ Bản
    • Machine Learning
  • WORDPRESS
    • WordPress cơ bản
    • WordPress nâng cao
    • Chia sẻ WordPress
  • Kiến thức hệ thống
    • Microsoft Azure
    • Docker
    • Linux
  • Chia sẻ IT
    • Tin học văn phòng
      • Microsoft Word
      • Microsoft Excel
    • Marketing
      • Google Adwords
      • Facebook Ads
      • Kiến thức khác
    • Chia sẻ phần mềm
    • Review công nghệ
    • Công cụ – tiện ích
      • Kiểm tra bàn phím online
      • Kiểm tra webcam online
Đăng nhập
  • Đăng nhập / Đăng ký

Please enter key search to display results.

Home
  • AngularJS
  • Lập trình Javascript
Views trong AngularJS

Views trong AngularJS

  • 20-04-2022
  • Toanngo92
  • 0 Comments

Dễ hiểu nhất, views là thứ người dùng nhìn thấy trên ứng dụng.

HTML5 code sẽ được trình duyệt render bằng trình duyệt để hiển thị cho người dùng, được gọi là view, hay là giao diện người dùng.

<!DOCTYPE html>
<html lang="en" ng-app="exampleviewApp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example View AngularJS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-controller="mainController">  
    <h2>Hello {{name}}</h2>
    <input type="text" ng-model="name" />
</body>
<script>
    var exampleviewApp = angular.module('exampleviewApp', []);
    exampleviewApp.controller('mainController', function($scope) {
        $scope.name = 'Toanngo92';
    });
</script>
</html>

Kết quả khi in ra trình duyệt

Ở ví dụ phía dưới, chúng ta thấy trình duyệt hiển thị ra chữ hello, kèm với một text box được render theo HTML code, nhìn lại cấu trúc code phía trên, chúng ta thấy bên trong body có một directive là ng-controller=”mainController”, nội dung bên trong này chính là views được trả ra cho người dùng từ controller có tên mainController trong tầng script.

Có thể có một hoặc nhiều views trong một ứng dụng angularJS tùy theo độ lớn của dự án, thông thường là nhiều views, mỗi một views sẽ là một giao diện khác nhau hiển thị để người dùng tương tác, đây là nền tảng xây dựng nên ứng dụng SPA (single page application). Vì lí do đó, angularJS rất hữu dụng trong việc xây dựng ứng dụng SPA.

Bài viết liên quan:

TypeScript với Kiểu Dữ Liệu Cơ Bản – 3
TypeScript với Kiểu Dữ Liệu Cơ Bản – 2
TypeScript với Kiểu Dữ Liệu Cơ Bản – 1
Typescript cơ bản và cách cài đặt cho người mới
Thực Hành Micro Frontends
Dynamic Component trong Angular
Async Validator trong Angular Form
Reactive Forms Trong Angular (Phần 2)
Reactive Forms Trong Angular (Phần 1)
Template-driven Forms Trong Angular (Phần 2)
Template-driven Forms Trong Angular (Phần 1)
Guards and Resolvers (Phần 3)

THÊM BÌNH LUẬN Cancel reply

Dịch vụ thiết kế Wesbite

NỘI DUNG MỚI CẬP NHẬT

4. KIỂM THỬ VÀ TRIỂN KHAI HỆ THỐNG

2. PHÂN TÍCH VÀ ĐẶC TẢ HỆ THỐNG

3. THIẾT KẾ HỆ THỐNG

1. TỔNG QUAN KIẾN THỨC THỰC HÀNH TRIỂN KHAI DỰ ÁN CÔNG NGHỆ THÔNG TIN

Hướng dẫn tự cài đặt n8n comunity trên CyberPanel, trỏ tên miền

Giới thiệu

hocvietcode.com là website chia sẻ và cập nhật tin tức công nghệ, chia sẻ kiến thức, kỹ năng. Chúng tôi rất cảm ơn và mong muốn nhận được nhiều phản hồi để có thể phục vụ quý bạn đọc tốt hơn !

Liên hệ quảng cáo: [email protected]

Kết nối với HỌC VIẾT CODE

© hocvietcode.com - Tech888 Co .Ltd since 2019

Đăng nhập

Trở thành một phần của cộng đồng của chúng tôi!
Registration complete. Please check your email.
Đăng nhập bằng google
Đăng kýBạn quên mật khẩu?

Create an account

Welcome! Register for an account
The user name or email address is not correct.
Registration confirmation will be emailed to you.
Log in Lost your password?

Reset password

Recover your password
Password reset email has been sent.
The email could not be sent. Possible reason: your host may have disabled the mail function.
A password will be e-mailed to you.
Log in Register
×