Tự học lập trình AngularJS

  • Kiến thức về Ajax trong AngularJS

    Angular là một bộ thư viện Javascript rất mạnh và thường được sử dụng để xây dựng project Single Page Application (SPA). Nó hoạt động dựa trên các thuộc tính  mở rộng HTML (các attributes theo quy tắc của Angular). Đây là một bộ mã nguồn mở hoàn toàn miễn phí và được hàng ngàn các lập trình viên trên thế giới ưa chuộng và sử dụng. Ajax trong AngularJS là gì? Nó hỗ trợ cho angularJS như thế nào? Cùng tìm hiểu nhé !

    1. AngularJS AJAX

    Như các bạn đã biết, AJAX là một trong những khái niệm phổ biến nhất trong thế giới ứng ụng Web ngày nay. Đã có rất nhiều công cụ cũng như framework hỗ trợ công nghệ này, AngulaJS cũng không phải ngoại lệ khi nó tích hợp AJAX như một điểm mạnh giúp hỗ trợ người dùng dễ dàng và tiện lợi hơn trong việc tận dụng sức mạnh của AJAX.

    Trong AngularJS bạn có thể gửi đi một AJAX requests với một vài phương thức sau:

    • Gọi AJAX thông qua $http service

    • Gọi JSONP thông qua $http service

    • Gọi kiểu REST

    Trong phạm vi bài viết này tôi sẽ trình bày về $http service bởi vì nó rất dễ dàng để cài đặt và sử dụng trong quá trình phát triển.

    2. $http Service

    $http service là cách dễ dàng nhất để gửi một lời gọi AJAX tới Web server của bạn. Nhớ rằng lời gọi AJAX này không thể được gửi tới tên miền khác ngoài tên miền của trang HTML nơi bạn gọi AJAX. Ví dụ, nếu trang HTML của bạn được tải từ jenkov.com thì trang HTML đó chỉ có thể tạo một lời gọi AJAX tới URLs thuộc về tên miền jenkov.com

    Dưới đây là một ví dụ về lời gọi AJAX thông qua $http trong AngularJS

     

     

       Send AJAX Request

       

       Data from server: {{myData.fromServer}}

     

     

       angular.module("myapp", [])

           .controller("MyController", function($scope, $http) {

               $scope.myData = {};

               $scope.myData.doClick = function(item, event) {

                   var responsePromise = $http.get("/angularjs-examples/json-test-data.jsp");

                   responsePromise.success(function(data, status, headers, config) {

                       $scope.myData.fromServer = data.title;

                   });

                   responsePromise.error(function(data, status, headers, config) {

                       alert("AJAX failed!");

                   });

               }

           } );

     

     

       Send AJAX Request

       

       Data from server: {{myData.fromServer}}

     

     

       angular.module("myapp", [])

           .controller("MyController", function($scope, $http) {

               $scope.myData = {};

               $scope.myData.doClick = function(item, event) {

                   var responsePromise = $http.get("/angularjs-examples/json-test-data.jsp");

                   responsePromise.success(function(data, status, headers, config) {

                       $scope.myData.fromServer = data.title;

                   });

                   responsePromise.error(function(data, status, headers, config) {

                       alert("AJAX failed!");

                   });

               }

           } );

    Chú ý hàm trong controller được khai báo với 2 tham số, một tham số là đối tượng $scope và một tham số là đối tượng $http, chính đối tượng $http được sử dụng để tạo lời gọi AJAX.

    Hàm $http.get() trả về một đối tượng có kiểu “promise”. Đối tượng “promise” này bao gồm 2 hàm là success() và error(). Bằng cách gọi những hàm này và truyền tham số đến chúng bạn có thể làm chủ được điều gì sẽ xảy ra khi lời gọi AJAX kết thúc. Nếu lời gọi thành công (server sẽ trả về một mã HTTP từ 200 đến 209), các câu lệnh trong hàm success() sẽ được thực hiện. Nếu lời gọi AJAX lỗi, các câu lệnh trong hàm error() sẽ được thực hiện.

    3. $http Functions

    $http service định nghĩa một số hàm được sử dụng để gửi AJAX requests. Bao gồm:

    • $http.get(url, config)

    • $http.post(url, data, config)

    • $http.put(url, data, config)

    • $http.delete(url, config)

    • $http.head(url, config)

    Chú ý rằng hàm $http.post() và $http.put() yêu cầu một tham số data thứ sẽ lưu dữ liệu để gửi lên server. Tham số data này sẽ được chuyển thàng dạng chuỗi JSON, chuỗi này sẽ được truyền trong request body khi http request được gửi tới server.

    4. Tham số config

    Tham số config truyền đến các hàm $http khác nhau điều khiển HTTP request tới server. Tham số này là một đối tượng Javascript thứ có thể bao gồm các thuộc tính sau:

    • method

    • url

    • params

    • headers

    • timeout

    • cache

    Thuộc tính method có thể được sử dụng để thiết lập phương thức HTTP cho request, phương thức này có thể là GET, POST, PUT, DELETE hoặc HEAD. Thuộc tính này bình thường được thiết lập thông qua hàm bạn chọn để gọi trên $http service, vì vậy trong thực tế ban hiếm khi phải thiết lập thuộc tính này.

    Thuộc tính url được sử dụng để thiết lập URL của lời gọi AJAX. Nó đã được cung cấp trong các hàm của $https vì vậy bạn cũng ít khi phải thiết lập nó lần nữa trong đối tượng config

    Params là thuộc tính sử dụng để thiết lập bất cứ một tham số yêu cầu nào được gắn thêm trên chuỗi URL

    Thuộc tính headers được sử dụng để thiết lập bất kỳ HTTP headers nào bạn muốn gửi lên server. Headers là một đối tượng Javascript với một thuộc tính cho mỗi headers

    Timeout dùng để thiết lập thời gian giới hạn cho một yêu cầu AJAX. Khi thời gian giới hạn đã hết, lời gọi AJAX bị bỏ qua. Thời gian giới hạn được xác định bởi miliseconds hàm success() và error()

    Như đã nói ở trên các lời gọi AJAX thông qua $http trả về một đối tượng “promise“. Đối tượng này có 2 hàm bao gồm success() và error(). Nếu lời gọi AJAX thành công, nó sẽ chuyển tiếp đến hàm success() để thực hiện. Nếu lời gọi AJAX bị lỗi, hàm error() sẽ được thực hiện.

    Bên trong hàm success() và error() bạn nên thiết lập những giá trị thích hợp cho đối tượng $scope, đó là cách để lấy dữ liệu hoặc thông điệp lỗi gửi đến người dùng. Cập nhật đối tượng $scope với dữ liệu trả về, sau đó AngularJS sẽ truyền dữ liệu đến HTML để người dùng có thể thấy sự thay đổi.

    Hai hàm này bao gồm một số tham số sau:

    • data

    • status

    • headers

    • config

    Tham số data là một đối tượng JSON trả về từ server.

    Tham số status là mã trạng thái HTTP trả về sau khi thực hiện. Headers là một hàm có thể chứa đựng bất kỳ HTTP response headers nào thứ trả về cùng với response.

    Tham số config là một đối tượng config thứ thường được dùng để đưa ra lời gọi AJAX.

    Tài liệu liên quan đến AngularJS khác:

