In our previous Article “AngularJS – Introduction“, we quickly looked into AngularJS. Now on, through the series of Articles, I would like to explain more about AngularJS and its components.
Expressions in AngularJS are used to evaluate the given expressions and can be written in double curly braces or using the ng-bind directive. For example, the expression to evaluate the sum of two numbers 10 and 15 can be written as {{ 10 + 15 }} and the result would be 25 displayed.
Lets’ write a sample program to see what the Expressions look like and how we use them in AngularJS.
Step 1. As mentioned in our previous article, ng-app is the directive used to initialize the AngularJS Application. So we use this directive in our HTML to start the AngularJS program.
We need to decide the scope of the AngularJS program too. If you define ng-app directive in the root <html> tag; AngularJS has complete control over the HTML page. If you declare this in a <body> tag; it has control over the entire HTML body.
Depending on our requirements; we declare the directive wherever required. For example, the below code defines the scope only for a particular <div> tag. Note that, we declare ng-app only once per HTML page.
<div ng-app="">
The code written inside <div> tag is controlled by AnhularJS.
Step 2. ng-init is the directive we use to initialize the defined names or Script variables in the HTML page. Before you want to use the variables, you can use this directive to initialize them to their initial values. For example, to initialize a variable message; you can use the below statement:
<div ng-init="message = 'Hello!'">
Step 3. Another directive we have discussed in our previous article is ng-model which is used to bind the data to HTML elements. When you bind the data to an HTML element; it automatically Refreshes the data when you update the HTML element or vice versa. This is one of the useful features AngularJS provides; which reduces a lot of code to re-write.
<input type="text" ng-model="message"></input>
Step 4. Let’s put it all together and write a simple AngularJS to display the text in different colors and the text color will update when we change the color values.
We discuss more on AngularJS as we go.
See also, “AngularJS – Directives“.
</> Michael