This article will take you through the views and instructions in Angularjs, I hope it will be helpful to you!
Introduction to AngularJS Views and Directives
In the first article you saw how AngularJS splits the application into views , Controller and Model (MVC). This article takes an in-depth look at how to create AngularJS views. [Related tutorial recommendations: "angular tutorial"]
Before starting, let me first set up a simple AngularJS application that you can use to experience the examples in this article:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController" >
<span></span>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
//empty controller function
});
</script>
</body>
</html>AngularJS Directives
AngularJS views mix data from the model into HTML templates. You can use AngularJSDirectives to tell AngularJS how to mix data into HTML templates. This article will cover the most commonly used AngularJS directives.
Interpolation directive
The interpolation directive is one of the most basic directives in AngujarJS. The interpolation directive inserts the result of an expression into an HTML template. You can use the {{ }} symbol to mark where you insert an expression. Here's an example:
<div ng-controller="MyController" >
<span> {{myData.text}} </span>
</div>HTML template is contained in a div element with the ng-controller attribute. Inside the HTML template is a span element, and inside is an interpolation instruction. This directive instructs AngularJSmyData.text to insert a data value at the given position.
The interpolation directive can also interpolate data returned from functions of the model object. Here is an example:
<div ng-controller="MyController" >
<span>{{myData.textf()}}</span>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.textf = function() { return "A text from a function"; };
});
</script> In this example, the interpolation directive {{myData.textf()}} will be called on the model object myData.textf() function $scope and inserts the text returned from the function into the HTML template.
The textf() function is inserted into the $scope.myData object inside the controller function, as you can see in the example.
##ng-bind directive
Theng-bind directive is a replacement for the interpolation directive. You can use it by ng-bind inserting an attribute in the HTML element where you want AngularJS to insert data. Here's an example:
<div ng-controller="MyController" > <span ng-bind="myData.textf()"></span> </div>This will insert the data returned by the
myData.text() function into the body of the span element. Please note that the ng-bind surrounding the expression within the attribute {{ }} is not required.
Escape HTML from the model
If the data obtained from the model contains HTML elements, these elements are escaped before being inserted into the HTML template. Escaping means that the HTML is displayed as text, not HTML. This is done to prevent HTML injection attacks. For example, in a chat application, someone might
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
Dreamweaver Mac version
Visual web development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Mac version
God-level code editing software (SublimeText3)
