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.
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.
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
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.
Now, when i build the same refresh the page , i’ll get the same result as shown below
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
now, in the index page i need to specify one new javascript section, where in i can bootstrap the data.
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.
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.
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.
also, i need to add one script in index page as well, that is controller reference as shown below.
so, now when i come and refresh the page, i would see the desired results as shown below
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
so, now we have AngulardataService which can be used across the app. Now, let’s use the service in our controller as shown below
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
