Shared info of IoT & Cloud, Banking, Angular Wicket, Spring Microservices, BigData, flutter, E-comm, Java Telecomm and More

Showing posts with label FE Angular. Show all posts
Showing posts with label FE Angular. Show all posts

Tuesday, October 3, 2017

Angular Forms

Introduction to forms in Angular

Handling user input with forms is the cornerstone of many common applications. Applications use forms to enable users log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks.
Angular provides two different approaches to handling user input through forms: reactive and template-driven. Both capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.
Reactive and template-driven forms differ, however, in how they do the work of processing and managing forms and form data. Each offers different advantages.
In general:

  • Reactive forms are more robust: they are more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.
  • Template-driven forms are useful for adding a simple form to an app, such as an email list signup form. They are easy to add to an app, but they do not scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, use template-driven forms.

Monday, October 2, 2017

angular components and templates

Displaying Data

The live example / download example demonstrates all of the syntax and code snippets described in this page.

Showing component properties with interpolation

The easiest way to display a component property is to bind the property name through interpolation. With interpolation, you put the property name in the view template, enclosed in double curly braces: {{myHero}}.
When you bootstrap with the AppComponent class (in main.ts), Angular looks for a <app-root> in the index.html, finds it, instantiates an instance of AppComponent, and renders it inside the <app-root> tag.

Sunday, October 1, 2017

Angular2 Architecture Overview

Angular is a framework for building client applications in HTML and either JavaScript or a language like TypeScript that compiles to JavaScript.
The framework consists of several libraries, some of them core and some optional.

You write Angular applications by composing HTML templates with Angularized markup, writing component classes to manage those templates, adding application logic in services, and boxing components and services in modules.
Then you launch the app by bootstrapping the root module. Angular takes over, presenting your application content in a browser and responding to user interactions according to the instructions you've provided.


Saturday, September 23, 2017

Angular QuickStart

1-What is Angular?

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop

Sunday, March 19, 2017

Struts2 AngularJS integration

In this post, we will learn to implement AJAX calls from a JSP page to a Struts 2 Action class using AngularJS and update the same JSP page back with the Json response from the Struts 2.

Library Required


Since Angular can send and receive only in json format, to handle it you need struts2-json-plugin-2.x.x.jar. This plugin allows you to serialize the Action class attribute which has getter and setter into a JSON object.

Struts2 AngularJS Insert Operation

LINK

As for the user interface, rather than Bootstrap, we'll use materialize CSS – a modern responsive front-end framework based mostly additionally on Google’s Material design.

FILE STRUCTURE

Knowing the file structure can offer us an outline of what Struts2 files can we need to create and wherever the assets should be placed.




Saturday, March 18, 2017

Cài đặt AngularJS 1.x với ví dụ giản đơn

Cài đặt AngularJS

Sau khi đã có những khái niệm căn bản về AngularJS, chúng ta sẽ tiến hành cài đặt để sử dụng AngularJS:
Step1: Tải tệp angular.min.js từ URL https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js, rồi copy file vào thư mục js
Step2: Khai báo thư viện angularjs trong tệp html
<head><script src = "js/angular.min.js"></script> </head>

Step3: Khai báo thẻ gốc muốn áp dụng AngularJS với từ khóa ng-app. Thẻ với từ khóa này chỉ ra sự khởi đầu ứng dụng AngularJS.
<div ng-app>
</div>
Step4: Sử dụng các thẻ ng-model, ng-bind và các thẻ khác bên trong thẻ gốc ng-app để xây dựng các trang web với AngularJS
ví dụ hoàn chỉnh như sau:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-1-production</title>
  <script src="js/angular.min.js"></script>  
</head>
<body >
  <div ng-app ng-init="qty=1;cost=2">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="cost">
  </div>
  <div>
    <b>Total:</b> {{qty * cost | currency}}
  </div>
</div>
</body>
</html>

Kiến trúc AngularJS 1.x

AngularJS là gì?

AngularJS là một web application framework mã nguồn mở dựa trên JavaScript để tạo ra các ứng dụng RICH Internet Application(RIA) hay ứng dụng sử dụng mô hình MVVM (Model-View-ViewModel).
có thể coi AngularJS tương tự như jQuery nhưng có nhiều tính năng hỗ trợ hơn cung cấp RESTful API, Two-Way data binding,..
AngularJS là một framework để có thể tạo được những ứng dụng web quy mô lớn và performance cao mà vẫn giữ duy trì được tính năng dễ dàng trong việc bảo trì.
Download tại https://angularjs.org/

Popular Posts

Blog Archive