Recommended
More Related Content
What's hot
What's hot (20)
Similar to AngularJs Basic Concept
Similar to AngularJs Basic Concept (20)
Recently uploaded
Recently uploaded (20)
AngularJs Basic Concept
- 1. AngularJS
- 2. Introduction • AngularJS is a open source Javascript based front end web framework developed by Google • It is a Single page web Application • AngularJS version 1.0 was released in 2012 • The main unique identity is without page reload and faster response
- 3. Basics • AngularJS extends html attributes and directives bind data to html with expressions So what is directive it is a -ng prefix it extends the power of html Example : ng-if, ng-model, ng-click … • AngularJS uses Javascript framework so you can use angularjs cdn :-
- 4. First App • Before we start check some prerequisite i) AngularJS cdn • ii) Editor • Index.html <!DOCTYPE html> • <html> • <script src=“”> • </script> • <div ng-app=“”> • <p> Name : <input type=“text” ng-model=“name”></p> • <p ng-bind=“name”></p> </div> • </body> </html>
- 5. Description • ng-app is a directive tells that div section is owner of the angularJS application • ng-model directive set and get the value of the input field • ng-bind directive bind the content that hold a value
- 6. AngularJS Directive • Simply directive is a behaviour and starts with ng- • The ng-app intializes angularjs and makes root element of the application • The ng-init directive initalizes the application variables • And etc….
- 7. AngularJS Controller • The controller is a javascript function that maintain application and behaviour using $scope object • In $scope object you can attach properties and methods • The ng-controller directive is used to specify controller in html it maintain data and behaviour it extends to ng-app
- 8. AngularJS Service • AngularJS services are JavaScript functions for specific tasks, which can be reused throughout the application. • You can create http service and data travel between the entire application. Service Application
- 9. AngularJS Modules • Module is a container of the different part of the application such as controller, service and directives etc… • Example : • <!DOCTYPE html> <html > • <head> • <script src="~/Scripts/angular.js"></script> • </head> • <body ng-app="myApp"> • <script> • var myApp = angular.module('myApp', []); • </script> • </body> • </html>
- 10. Thank you