- AngularJS is the most popular MVW(Model View Whatever) framework From Google Inc..
- In this Demo, "We will create a Hello Word Web application Using AngularJS framework.We will create a conroller and learn about scope variable.Finally We will print some string using template".
- The project structure,
- About this Demo:-
--- "studentDetailApp" application name.
---"StudentController" a basic controller.
- $routeProvider provides the routing configuration.Using when method a path is mapped to controller .The app.js file contains all routing information for the application,
'use strict';
angular.module('studentDetailApp', [ 'studentDetailApp.controllers']).
config(['$routeProvider', function($routeProvider,StudentController) {
$routeProvider.when('/', { controller: 'StudentController'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
- This application starts with index.html file.
The content of index.html file,
<!doctype html>
<html lang="en" ng-app="studentDetailApp">
<head>
<meta charset="utf-8">
<title>Student Details App</title>
</head>
<body ng-controller="StudentController">
{{appName}} {{authorName}}
<!--Required JS Files List :start -->
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
<!--Required JS Files List :end -->
</body>
</html>
- Directives used in index.html,
ng-app: This is inbuilt directive in AngularJS.Using This directive AngularJS able to hook between Controller and scope.
ng-controller:This is inbuilt directive in AngularJS.This indicates that a controller scope is started from the corresponding element.
- All the controllers are defined in controller,js file. Here "studentControllerModule" module variable is created for the application .To define a new controller we can call "controller()" method on the "studentControllerModule".
A "StudentController" controller is created in this Demo. This controller holds two variables "appName" and "authorName" in its scope.
The below code shows the controller.js file,
'use strict';
/* Controllers Module for studentDetailApp application*/
var studentControllerModule = angular.module('studentDetailApp.controllers', []);
/*StudentController: controller for students*/
studentControllerModule.controller('StudentController', function($rootScope, $scope, $location,$routeParams) {
$scope.appName="Student Detail Application";
$scope.authorName = "Sandeep Kumar Patel" ;
});
- WAMP server is used for running this demo.Just copy the project folder inside the www folder of the server.
For this Demo it will look like below,
Then restart all the WAMP services and then application is ready to run.
- The application can be called by following url,
http://localhost/AngularWebApp/app/
OR
http://localhost/AngularWebApp/app/index.html
- StudentController has two variable in its scope(appName and authorName).These two variable are visible in the scope of the controller.By calling {{appName}} and {{authorName}} inside the scope of the controller will print the value string in the place.Output of the above demo ,
