AngularJS applications are a mix of HTML and JavaScript. The first thing you need is an HTML page.
<!DOCTYPE html>
<html>
<head>
.
.
</head>
<body>
.
.
</body>
</html>Second, you need to include the AngularJS JavaScript file in the HTML page so we can use AngularJS:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body>
.
.
</body>
</html>Note: You should always use the latest version of AngularJS, so it is not necessary to use the same version as the above example.
AngularJS First Example
Following is a simple “Hello Word” example made with AngularJS. It specifies the Model, View, Controller part of an AngularJS app.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Hello {{helloTo.title}} !</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "World, AngularJS";
} );
</script>
</body>
</html>View Part
<div ng-controller="HelloController" >
<h2>Hello {{helloTo.title}} !</h2>
</div>Controller Part
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "World, AngularJS";
});
</script>
Leave a Reply