This means we are declaring dependencies on both the scope object and the http service. We start by passing $scope and $http as parameters to our controller’s constructor function. Let’s look at app.js which is the heart of the application. The information will be displayed in partials which are fetched, compiled and included by the ng-include directive. The main-info and related-results divs will be used to display information about the current movie and a list of related movies respectively. We are also monitoring search model for changes using the $watch service and we register a callback to fetch data every time a change is detected. We have also used the ng-model-options directive with a debounce value of 800 to ensure that the model is updated with a delay of at least 800ms. The majority of it is boilerplate, but let’s examine where the action takes place: Īs you can see, we have used ng-model to bind the input field (where the users will enter the movie name) to the search model (which we will declare in our controller). The file index.html will contain the main view for our app.
We will be keeping the code in a modular structure as follows: css/ The code for this project is available from our GitHub repo, or you can view a working demo on CodePen. In addition to AngularJS, Fastr will be built using Bootstrap for styling and Animate.css for some snazzy effects. Staying with the movie theme, I will demonstrate this by building a movie browser called Fastr, which will fetch a variety of different information about any movie you care to enter. In this tutorial I will examine how AngularJS can be used to make HTTP requests to a remote API and how to handle the API’s JSON response so that the view is updated. For example, when you buy movie tickets online, the movie ticket web site uses a remote API to verify your credit card information is correct. Nowadays, it is commonplace for web apps to communicate with each other via APIs. then(success_callback, error_callback) instead. error() have been deprecated, updated to use. Replaced unnecessary setTimeout and clearTimeout calls with ng-model-option debounce feature and $watch service.Note: This article was updated on 2016.01.17 by Siyuan Hua.
0 kommentar(er)
