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 !
Reproduce this code (do not copy-paste!).
<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
Reproduce this code (do not copy-paste! ).
<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
Reproduce this code (do not copy-paste! ).
<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
<!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+
* Created by Google
* Developed by Angular Community
* Written in TypeScript
* Multiplateform
* MIT License
Tools & Levels
Practical cases
CASE 1
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
Create a database (customers)
This little kit will allow you to design a database to manage a basic customer portfolio.
TRY
CASE 3
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
All rights reserved. Protected editorial content (www.theethicalweb.com).
