What Is AngularJS?
- AngularJS is a javaScript framework for dynamic web apps
- Work only client-side
- Extends HTML with new attributes
- Maintained by Google and community.
What you need to know to start AngularJS?
- html
- javaScript
AnjularJS "hello world"
- Create a directory(folder) anywhere in your pc, say firstAngularProject
- Open firstAngularProject
- Create a html file name index.html (file content given bellow)
- Create a js file name app.js (file content given bellow)
- Create a directory name lib, download ajnular js & save it into this lib directory
- Open index.html with you favourite browser (Mozilla or Chrome) :)
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Hello World</title>
<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="helloWorldCtrl">
<h2>{{ helloWorld }} </h2>
</body>
</html>
app.js
angular.module("myApp", [])
.controller("helloWorldCtrl", function($scope) {
$scope.helloWorld = "Hello World";
} );
.controller("helloWorldCtrl", function($scope) {
$scope.helloWorld = "Hello World";
} );
Code explanation
index.html
<!--
<!--
ng-app="myApp" : ng-app directive auto bootstrap the application as a myApp angular js application
-->
<html ng-app="myApp"><head>
<title>Hello World</title>
<!-- angular js framework-->
<script type="text/javascript" src="lib/angular.min.js"></script>
<!-- our controller, controller code inside app.js-->
<script type="text/javascript" src="app.js"></script>
</head>
<!-- define body as a scope of the helloWorldCtrl -->
<body ng-controller="helloWorldCtrl">
<!-- { }} is AngularJS expressions. All scope variable can access using this expression -->
<h2>{{ helloWorld }} </h2>
</body>
</html>
<title>Hello World</title>
<!-- angular js framework-->
<script type="text/javascript" src="lib/angular.min.js"></script>
<!-- our controller, controller code inside app.js-->
<script type="text/javascript" src="app.js"></script>
</head>
<!-- define body as a scope of the helloWorldCtrl -->
<body ng-controller="helloWorldCtrl">
<!-- { }} is AngularJS expressions. All scope variable can access using this expression -->
<h2>{{ helloWorld }} </h2>
</body>
</html>
app.js
/*
myApp : our angular app name
[ ] : we will put dependency management inside this array
*/
/*
myApp : our angular app name
[ ] : we will put dependency management inside this array
*/
angular.module("myApp", [])
.controller("helloWorldCtrl", function($scope) {
/*
$scope.helloWorld : we add a variable inside $scope
*/
$scope.helloWorld = "Hello World";
} );
.controller("helloWorldCtrl", function($scope) {
/*
$scope.helloWorld : we add a variable inside $scope
*/
$scope.helloWorld = "Hello World";
} );
