Beginner
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

→ Let's start with very simple codes. The more you progress, page after page, the more sophisticated the scripts will be. However, you must go over 30 to 40 pages per level, before moving on to the next step...

→ In order to evaluate your codes, click on the icon on the left at the bottom of the page (gears), then choose a compiler from the list that will be open in another tab. Finally, test your work.

NOW REPRODUCE AND IMMERSE YOURSELF!

C 0001 - Hello World !

Reproduce this code (please 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>

C 0002 - Form Field

Reproduce this code (please 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>

C 0003 - Numbers

Reproduce this code (please 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>

C 0004 - Names List

Reproduce this code (please 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="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>

C 0005 - Colors List

Reproduce this code (please 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="myApp" ng-controller="myCtrl">
<ul>  
<li ng-repeat="x in colors">{{x}}</li>
</ul>
</div>
<script>var app=angular.module('myApp',[]);app.controller('myCtrl', function($scope) {$scope.colors = ["Green", "Red", "Black", "Rose"];});
</script>
</body>
</html>

C 0006 - Form Fields

Reproduce this code (please do not copy-paste!).
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<p>Change the names...</p>
<div ng-app="myApp" ng-controller="myCtrl">
Family Name : <input type="text" ng-model="firstName"><br>
Prénom : <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Jean";
$scope.lastName= "The Techos";
});
</script>
</body>
</html>

C 0007 - Form Field and Variables

Reproduce this code (please 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>Type something in the field:</p>
<p>First Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>

C 0008 - Expression

Reproduce this code (please 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=24">
<p>Total amount in US dollars: {{ quantity * cost }}</p>
</div>
</body>
</html>
Icon

CHOOSE YOUR COMPILER

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 !

For some of the compilers marked *, copy the part between the tags <?php and ?>, including of course the tags. Some HTML tags may appear raw, if you do not integrate the code in its entirety within a .php page.

Angular Technical Specifications

Most Recent Versions

Tools And Methodologies

Tests

Info+ (Angular)

Creation
» Creation date : 2016
* Created by Google
* Developed by Angular Community
* Written in TypeScript
* Multiplateform
* MIT License

Tools+ (Angular)

Softwares & Frameworks

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

Create a contact form

This small program will allow you to establish the input fields necessary for writing a contact form, for the visitor of a site or an App. Web.

⇒ TRY

CASE 2

INTERMEDIATE LEVEL

Using PHP MySql with Angular

This small kit will allow you to retrieve and process MySql data and then use it as part of an App. customer management.

⇒ TRY

CASE 3

EXPERT LEVEL

Develop a mobile application for vegan

Design and develop an application listing vegan restaurants in a small town.

⇒ TRY

News

Image
2022 (C) Fond of Code tm (official trademark) - Reflex001 / Diego Piccini (da Todi).
All rights reserved. Protected editorial content (www.theethicalweb.com) / INPI France.

About Us...

About Us...
Reflex001

Web
Programming
Development

Company based in
Nice - FRANCE / Montreal - CANADA
Only by appointment...
© 2022 - All rights reserved.
ISSN Registration request in progress...

Main Topics

Main Topics

Legal/Support

Legal/Support
Image
© Copyright 2022 Reflex001. Designed By Art and Earth Networks and Technology / Diego Piccini / Piccini da Todi G&D Studio