Angular

Image

Angular (previously called Angular.Js) is a client-side, cross-platform, open framework source.

It allows the creation of App. Web, especially Single Page Applications, which gain much faster and smoother loading times.

Code Examples

We start with very simple codes. The more you progress, page after page, the more sophisticated the scripts will be.

C 0001 - Hello World !

Say hello...
Reproduce this code (do not copy-paste!).

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<h1>Hello World !</h1>
</div>
</body>
</html>

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

C 0002 - Form Field

Interact with a form field...
Reproduce this code (do not copy-paste! ).

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Enter a name in the field below :</p>
<p>Nom : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}. How are you ?</h1>
</div>
</body>
</html>

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

C 0003 - Numbers

A small calculation...
Reproduce this code (do not copy-paste! ).

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</
script>
<body>
<div ng-app="" ng-init="quantity=1;cost=10">
<p>Total in dollars : {{ quantity * cost }}
</p>
</div>
</body>
</html>

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

C 0004 - Print a list of names

Print a list of names...

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>  
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>var app=angular.module('myApp',[]);app.controller('myCtrl', function($scope) {$scope.names = ["John", "Paul", "Marcus", "Theo"];});
</script>
</body>
</html>

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

Info+

Creation
» Date de création : 2016
* Created by Google
* Developed by Angular Community

* Written in TypeScript
* Multiplateform
* MIT License

Practical cases

In order to train you, we add small programs every week to this section to keep you up to speed.

CASE 1

BASIC LEVEL

Print a selection according to age

This little program will allow you to choose, according to the variables you have added yourself, the usernames to print.

TRY

CASE 2

INTERMEDIATE LEVEL

Create a database (customers)

This little kit will allow you to design a database to manage a basic customer portfolio.

TRY

CASE 3

EXPERT LEVEL

Develop a news App.

Design and develop an application with Android Studio, managing content hosted by a resource website on a classic Web server (Hybrid App.).

TRY
2021 (C) Fond of Code tm (protected trademark) - Reflex001 / Diego Piccini (da Todi).
All rights reserved. Protected editorial content (www.theethicalweb.com).

About Us...

About Us...
Reflex001

Web
Programming
Development

Main Topics

Main Topics

Legal/Support

Legal/Support
Image