Bootstrapping Data using Angular

Hi Friends,

This is the continuation of the last segment where i left the discussion after displaying the static data on the page. However, now let’s try to fetch data from the server itself. so for this i would need to do couple of changes here. Now, since here JSON is going to be passed on over http request. so, am going to take the raw values and pass the same as shown below. So, here am putting whole model into the string.
19th

So, i do need data which is serialized and passed on as JSON to the view. so, here in the real world project i won’t having that View Model Class in here, rather than keeping in a separate repository also, it won’t have any hard coded data as it is there in the controller, rather than making some api call to database and then inject the same.
16th

Now, let’s build and try that. so, you can see that even after that values are not populated in there, so when you see the source of the page, you will see the JSON data which is pushed down in the model is upper case, and we are expecting the same in camelCase, this is because of the default behavior of the JSON serializer which we are using JSON.Net

17th 18th

However, we could change the behavior as shown below with a small setting which is basically a contract resolver for using the Camel case property names.

20th

Now, when i build the same refresh the page , i’ll get the same result as shown below

21th

 

This was the demonstration that how to bootstrap the data using ng-init and this is fairly useful in many cases, but there is one limitation to this approach that movies variable is only available within the scope of ng-init means any variable inside that particular div will be ok. so, in case if we want to expose the  data outside this view, i need to expose the data globally. so, in order to achieve the same i could use controllers. so, let’s go ahead and create one controller

22nd

 

now, in the index page i need to specify one new javascript section, where in i can bootstrap the data.

23rd

Now, when i refresh the page, i won’t be able to see the values on the page, reason being is incoming values are not in the ng-scope. However, i could verify that values are coming properly in the chrome debugging console section as shown below.

24th 25th

so, basically the above movies variable which i have declared in the javascript section is a raw javascript not an angular expression, that is why it’s not populated the data on the page. so, let’s create a controller, and before we create a controller, let’s create a module. in case if you are not sure about modules and controllers, please refer my earlier posts on angular basics.

30th

27th 28th

 

Now, in order to use the controller as assigned above, i need to tell the page to use moviesModule, so i need to wireup the same in _Layout page as shown below and apart from this i also need to wire up new javascript file module one in the layout page.

29th

 

also, i need to add one script in index page as well, that is controller reference as shown below.

29th 31th

 

so, now when i come and refresh the page, i would see the desired results as shown below

32nd

 

so, what we have done here, we are setting the values in our movies variable which is a global variable, pulling the same from Model and then our controller is putting the same in the scope, so that same raw javascript array can be used in angular expression. so, this is the one way of bootstrapping the data on the page, however we could use more efficient way of pulling the data by using custom angular service

33th

so, now we have AngulardataService which can be used across the app. Now, let’s use the service in our controller as shown below

34th

 

so, if you refresh the page, you will see that page is still loading and getting the data, only now it’s getting the data from the service instantiated from the page and then injected into the controller and then we set the service data to the scope data from the service. So, i wrap this section here for now. In the next module we’ll see how to communicate with the services asynchronously. so, till then stay tuned and happy coding.

Thanks,
Rahul
Happy Coding

1,523 total views, no views today