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>
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
* 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: 422
