most valuable keyword definition of Angular -- vi
1. Model View Controller is a software design pattern for developing web applications. A MVC pattern is made up of the following three parts.
Model --- It is the lowest level of 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.
2. ng-app directive defines and links an Angular JS application to HTML. It's also indicate the start of the application.
3. ng-model directive creates a model variable which can be used with the html page and within the container control <div> having ng-app directive.
4. ng-bind directive bind the angular js application data to the html tag.
ng-bind update the model created by ng-model directive to be displayed in the html tag whenever user input something in the control or updates the html control's data when model data is updated by controller.
5. ng-controller directive tells Angular JS what controller to use with this view. Angular JS application mainly relies on controllers to control the flow of data in the angular.
A controller is a javascript object containing attributes/properties and functions. Each controller accept $scope as a parameter which refers to the application/module that controller is to control.
6. Angular JS being a pure javascript based library integrates easily with HTML.
step 1 : include Angular JS javascript library in the html page
<head>
<script src="http://ajax.googleapis.com/ajax/lib/angularjs/1.3.14/angular.min.js></script>
</head>
Step 2 : point to angular js app
Next we tell what part of the HTML contains the angularjs app. This done by adding the ng-app attribute to the root html element of the angular js app.
you can either add it to html element or body element as shown below
<body ng-app="myapp"></body>
7. ng-init directive initializes an Angular JS application data. It is used to put values to the variables to be used in the application.
ng-repeat directive repeates html elements for each item in a collection.
8. Expression is used to bind application data to html. Expression are written inside double curly braces like {{ expression}}
Expression behave in same way as ng-bind directives. Angular JS application expressions are pure javascript expressions and outputs the data where they are used.
9. **** upperCase filter convert a text to upper case text.
It below example we have added uppercase filter to an expression using pipe character. Here we have added uppercase filter to print student name in all capital letters.
Enter the first name
<input type="text ng-model="student.firstName">
Enter the last name
<input type="text" ng-model="student.lastName">
Name in Upper Case : {{ student.fullName() | uppercase}}
10 **** Lowercase filter converts a text to lower case text.
in below example, we have added lowercase filter to an expression using pipe character.
here we have added lowercase filter to print anme in all lowercase letter.
Enter first name :
<input type="text" ng-model="student.firstName">
Enter last name:
<input type="text" ng-model="student.lastName">
Name is lowerCAse :
{{ student.fullName() | lowercase}}
11. currency filter formats text in a currency format.
In below example, we have added currency filter to an expression returning number using pipe character. here we have added currency filter to print fees using currency format.
Enter fees :
<input type="text" ng-model="student.fees">
fees : {{ student.fees | curency}}
12. filter is used to filter the array to a subset of it based on provided criteria.
in below example, to display only required subjects, we have used subjectName as filter.
Enter subject :
<input type="text"ng-model="subjectName">
subject:
<ul>
<li ng-repeat="subject in student.subjects | filter: subjectName">
{{subject.name+ ', marks:' subject.marks}}
</li>
</ul>
12. orderby filter arrange the array based on provided criteria. In below example to order subjects by marks, we have used orderby marks.
subject :
<ul>
<li ng-repeat="subject in student.subjects | orderBy :'marks'>
{{subject.name + ', marks:' + subject.marks }}
</li>
</ul>
13. **** Bootstrap 4 is the fourth version of bootstrap for popular front end component library. We used bootstrap framework in the creation of responsive, mobile first website and Web apps.
Comments
Post a Comment