Beginner
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!).
<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!).
<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!).
<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>
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
* Created by Google
* Developed by Angular Community
* Written in TypeScript
* Multiplateform
* MIT License
Official/Leader Websites
Tutorial Websites
Complementary Websites
Edition & Press Review
Tools+ (Angular)
Softwares & Frameworks
Glossary
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.
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.
CASE 3
EXPERT LEVEL
Develop a mobile application for vegan
Design and develop an application listing vegan restaurants in a small town.
News
- ANGULAR - EXERCICES
- Hits: 726