Đánh giá của học viên đã tốt nghiệp

  • Các anh chị nhiệt tình, thân thiện. Em được mở mang nhiều kiến thức

    Nguyễn Hằng ly
  • Các chị dạy rất dễ hiểu và nhiệt tình. Các kiến thức như trong thực tế khi em đi thực tập tại RikkeiSoft. Cám ơn các anh chị nhiều ạ. Chúc Dev có nhiều học viên hơn nữa.

    Vũ Thị Hà Phương
  • Học ở DevPro đã giúp mình có nhiều kinh nghiệm lập trình android thực tế. Tại đây mình được các thầy dạy rất chi tiết theo một lộ trình rõ ràng của dự án cụ thể nên sau này đi làm mình rất dễ bắt nhịp với công việc.

    Nguyễn Trọng Duy
  • Qua khoá học ở DevPro thì em đã có một “ít” vốn trong tay để có thể "bò" trong lĩnh vực vạn người mê này Trong qúa trình học thì em cảm thấy trung tâm suppost rất nhiệt tình từ đồ ăn tối, event và đầu ra :p. Có chị Quyên "sinh gái" siêu nhây và siêu lầy dụ dỗ bán rẻ học viên cho các nhà tuyển dụng :3 **** Đặc biệt các thầy có rất nhiều kinh nghiệm chỉ dạy và giúp đỡ rất nhiệt tính < mấy tháng liền bám càng đi nhờ thấy :p>

    PhạmTiến Đạt
  • Tôi sẽ không khuyên các bạn phải đến DevPro để học tập thay vì những chỗ khác nhưng tôi đã từng là một người giống các bạn. Tôi băn khoăn không biết chọn nơi đâu làm ngọn đèn chỉ lối và tôi đến với Devpro . Mọi người khá hoà đồng , các thầy cũng cực nhiệt tình nhưng cũng có vốn kiến thức rất rộng còn lại là phụ thuộc vào sự nỗ lực của các bạn nữa thôi. Cố lên nhé. #ATran

    Trần Xuân Ái
  • em thấy mọi thứ đều ổn, thầy giáo nhiệt tình trong cách giảng dậy, dev cũng rất quan tâm học viên . Nhưng theo quan điểm của em và nhìn từ sự phát triển của các trung tâm khác , em nghĩ mỗi khóa học ở dev nên có bài tập cũng như dự án giao cho học sinh làm để tạo áp lực cho học viên code, giữa học viên và công ty cần có những buổi giao lưu nhiều hơn, và cũng nên có 1 số bạn trợ giảng giúp thầy đi fix những lỗi cơ bản cho những bạn hay sai , chứ nhiều khi 1 mình thầy mà phải chạy đến từng bàn fix lỗi cũng k xuể , Xin chúc devpro ngày càng phát triển hơn

    Nguyễn Đình Thành
  • Thầy giáo dạy rất nhiệt tình rất dễ hiểu, các chị quản lý vui vẻ, tạo động lực học viên. Bài giảng phong phú bao gồm nhiều kiến thức nền tảng. .., giúp học viên nắm chắc kiến thức. Có điều lớp toàn nam, ko có nữ ạ

    Vũ Văn Thủy
  • -Thầy giáo rất nhiệt tình trong công tác giảng dạy , cũng như vui tính , thầy luôn giúp đỡ bọn e rất nhiệt tình ! Tuy chỉ học với lớp 1 thời gian không quá dài nhưng e cũng cảm thấy tuyệt vời vì đã từng là học trò của thầy ! - Chị Hằng và Chị Quyên rất vui tính và nhiệt tình giúp đỡ bọn e nữa ạ - e chúc trung tâm ngày càng đông học viên hơn nữa

    Phan Trung Phú
  • DevPro là một môi trường tốt để cho những ai chưa biết gì về lập trình theo học. Bên cạnh đó, đội ngũ giảng viên rất chất lượng, nhiệt tình chỉ bảo cả trên lớp lẫn ở nhà. Ngoài ra tôi rất thích chính sách giới thiệu việc làm cho học viên sau khi tốt nghiệp để có thể tiếp với các doanh nghiệp uy tín. Sau hơn 4 tháng học tập tại công ty, tôi đã hoàn toàn tự tin rằng mình có thể tự học hỏi và bắt đầu làm việc ở một công ty mới với vai trò Web Developer. Cảm ơn DevPro vì tất cả!!

    Nguyễn Đức Huy
  • Học một lúc 2 trường, nhưng mình vấn chưa biết tìm đam mê từ đâu. Từ lúc gặp chị Hằng mình đã quyết chọn theo android, và bây giờ mình chưa bao giờ thấy hạnh phúc đến thế. Mình có công việc ổn định, chuẩn bị onsite ở nhật 1 năm hi hi.

    Trần An Hưng
  • 1.Thầy đẹp trai thì không phải bàn rồi!! Lại được cái nhiệt tình!! ok. 2. Công ty có nhiệt tình hỗ trợ không? Công ty có nhiệt tình hỗ trợ sinh viên, vd:tiền học phí được chia làm 3 đợt giúp đỡ những sv khó khăn,.....

    Trương Quang Trường
  • Em thấy trung tâm dạy tốt và chất lượng ạ. Thầy và các chị đều tận tâm, nhiệt tình và hòa đồng. Đặc biệt là giải lao giữa giờ chúng em còn được ăn nhẹ, e rất thích khoản này.

    Trần Thị Hồng Nhung
  • Tại DevPro mình còn được học code trên tool mới nhất của Android, điều đó càng khiến mình thích thú hơn và trở nên say mê từ lúc nào không biết nữa. Không khí học ở đây rất vui vẻ, ngoài giờ học mình cùng các bạn còn được giải lao ăn nhẹ và trò chuyện cùng nhau nên rất thoải mãi.

    Trương Ngọc Đức
  • Dev chính là nơi giúp mình tìm thấy niềm yêu thích code, cũng chính là nơi đã cho mình những bước đi đầu tiên, cho mình những kiến thức nền tảng tốt nhất trên con đường theo đuổi nghề Dev.

    Nguyễn Thanh Hằng
  • Thầy giáo vui tính, nhiệt tình trả lời và giúp đỡ các bạn khi các bạn có thắc mắc hay khi gặp khó khăn. Các anh chị vui tính, thân thiện tạo cảm giác thoải mái và vui vẻ cho các bạn khi học ở đây.

    Cao Minh Lâm
  • Nghĩ lại hồi đấy, không có Devpro thì chắc giờ em phát rồ mất thôi! Em vốn nghĩ mình có thể tự học được, nhưng kiến thức vốn là vô tận, không có người hướng dẫn thì mình sẽ chẳng biết bắt đầu dư lào, bước tiếp là gì? Nhờ DevPro, sự tận tâm của các thầy mà em mới biết à hóa ra mọi thứ thật đơn giản.

    Kim Erico
  • Hồi học ở DevPro, mình rất quý thầy Việt và những người bạn. Từ kiến thức học được từ trung tâm mình đã mạnh dạn đi thực tập ở một công ty lớn của Nhật Bản và đến giờ đã là nhân viên chính thức ở đây rồi. Vui hơn nữa là có bạn học cùng lớp đó giờ đang là đồng nghiệp cùng mình luôn rồi. Hihi

    Nguyễn Thanh Việt
Nguyễn Hằng ly Vũ  Thị Hà Phương Nguyễn Trọng Duy PhạmTiến Đạt Trần Xuân Ái Nguyễn Đình Thành Vũ Văn Thủy Phan Trung Phú Nguyễn Đức Huy Trần An Hưng Trương Quang Trường Trần Thị Hồng Nhung Trương Ngọc Đức Nguyễn Thanh Hằng Cao Minh Lâm Kim Erico Nguyễn Thanh Việt