So in the previous post ng-app was used to mark tag where Angular would be rooted. In that tag we used an expression and could see that a value was being updated by seeing the correct output on the page. There was however a lot going on in the page. So let’s take a look at the last example again.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<title>JS Bin</title>
</head>
<body ng-app ng-init="imperative = 'should';">
These two lines should look identical.
<br/>
These two lines {{imperative}} look identical.
</body>
</html>
On the body tag we see ng-app and ng-init. These are tags that annotate the markup with new features. They are called Directives and Angular comes with many of them. They all work with scope. The scope is where all the values in the View live. A directive will either observe, update, or create values in the scope. Directives can even create new scopes. The scope is what is observed for changes in your data and it is what controllers will bind data to.
ng-app and ng-init
This directive is where the Angular app is created in the document. All other directives are either with it or in elements that are its descendants. ng-app being the root creates a the base scope. This scope has a special name; $rootScope. All other scopes will be descended from this one.
Now ng-init is run right after the scope is bound to the body tag. What is run is the value of the attribute, which in this case is “imperative = ‘should’;”. This value is an Expression. It may look like it is JavaScript but it is not. It is very like javascript but without any flow control logic. It is also unlike JavaScript in that as if it runs into an error, other expressions will continue to run.
Expressions
The code above actually has two examples of expressions. The first being apart of ng-init. Directives can evaluate values you pass to them as expressions. This means that as the values change in the scope the directive will respond to those changes. The second way to create an expression is in markup directly with double curly braces “{{” and “}}”. Back to the example we see the first expression is:
imperative = 'should';
What happens here is that Angular tries to put “‘should’” into a variable named “imperative” in the scope. “imperative” does not exist at this point so Angular creates it. Unlike JavaScript we did not have to declare “imperative” and when it is created it is only created in this scope. The next example is much more simple:
These two lines {{imperative}} look identical.
The full expression is only “{{imperative}}”. Every expression is evaluated and the last value that remains is what it is equal to. In this case that can only be “imperative” or its value “‘should’”. A more complicated example would be:
{{firstName = 'John'; lastName = 'Smith'; firstName + ' ' + lastName;}}
This again is an expression but you can see there are multiple steps and the steps are separated by a semi-colon. Here we create and assign firstName and lastName. The last steps is to put both of those values together to make the full name. The last step in an expression becomes it’s value so what would be left in the page is “John Smith”. The values are not limited to strings or numbers but objects {}, and lists [] as well. Through there is no control flow logic there is still logic in the form of truthy evaluation and ternary expressions.
{{valOne || valTwo || valThree}}
Returns the first truthy value in the set.
{{eatCookie = (whyNot) ? true : false}}
While this would be equivalent of setting eatCookie to whyNot
Scope
In all of this the scope is what ties the directives together. When an expression is evaluated it is run in and on the scope. When a scope is created as a child of an existing scope it can see all of the parents values. However adding new values to the scope will not add them to the parent. This controls the visibility of data in your apps.
A Note Before Moving On
All the included directives start with “ng-” to show that they are apart of the Angular namespace. This is done out of courtesy to anyone who would want to make their own directive, and if you do you sould prefix yours as well. This prevents two different versions of a Directive named “popup”. Instead we would have “my-popup” and “your-popup”. This is, as you will see, how Angular leads by example though promoting good practices.
