Basically AngularJS is a Javascript MVC framework created by Google to build properly design and maintain web applications. this type of applications does not have a main method. It supports modular approach. Here Modules are used to separate logic say services, controllers, Application etc. We can define modules in separate js files and name them as per the module.js file. These modules can be loaded in any order or even in parallel. You can package code as reusable modules.
AngularJS supports MVC design pattern as shown in figure below.
In this figure, view represents user interface , user action to get input & pass events to controller. Controller maps user actions to model after fetching data. Model is application functionality containing business logic for generating response on data & binds response to view. finally view renders it as output.
What is AngularJS Directives ?
AngularJS has a set of built-in directives which offers functionality to your applications.The directives can be placed in element names, attributes, class names, as well as comments. It is a function which executes when the compiler encounters it. AngularJS directives are extended HTML attributes with the prefix ng- . The important & frequently required directives are ng-app, ng-model, ng-controller.
What is bootstrapping ?
Here ng-app is directive to auto-bootstrap an application. It indicates either the part of the page or whole page is the root of the Angular application. It reads the HTML within that root and compiles it into an internal representation. This reading and compiling process is the bootstrapping process for AngularJS. there is only one ng-app directive can be used per HTML document.
Example : for whole page or
What is Data binding in AngularJS ?
It is the synchronization between the model and the view. It Binds the content of an HTML element to application data. You can use the ng-bind directive to bind the innerHTML of the element to the specified model property. You can also use double braces {{ }} to display content from the model. You can use the ng-model directive for two way binding from the model to the view on HTML controls & vice versa. This happens immediately and automatically, which makes sure that the model and the view is updated.
What is Angular Controllers ?
It defines a controller as the ng-controller=”TestController”. Here TestController function is a JavaScript function. AngularJS will invoke the controller with a $scope object. In AngularJS, The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller.
Let see a example of simple Interest Calculator, which inputs amount , rate and interest and calculates interest amount.
step 1 : import script
Above code import angular.min.js file which holds the directive functionality. Even you can download this file in current directory.
step 2: define ng-app & controller
Above code defines ng-app as TestFirstApp and ng-controller as TestCtrl for partial page div.
step 3: define controller function
Above code defines custom business logic function as interest calculation.
Step 4: design user interface & bind output variable.
Simple Interest Amount: {{"$." + interestamt()}}Above code is in view to display calculated value as output. here interestamt is output variable.
Here you can download SIMPLE-INTEREST-CALCULATOR-ANGULARJS.html (9 downloads) . This code has some internal css for formatting . The Output of this code is shown in screenshot.
first-angular-program-step-by-step-screenshot Thanks !
You can ask queries on mail : [email protected]
