Kalp Corporate Angular Js Tutorials
Download as PPTX, PDF0 likes284 views
AngularJS is an open-source web application framework initially developed by Google that allows the creation of rich internet applications using a clean MVC (Model View Controller) architecture. It features data binding, dependency injection, and a modular approach, providing developers with tools to build single-page applications efficiently. Despite its advantages, AngularJS comes with security concerns and dependency on JavaScript for functionality.
![MODULE
AngularJS supports modular approach. Modules
are used to separate logics say services,
controllers, application etc. and keep the code
clean. We define modules in separate js files and
name them as per the module.js file. In this
example we're going to create two modules.
Application Module − used to initialize an
application with controller(s).
var mainApp = angular.module("mainApp", []);](https://image.slidesharecdn.com/angularjs-160715130938/85/Kalp-Corporate-Angular-Js-Tutorials-21-320.jpg)
![var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm', controller:
'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm', controller:
'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);](https://image.slidesharecdn.com/angularjs-160715130938/85/Kalp-Corporate-Angular-Js-Tutorials-25-320.jpg)
Kalp Corporate Angular Js Tutorials
- 2. ANGULARJS AngularJS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. https://angularjs.org
- 3. FEATURES AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA). AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way. Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.
- 4. IMPORTANT PARTS OF ANGULARJS
- 5. FEATURES Data-binding − It is the automatic synchronization of data between model and view components. Scope − These are objects that refer to the model. They act as a glue between controller and view. Controller − These are JavaScript functions that are bound to a particular scope. Services − AngularJS come with several built-in services for example $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app. Filters − These select a subset of items from an array and returns a new array. Directives − Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel...) Templates − These are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using "partials". Routing − It is concept of switching views.
- 6. FEATURES Model View controller − MVC is a design pattern for dividing an application into different parts (called Model, View and Controller), each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers it humorously as Model View Whatever. Dependency Injection − AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.
- 7. ADVANTAGES OF ANGULARJS AngularJS provides capability to create Single Page Application in a very clean and maintainable way. AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience AngularJS code is unit testable. AngularJS uses dependency injection and make use of separation of concerns. AngularJS provides reusable components. With AngularJS, developer write less code and get more functionality. In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
- 8. DISADVANTAGES OF ANGULARJS Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure. Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more.
- 9. THE ANGULARJS COMPONENTS ng-app − This directive defines and links an AngularJS application to HTML. ng-model − This directive binds the values of AngularJS application data to HTML input controls. ng-bind − This directive binds the AngularJS Application data to HTML tags.
- 10. MVC
- 11. MVC Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts − Model − It is the lowest level of the pattern responsible for maintaining data. View − It is responsible for displaying all or a portion of the data to the user. Controller − It is a software Code that controls the interactions between the Model and View.
- 12. STEPS TO CREATE ANGULARJS APP Step-1 We have included the AngularJS JavaScript file in the HTML page so we can use AngularJS − <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1 .3.14/angular.min.js"> </script> Step-2 Define AngularJS Application using ng-app directive <body ng-app = "myapp"> </body>
- 13. STEPS(CONTI..) Step 3 Define a model name using ng-model directive <p>Enter your Name: <input type = "text" ng- model = "name"></p> Step-4 Bind the value of above model defined using ng-bind directive. <p>Hello <span ng-bind = "name"></span>!</p>
- 14. HOW ANGULARJS INTEGRATES WITH HTML ng-app directive indicates the start of AngularJS application. ng-model directive then creates a model variable named "name" which can be used with the html page and within the div having ng-app directive. ng-bind uses the name model to be displayed in the html span tag whenever user input something in the text box. Closing</div> tag indicates the end of AngularJS application
- 15. USE ABOVE MENTIONED THREE STEPS IN AN HTML PAGE. <html> <head> <title>AngularJS First Application</title> </head> <body> <h1>Sample Application</h1> <div ng-app = ""> <p>Enter your Name: <input type = "text" ng-model = "name"></p> <p>Hello <span ng-bind = "name"></span>!</p> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular. min.js"> </script> </body> </html>
- 16. OUTPUT Sample Application Enter your Name: Hello !
- 17. EXPRESSION Expressions are used to bind application data to html. Expressions are written inside double braces like {{expression}}. Expressions behaves in same way as ng-bind directives. AngularJS application expressions are pure javascript expressions and outputs the data where they are used. <p>Hello {{student.firstname + " " + student.lastname}}!</p>
- 18. CONTROLLER AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control. <div ng-app = "" ng-controller = "studentController"> ... </div>
- 19. FILTER Filters are used to change modify the data and can be clubbed in expression or directives using pipe character. Following is the list of commonly used filters.
- 20. Sr.No. Name Description 1 uppercase converts a text to upper case text. 2 lowercase converts a text to lower case text. 3 currency formats text in a currency format. 4 filter filter the array to a subset of it based on provided criteria. 5 orderby orders the array based on provided criteria.
- 21. MODULE AngularJS supports modular approach. Modules are used to separate logics say services, controllers, application etc. and keep the code clean. We define modules in separate js files and name them as per the module.js file. In this example we're going to create two modules. Application Module − used to initialize an application with controller(s). var mainApp = angular.module("mainApp", []);
- 22. MODULE(CONTI..) Controller Module − used to define the controller. mainApp.controller("studentController", function($scope) { …… … });
- 23. AJAX CALL: AngularJS provides $http control which works as a service to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $http can be used to get the data from server
- 24. $ROUTE $routeProvider is the key service which set the configuration of urls, map them with the corresponding html page or ng-template, and attach a controller with the same.
- 25. var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/addStudent', { templateUrl: 'addStudent.htm', controller: 'AddStudentController' }). when('/viewStudents', { templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController' }). otherwise({ redirectTo: '/addStudent' }); }]);
- 27. Our online IM Id’s for more convenient communication. 3, Suvarna Nagar Bungalow, Near St.Xaviers School Loyola, Ahmedabad-380013, Gujarat, India +91 9879518121 +91 757-294-0388 (001) 415 251 KALP kalpcorporate nihar.kalp [email protected] [email protected] [email protected] kalpcorporate.com