Templates And Expressions in AngularJs

Templates and Expressions are center to AngularJs. The views in this MVC model of AngularJs revolves around templates. You just need to read this post, and then never need to look at any other material, because there is not much to templates than what we would discuss here. So, read along.

What are templates?

You would be hearing this word template over and over again. Template is nothing but just pure HTML+CSS+Expressions that angularJs provides which are pretty similar to the javascript you use. So, AngularJs easily integrates dynamic content into the static sites, and that content is two way binding with the model which means that if any change in the model is done at the controller end, it is reflected in the view and similarly if model is changed in the view, it is reflected back!

Knowing Expressions

Expressions hold the values of objects and model dynamically. Those curly braces you see{{}} which are referred as interpolation here, binds the data to the model to view at front-end. But here comes something interesting that angularJs provides additional functionality than just binding the model. One could use filters here.

{{user.date|date}} where date could be in ISO format with date-time parameters.

you can also do basic calculations here{{user.input1}}, {{user.input2}},{{user.input1+user.input2}}

Some Key Points:

1.AngularJs expressions are similiar to the javascript expressions barring that AngularJs expressions are evaluated via $scope variables and javascript against $window scope.

2. You cannot use if, else, conditional and loops statements in expression, because AngularJS follows strict MVC approach with conditions in the controllers than views.

3.Also you cannot use $window and $location at front-end, as in AngularJS these are injected in the form of services at the backend.

Code:

Some commonly used templates:

<div ng-repeat=”let user in users”>

{{user.name}}

</div>

Diagram:

Hope, it would have made you clear with the  concept. If you still have an any doubt, leave it in the comment section below. Our team would revert back within 24 hours.

Do Follow our Facebook page https://www.facebook.com/lovebeingengineer/.

Similar Blogs:

Top 10 AngularJs Interview Questions

 

AngularJs Vs Angular

 

Forms in AngularJs

 

Dependency Injection in AngularJs!

 

$scopes in AngularJs

 

Services in AngularJs

 

Controllers in AngularJs

Understanding Two-Way Data Binding in AngularJs

 

Journey of Angular

 

 

Leave a Reply