function<\/span>(sender,args){ \r\n console.log(args.get_message()); \r\n } \r\n }); \r\n }<\/pre>\nListing 1.2<\/b>: AngularJS code to make GET Request to a URL<\/p>\n
<\/p>\n
The function GetList in line 1 takes two parameters. The first parameter is $scope. This parameters makes is possible for\u00a0 objects declared in the controller code to be available for use in the html page.
\nThe second parameter listName is the name of the SharePoint list you want to access.<\/p>\n
<\/p>\n
The $.ajax() Method<\/b>
\nThe $.ajax() method is used to\u00a0 create ajax request.
\nIt takes the following parameter:
\nurl<\/i>: a string value of the request url to send the request to
\nasync<\/i>: indicates if whether the request should be
\nmethod<\/i>: specified the HTML method to use for the request. Here we use a GET methods since we are only retrieving data
\nheaders<\/i>: specifies the headers\u00a0 such as content-type<\/p>\n
The next two parameters are functions discussed next<\/p>\n
<\/p>\n
Success Function\u00a0<\/b>
\nThis is a function that is run if the request is successfully\u00a0 executed. In this case, the function takes the results of the request and assigns it to the items collection of the $scope object. This makes is possible that the results are available in the view(html page)<\/p>\n
<\/p>\n
Error Function<\/b>
\nThis is the function that is run if the request fails. In this case a message containing the error is written to the console.<\/p>\n
<\/p>\n
4. Understanding the Pieces of the your html page<\/h3>\n
The page displays the data from the request. So how does this work?
\nRemember that the data from the request was put in $scope.items. This means that it\u00a0 can be accessed from the html page.<\/p>\n
<\/p>\n
<\/p>\n
<div<\/span> ng-app=<\/span>\"listApp\"<\/span>><\/span> \r\n <div<\/span> id=<\/span>\"App1\"<\/span> ng-controller=<\/span>\"controller1\"<\/span>><\/span> \r\n <h1><\/span>First List Items<\/h1><\/span>\r\n<table<\/span> border=<\/span>\"1\"<\/span>><\/span>\r\n<tr><\/span>\r\n<th><\/span>Firstname<\/th><\/span>\r\n<th><\/span>Lastname<\/th><\/span>\r\n<\/tr><\/span>\r\n<tr><\/span>\r\n\r\n<\/tr><\/span>\r\n<tr<\/span> ng-repeat=<\/span>\"item in items\"<\/span>><\/span>\r\n<td><\/span>{{item.Firstname}}<\/td><\/span>\r\n<td><\/span>{{item.Lastname}}<\/td><\/span>\r\n<\/tr><\/span>\r\n\r\n<\/table><\/span>\r\n<\/div><\/span>\r\n<\/div><\/span>\r\n<\/pre>\nListing 1.3:<\/b> HTML Page displaying AngularJS Content<\/p>\n
<\/p>\n
The ng-app directive<\/b>
\nThis helps you to specify the root element of the AngularJs application. All AngularJS application must have a root element in the html page.
\nIf this code is specified in a html element, then AngularJS code could be written inside this element. In our case we made the table element the root element. But you can also place this code in the body element of the html code.<\/p>\n
<table ng-app=’modulename’>
\n….
\nAngularJS code can go here…
\n…..
\n<\/table
\nmodulename specifies the name of the module to load with the application. Remember that the modulename is given as parameter to the angular.module() method.<\/p>\n
Quiz: What is the modulename from our code? \u263a<\/i><\/p>\n
<\/p>\n
The ng-controller directive<\/b>
\nThe ng-controller directive attaches a controller to the view(html page).
\nThis means that the functions and variables defined in the controller will be available in the view.(remember, our controller is Controller1)<\/p>\n
<\/p>\n
The ngRepeat directive<\/b>
\nThe ngRepeat directive is added to the html page to iterate through a collection of items. Look at the code fragment so you could understand how it works.<\/p>\n
In our case we have the code below<\/p>\n
<\/p>\n
<\/p>\n
<tr<\/span> ng-repeat=<\/span>\"item in items\"<\/span>><\/span>\r\n<td><\/span>{{item.Firstname}} <\/td><\/span>\r\n<td><\/span>{{item.Lastname}} <\/td><\/span>\r\n\r\n<\/pre>\nListing 1.4<\/b>: Using ng-repeat to display a table<\/p>\n
<\/p>\n
This code would create as many rows as there are items in the $scope<\/p>\n
<\/p>\n
Specifying Repeat Items<\/b>
\nRepeat items are specified one element below the element containing the ngRepeat directive. So in our case, the ngRepeat directive is in <tr> element, therefore, the repeat elements would be in the <td> tag.
\nAlso, the repeat variables are enclosed in double curly braces, like this {{}}<\/p>\n
\n<\/b><\/b><\/p>\n5. Final Notes<\/h3>\n
If you have followed this tutorial up to the end, thumbs up to you. If you have any challenges or observation, you can let me know in the comment box below or in the form to the left of this page.<\/p>\n
I would also like to let you know that the key to catching up on software tutorials is to practice them yourself. Secondly, you can get assistance from experienced professionals like me!
\nFeel free to leave me a message or question<\/p>\n
Thanks for your efforts!<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
I am Kindson and today, I’m going to explain to you how to fetch Sharepoint using AngularJS list and display it in html page. I … <\/p>\n","protected":false},"author":2,"featured_media":643,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[113],"tags":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/82"}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":6,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":1218,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/82\/revisions\/1218"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media\/643"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}