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>
Icon

CHOOSE YOUR COMPILER

Reproduce this code, choosing one of the compilers below (→ SEE DEFINITION).

Don't copy and paste, otherwise you won't learn anything.

All have the same purpose, just choose one considering your preferences. When copying your code, replace the existing one (default) already in the compiler, with your own code.

Warning ! For some of these compilers, you must choose the programming language yourself in the menu which is then proposed to you. Of course, don't forget to click on the RUN button !

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