AppScope and Navigtation History

Unless, scope initialization appears inside any Items control, scope is considered as a global Scope and is referred as $appScope. $appScope is same as $scope for all controls in the same scope. However nested scope controls can access global scope by using $appScope.

As we have come up with a pattern of defining model named global variable for the page, we have included same model in $appScope.

<script type='text/javascript'>
    var model = { name: 'Atoms.js' };
</script>

Now, $scope.model in global scope, or $appScope.model refers to exact same variable defined above.

Initializing Other Variables in Scope

If you have any other global variables that you would like add in the scope, you have to initialize scope as following. Lets say you have a variable named jConfigValues, defined in some javascript.

<script type='text/javascript'>
    ({ jConfigValues: jConfigValues  })
</script>

Note: Please note the difference here, script shown in previous section is a simple javascript defined in page header. Script shown in this example is an Session Initialization Script which only appears within Atoms.js enabled HTML Elements.

AppScope

Following example illustrates, how you can access global scope as appScope inside a nested scope. Each item in AtomItemsControl has its own scope for scope isolation.

Navigation History (Routing)

In AJAX applications, saving state of page is very important. As in browser, we need back button functionality to function exactly like the way we get with simple web pages. Atoms.js makes it easy to maintain navigation state by serializing global scope (appScope) values into URL separated by # token. Scope initialization is ignored if values exists in URL hash and it works without writing any extra scripts.

Lets review above example.

URL Hash Change

URL hash changes whenever any scope property is modified by Atoms.js as a result of any User Action or any AJAX result. All the properties of appScope are saved onto URL. Size of URL depends upon browser, Atoms.js has no limit, but we recommend using only smaller values like integer indexes or short keywords to be saved.

URL Hash Compatible Scope Values

You may notice that in above example, we also have a function called 'display' and a list called 'list', but both were not serialized on URL. Here is why, scope values are only saved on URL under following conditions.

  1. Only Global (Root Level) or appScope values are saved on URL.
  2. Value must be of type "String", "Number" or "Boolean" only. Anything out of this, object, function or array are ignored.
  3. Corresponding property name of value must not start with underscore. Anything that starts with _ is not saved onto URL. Sometimes puting everything on URL causes lots of navigation history cycles that user may get confused. So only few scope properties must be chosen that should be saved on URL. Rest must be named with _ underscore prefix to avoid confusion.