# Angular directive for loading JSON data embedded in the HTML


<!--kg-card-begin: markdown-->
I’ve used AngularJS in quite a few projects by now, but mostly as a sort of replacement for jQuery and not for doing SPAs – Single Page Applications.
 
Being an ASP.NET/C# guy I’m mostly working with either Webforms or MVC. When returning af view/HTML I often find myself wanting to initialize the Angular controller with some data, e.g. an array of items or som configuration data.
 
To do that I can either use `ng-init` or load it asynchronously through a web service. `ng-init` doesn’t feel right to me. It’s also a bit cumbersome and can be a bit difficult to debug the data. Loading it asynchronously requires me to create a web service, add an endpoint to it etc. for each new view, which just feels like a lot of work for basically nothing and you also add another async request to your page load.
 
So I decided to create a simple directive that could load JSON embedded somewhere in the HTML and store it in a property on your controller or pass the data to a callback function when loaded.
 
## Installation
 
You can install the directive through bower or npm or just copy it directly from the [Github repository](https://github.com/Krusen/angular-json-data) and use it in your solution.
 
Bower: `bower install angular-json-data`
 
Node: `npm install angular-json-data`
 
## Usage
 
To start using the directive you need to include `json-data` as a dependency for your app:

```js
// Add 'json-data' as a dependency for your app
var app = angular.module("MyApp", ["json-data"]);
```
 
Below are some examples on how to then use the directive.

```html
<!-- Use the 'model' attribute to store the data in a property on your controller -->
<json-data model="vm.movies">
    [
        { "title": "Warcraft: The Beginning", year: 2016 },
        { "title": "Star Trek: Beyond", year: 2016 }
    ]
</json-data>
```
 
You can use the `callback` attribute to be notified when the directive have been initialized and the data loaded.
 
The `data` variable will be substituted with the loaded data, but you don’t have to include it.

```html
<!-- Will call vm.onMovieLoaded() with the JSON object when initialized -->
<json-data callback="vm.onMovieLoaded(data)">
    {
        "title": "Warcraft: The Beginning",
        "year": 2016,
        "imdbScore": 7.5,
        "cast": [
            "Travis Fimmel",
            "Paula Patton",
            "Ben Foster",
            "Dominic Cooper"
        ],
        "director": "Duncan Jones"
    }
</json-data>
```
 
You can also combine the two if you want to.

```html
<json-data model="vm.movies" callback="vm.onMoviesLoaded()">
    <!-- ... -->
</json-data>
```
 
All valid JSON can be used – objects, arrays and simple types.

```html
<!-- You can store objects, arrays or simple types - all valid JSON can be used -->
<json-data model="vm.count">5</json-data>
<json-data model="vm.userName">"Krusen"</json-data>
<json-data model="vm.isAdmin">true</json-data>

<!-- 'when-all-initialized' attribute will be called when all surrounded json-data directives has been initialied -->
<json-data when-all-initialized="vm.onAllLoaded()">
    <json-data>
        <!-- ... -->
    </json-data>
    <json-data>
        <!-- ... -->
    </json-data>
</json-data>
```
 
By default the directive/element will be removed from the DOM after it has been initialized. If you do not want this behavior you can add a `keep-element` attribute.

```html
<!-- This will stay in the DOM after being initialized -->
<json-data model="vm.data" keep-element>
    <!-- ... -->
</json-data>
```
 <!--kg-card-end: markdown-->