Angular JS Indtrodution

Angular JS Indtrodution

• 2.
  • 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 bound to a particular scope. • Services − AngularJS comes with several built-in services such as $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.
• 3.
  • 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 such as ngBind, ngModel, etc. • Routing − It is concept of switching views. • Model View Whatever − MVW is a design pattern for dividing an application into different parts called Model, View, and Controller, each with distinct responsibilities. • Dependency Injection − AngularJS has a built-in dependency injection subsystem that helps the developer to create, understand, and test the applications easily.
• 4.
  • It providesthe capability to create Single Page Application in a very clean and maintainable way. • It provides data binding capability to HTML. Thus, it gives user a rich and responsive experience. • AngularJS uses dependency injection and make use of separation of concerns. • With AngularJS, the developers can achieve more functionality with short code. • In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
• 6.
  • AngularJS isdistributed as a JavaScript file, and can be added to a web page with a script tag: • <script src="https://ajax.googleapis.com/ajax/libs/ angularjs/1.6.9/angular.min.js"></script>
• 8.
  • AngularJS directivescan be applied to DOM elements in many ways. It is not mandatory to use ng- syntax only. • Directive can also start with x- or data-, for example ng- model directive can be written as data-ng-model or x-ng- model. • Also, the - in the directive can be replaced with : or _ or both. For example, ng-model can be written as ng_model or ng:model. It can also be a mix with data- or x-.
• 9.
  Directive Description ng-app Autobootstrap AngularJS application. ng-init Initializes AngularJS variables ng-model Binds HTML control's value to a property on the $scope object. ng- controller Attaches the controller of MVC to the view. ng-bind Replaces the value of HTML control with the value of specified AngularJS expression. ng-repeat Repeats HTML template once per each item in the specified collection.
• 10.
  Directive Description ng-show DisplayHTML element based on the value of the specified expression. ng- readonly Makes HTML element read-only based on the value of the specified expression. ng- disabled Sets the disable attribute on the HTML element if specified expression evaluates to true. ng-if Removes or recreates HTML element based on an expression. ng-click Specifies custom behavior when an element is clicked.
• 11.
  Here “ng-app” Directivestarts the angular js This link is the source of angular js( You can alos download it and access it locally) Directive to Hold input data Directive binds application data to the HTML view.
• 12.
  O/P
• 13.
  O/P
• 14.
  O/P
• 15.
  O/P
• 16.
  O/P
• 17.
  O/P
• 18.
  O/P