Watercress API interface development, combined with ANGULARJS to do, feel cool crooked!

First time do or first say API is what ghost?

API : Application Program Interface application programming Interface:

There are those common APIs:

WebAPI: A Web-based approach to providing structures called Webaopi; API: All the inputs have output can be called API---are functions; for example: Math.random ()---API for example: Watercress API Development Platform: https://developers.douban.com/wiki/?title= Guide Watercress API V2 (Beta): HTTPS://DEVELOPERS.DOUBAN.COM/WIKI/?TITLE=API_V2 will see: These are some of the common API interfaces provided by watercress: find corresponding, for example: Movie API V2 Go in: For example: Find an interface that is being shown: Click inside to see:

Showing: Resources uri/v2/movie/in_theaters

Then the corresponding "on-release" API address is:

Http://api.douban.com/v2/movie/in_theaters

Access to see the effect;

Some parameters corresponding to the API interface:

Simple to use: For example: Start: Indicates the start of the page, which can be used for paging; For example: Count indicates how many bars:

What's returned is this: it's hard to see: You can use some tools: for example: Google's plug-in: or 360 browser: After the view of the effect will be better, how to combine Angularjs to deal with the data? For example, the data requested comes back like this:

{
    "count": 2,
    "start": 0,
    "total": 36,
    "subjects": [
        {
            "rating": {
                "max": 10,
                "average": 7.6,
                "stars": "40",
                "min": 0
            },
            "genres": [
                "Plot",
                "action",
                "Martial arts"
            ],
            "title": "Embroidery Spring Sword II: Shura Battlefield",
            "casts": [
                {
                    "alt": "https://movie.douban.com/celebrity/1077991/",
                    "avatars": {
                        "small": "http://img3.doubanio.com/img/celebrity/small/1453574419.48.jpg",
                        "large": "http://img3.doubanio.com/img/celebrity/large/1453574419.48.jpg",
                        "medium": "http://img3.doubanio.com/img/celebrity/medium/1453574419.48.jpg"
                    },
                    "name": "Zhang Zhen",
                    "id": "1077991"
                },
                {
                    "alt": "https://movie.douban.com/celebrity/1052359/",
                    "avatars": {
                        "small": "http://img7.doubanio.com/img/celebrity/small/37843.jpg",
                        "large": "http://img7.doubanio.com/img/celebrity/large/37843.jpg",
                        "medium": "http://img7.doubanio.com/img/celebrity/medium/37843.jpg"
                    },
                    "name": "Yang Mi",
                    "id": "1052359"
                },
                {
                    "alt": "https://movie.douban.com/celebrity/1274761/",
                    "avatars": {
                        "small": "http://img7.doubanio.com/img/celebrity/small/25943.jpg",
                        "large": "http://img7.doubanio.com/img/celebrity/large/25943.jpg",
                        "medium": "http://img7.doubanio.com/img/celebrity/medium/25943.jpg"
                    },
                    "name": "Zhang Yi",
                    "id": "1274761"
                }
            ],
            "collect_count": 60970,
            "original_title": "Embroidered Spring Blade II: Shura Battlefield",
            "subtype": "movie",
            "directors": [
                {
                    "alt": "https://movie.douban.com/celebrity/1321200/",
                    "avatars": {
                        "small": "http://img7.doubanio.com/img/celebrity/small/59201.jpg",
                        "large": "http://img7.doubanio.com/img/celebrity/large/59201.jpg",
                        "medium": "http://img7.doubanio.com/img/celebrity/medium/59201.jpg"
                    },
                    "name": "Lu Yang",
                    "id": "1321200"
                }
            ],
            "year": "2017",
            "images": {
                "small": "http://img3.doubanio.com/view/movie_poster_cover/ipst/public/p2492665487.webp",
                "large": "http://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2492665487.webp",
                "medium": "http://img3.doubanio.com/view/movie_poster_cover/spst/public/p2492665487.webp"
            },
            "alt": "https://movie.douban.com/subject/26270502/",
            "id": "26270502"
        },
        {
            "rating": {
                "max": 10,
                "average": 5.4,
                "stars": "30",
                "min": 0
            },
            "genres": [
                "Plot",
                "action",
                "Fantasy"
            ],
            "title": "Biography of Goku",
            "casts": [
                {
                    "alt": "https://movie.douban.com/celebrity/1013782/",
                    "avatars": {
                        "small": "http://img7.doubanio.com/img/celebrity/small/1368156632.65.jpg",
                        "large": "http://img7.doubanio.com/img/celebrity/large/1368156632.65.jpg",
                        "medium": "http://img7.doubanio.com/img/celebrity/medium/1368156632.65.jpg"
                    },
                    "name": "Peng Yuyan",
                    "id": "1013782"
                },
                {
                    "alt": "https://movie.douban.com/celebrity/1315861/",
                    "avatars": {
                        "small": "http://img7.doubanio.com/img/celebrity/small/1368598869.24.jpg",
                        "large": "http://img7.doubanio.com/img/celebrity/large/1368598869.24.jpg",
                        "medium": "http://img7.doubanio.com/img/celebrity/medium/1368598869.24.jpg"
                    },
                    "name": "Ni Ni",
                    "id": "1315861"
                },
                {
                    "alt": "https://movie.douban.com/celebrity/1041510/",
                    "avatars": {
                        "small": "http://img7.doubanio.com/img/celebrity/small/802.jpg",
                        "large": "http://img7.doubanio.com/img/celebrity/large/802.jpg",
                        "medium": "http://img7.doubanio.com/img/celebrity/medium/802.jpg"
                    },
                    "name": "Yu Wenle",
                    "id": "1041510" 

}
            ],
            "collect_count": 72206,
            "original_title": "Biography of Goku",
            "subtype": "movie",
            "directors": [
                {
                    "alt": "https://movie.douban.com/celebrity/1274244/",
                    "avatars": {
                        "small": "http://img7.doubanio.com/img/celebrity/small/1387853548.15.jpg",
                        "large": "http://img7.doubanio.com/img/celebrity/large/1387853548.15.jpg",
                        "medium": "http://img7.doubanio.com/img/celebrity/medium/1387853548.15.jpg"
                    },
                    "name": "Guo Zijian",
                    "id": "1274244"
                }
            ],
            "year": "2017",
            "images": {
                "small": "http://img3.doubanio.com/view/movie_poster_cover/ipst/public/p2475060299.webp",
                "large": "http://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2475060299.webp",
                "medium": "http://img3.doubanio.com/view/movie_poster_cover/spst/public/p2475060299.webp"
            },
            "alt": "https://movie.douban.com/subject/26035290/",
            "id": "26035290"
        }
    ],
    "title": "Current Movies-Beijing"
} 

Using Angularjs:

 
<script type=‘text/javascript‘> var myApp = angular.module(‘myApp‘,[]);
myApp.controller(‘myAppController‘,[‘$scope‘,function($scope){
    $scope.subjects = date[‘subjects‘];
}]);
})(angular); </script>

The page iterates through the syntax using ANGULARJS:

 
 
<div ng-app="myAPp" ng-controller="myAppController">
    <div class="media" ng-repeat="item in subjects track by $index">
      <div class="media-left">
        <a href="#">
          <img class="media-object" ng-src="{{item.images.small}}" alt="{{item.title}}">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">{{item.title}}</h4>
        <p>剧情：{{item.genres.join(‘、‘)}}</p>
        <p>演员：<span ng-repeat="atc in item.casts track by $index">{{atc.name}}<span ng-if="!$last">、</span></span></p>
      </div>
    </div>
</div>

Page effect:

This is just a small example of using AngularJS to combine the development of the Watercress API. If there is a similarity, it is purely accidental;

Watercress API interface development, combined with ANGULARJS to do, feel cool crooked!