AngularJS Bit by Bit

Wednesday, October 22, 2014

Homepage of angularjs, place to download the bits, read the documentation and explore the api


Reference the angular script, add ng-app directive, this tells angular to parse/compile the DOM/HTML, insert ng-model directive in input, display the data of the model in the angular expression, double curly braces, this is two way data binding, the ng-model directive binds the name property to the content of the input element


Insert a value in textbox, the template is automatically updated with the new value, the data name is bound to input and the template


Add in multiple input fields, they are all bound to the same model, type in a value in first textbox, the value is updated in all elements bound to the model


Now we have two properties on the model, firstname and lastname, they are both bound to the template, value evaluated in angular expression of double curly braces


The ng-controller directive assigns a controller for portion of HTML, access it from JAVASCRIPT, the scope is the glue between the controller and the view, the controller initializes the data, on load of the web page the data is displayed, upon modification, automatic update, this uses global function as controller, this pollutes the global namespace, not good for large, complex JAVASCRIPT apps, when you start building them


The angular way, give the ng-app directive a name, declare an angular module passing in the name as first parameter and an array as second parameter, define a controller within this module, passing in the name of the controller as first parameter and a function as second parameter


Settimeout function, executes asynchronously after 2 seconds, since this is a pure JAVASCRIPT function, angular is not aware of this asynch callback, $scope.apply is to propagate to angular that a change has occured, $scope.watch is an event listener that runs every time a change on the first parameter, a property has happened, here after two seconds the value of the property lastname is updated


In the controller, the property on scope contains an array of items, the ng-repeat directive iterates over every element in the list, it's basically a foreach, finally the value is displayed in the angular expression, double curly braces


Addrace function on scope pushes a new element on races array on scope, it is invoked in the form tag on the ng-submit directive


To clear the value of the textbox upon insertion set the property on scope equal to an empty string upon pushing the element in the array


Remove items from the list, invoke function on controller using ng-click directive, get index and splice item off the array


The races property on scope contains an array of JAVASCRIPT objects, in the HTML the ng-repeat directive iterates over each item, the angular expression then displays each item


Using ng-repeat in table row element to display data in tabular format


Inject http service in controller, an example of angulars dependency injection at work, http service is a wrapper for xmlhttprequest, use a get request to grab the json file, success function is comparable to a promise, pass in a callback function with data variable, the data variable will be filled with the json object, finally assign the data variable to races property on the scope


Use this syntax to avoid any problems with minification, second argument of controller function is an array with strings of the services to inject in the controller


Add a search input box with ng-model directive, in ng-repeat after pipe filter on this model, when type in a string in search textbox, the items in ng-repeat are instantly filtered on this value


To sort, insert filter orderBy assigning it the property to sort, this sorts in ascending order, from smallest to largest


To sort in descending order just add a minus sign in front of the property in filter clause, this sorts from largest to smallest


Now the orderby filter is set to a property set on the scope, anchor inserted in table header, ng-click directive the angular expression assigns to the value on the scope, click on the link and the column is sorted, click on name sorts by name, click on runners sorts by runners


Let's sort the columns interactively, clicking once sorts descending, clicking next sorts ascending, add reverse property on scope, pass in additional argument of reverse setting it to its false value, this will toggle the boolean, add reverse property to filter orderby, chain it on


In json file add new property logo and the url of the cities flags


Inside table header add logo column, inside repeater add image tag where source points to to logo property of the iterator, the angular experssion can pretty much be placed anywhere inside the HTML to be evaluated


To avoid errors from asynchronous loading of the images, use ng-src directive, it sets the source after the model has loaded, no more network errors in developer console


To format an angular expression for currency use curreny filter and specify the currency


To format a number with commas, add number filter inside angular expression


To set up routing, reference the route script and inject ngRoute module as a dependency in the app


Invoke config function on app variable passing in a function, routeprovider has when function where define the route and the template and controller for that specific route, in the HTML template notice the div with ng-view


Move the template to separate file using templateurl property on the route


Inject routeparams service in controller, extract optional parameter in url for this route specifying the name of the parameter, assign it to a variable on scope for display


Refresh web page, click on a race, routed to detail page, the parameter on the route tokio is displayed in the template


The routing to detail page from list page is inside the repeater, anchor added, the href goes to hash slash race name, race is in the repeater, it gets evaluated to each race in the list, this matches the route in the routeprovider


In detail controller, inject http service and do a get on the json file, in success function pass in a callback function, do a filter on return data, data is an array and filter filters out items that pass a true test, if returns true the item is included in the filtered list, the test is is the items name equal to the name on the scope, a linear search through the data to find the race by name and assign it to the race variable


Refresh web page, click on an item, routed to details page, in developer console, object logged, object from json data that corresponds to the race


The race detail page now displays the four properties in an unordered list, notice the currency and number filters


In the controller, result of filter operation is assigned to variable on scope, refresh web page, navigate to an item, view result of detail page display


Create a service to fetch the json data, this service can be invoked from all controllers, invoke factory function on the app, first argument is the name of the service, http service is injected in function, returning an object that has function on it called racelist, takes a callback function that will be called with the data, upon the get request on http service, pass in the callback function in success function


Inject the races service as a function parameter in the controller, using angulars dependency injection, invoke the listrace function on the custom service, passing in a function as a callback, the json data will be loaded into the parameter of the callback, then assign the value to the scope variable


Update the race detail controller to use the service, inject the custom service, invoke the new findbyname function on it


Findbyname function gets the name and callback passed in, it fetches the json data using the http get request, then filters the data based on a match with the name, then invokes the callback passing in the loaded variable with json data, all functions as before, now the data retrieval is factored into a custom service with methods, this makes for a clean code coding practice


Default Success Warning Important Info Inverse
B S W I ? O