Modern websites typically require to take static markup further as user interaction brings changes to content, and AngularJS aims to make this easier for developers to set up.
Web Development can be considerably quicker when using pre-established methods and where common web components are used, it seems sensible to take advantage of what has gone for, then spending your own time customising it to meet your specific needs. AngularJS offers and is already widespread in Web Development circles.
AngularJS has many tools ready to use out of the box, with just a few lines of code. There are also many opportunities to create your own tools too, or perhaps include others from an extensive and helpful community who may well have come up with something close to what you need already.
AngularJS with Bootstrap can offer you a great combination of fast interface builds with dynamic data, perfect for a prototype that you need without spending too much development time. Any code that you come up with can also then be used in development too as it will be of a higher quality, from set methods used by others.
A further ideal of AngularJS is to create individual components, similar to Bootstrap’s front-end UI setup, and then pass these components between projects where there is a need for them. This should reduce maintenance as websites develop over time.
Set Active Area for your AngularJS Application
Add “ng-app” to the containing element of your application. In most cases this will be the html tag, where you want to run AngularJS throughout.
Automatically update lists of data
Use “ng-repeat” to output all objects of one collection, with the output updating when new data is added. This would be ideal for a shopping basket, for example, where you might want to remove items without a page refresh.
Dynamically Generated Content from JSON file
The example below comes directly from one the tutorials on the official AngularJS website and gives a great example of how you might go about constructing a dynamic list directly from a data source. For simple examples it is best to use JSON, but in the real world you may well be retrieving data from a more complex backend.
The ng-repeat continues from the previous example, and here there would be several different attributes for each item in the JSON file, e.g. name, snippet and imageURL. This could perhaps be a small product list with small, introductory information on key products.
The new items used in this example which are worth noting are the built-in filter and orderBy functions which are used here alongside ng-repeat. You will see in the search and sort by options above the unordered list as to where the corresponding items sit for filtering and ordering the content, with Angular then doing all the rest for you.
Search: Sort by:
- None as yet