A Watercress movie app based on Bootstrap+angular

1. Build Project Framework NPM initialization Project NPM INIT-Y//Initialize project installation with default configuration npm install bootstrap angular angular-route--save Create a new index.html page reference to this Three dependent libraries new two folders Coming_soon in_theaters then create a controller.js file and view.html file in both folders the structure of the last project file is this way

2, set up the style of the home page using the style of the bootstraphttp://v3.bootcss.com/examples/dashboard/and then also need to reference this CSS file http://v3.bootcss.com/ Examples/dashboard/dashboard.css then delete some unwanted tags finally formed interface to this side, the basic structure of the project and the style of completion 3, configuration angular route to In_ Theaters in the Controller.js file, write

(function(angular) {    ' use strict ';     var module = angular.module (' movie.in_theaters ', [' Ngroute ']);    Module.config ([' $routeProvider ',function($routeProvider) {        $routeProvider. When ('/in _theaters ', {            ' Intheaterscontroller ',            '/in_theaters/view.html '        );    }]);    Module.controller (' Intheaterscontroller ', [' $scope ',function($scope) {    }]);}) (angular);

Write it on the view.html.

<class= "Page-header"> aggressively </H1>

To Coming_soon under the controller.js.

(function(angular) {    ' use strict ';     var module = angular.module (' Movie.coming_soon ', [' Ngroute ']);    Module.config ([' $routeProvider ',function($routeProvider) {        $routeProvider. When ('/ Coming_soon ', {            ' Comingsooncontroller ',            '/coming_soon/view.html '        );    }]);    Module.controller (' Comingsooncontroller ', [' $scope ',function($scope) {    }]);}) (angular);

Write it on the view.html.

<class= "Page-header"> upcoming </H1>

Then in the JS folder to create a new app.js write on

(function  (angular) {    ' use strict ';     var module = angular.module (' movie ', [' Ngroute ', ' movie.in_theaters ', ' Movie.coming_soon ' ]);    Module.config ([function  ($routeProvider) {        $routeProvider. Otherwise ({            '/in _theaters '});})    (angular);

Finally on the index.html page body tag plus instructions

<ng-app= "movie">

Add the Ng-view directive to the content display module

<class= "col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"  Ng-view  ></div>

Reference App.js

<src= "/js/app.js"></script>

Last viewed Index.html

It means everything's fine. 4, Watercress API

Watercress API Developer Documentation

Https://developers.douban.com/wiki/?title=movie_v2 This side uses the JSONP way obtains the data, because the angular jsonp way the watercress does not support, So this way, it encapsulates a JSONP component, create a new Components folder, write the Http.js file under the folder

(function(angular) {' Use strict '; varhttp = angular.module (' movie.http ', []); Http.service (' Httpservice ', [' $window ', ' $document ',function($window, $document) { This. Jsonp =function(URL, data, callback) {varCbfuncname = ' Jsonp_fun ' +math.random (). toString (). replace ('. ', '); $window [Cbfuncname]=callback; varqueryString = Url.indexof ('? ') = =-1? '? ': ' & ';  for(varKeyinchdata) {queryString+ = key + ' = ' + Data[key] + ' & '; } queryString+ = ' callback= ' +Cbfuncname; varScript = document.createelement (' script '); SCRIPT.SRC= URL +queryString; $document [0].body.appendchild (script); }    }]);}) (angular);

The controller.js in the In_theaters folder is then added to the Movie.http module and encapsulated in $scope.data via JSONP request data

(function(angular) {' Use strict '; varmodule = angular.module (' movie.in_theaters ', [' Ngroute ', ' movie.http ']); Module.config ([' $routeProvider ',function($routeProvider) {$routeProvider. When ('/in_theaters ', {controller:' Intheaterscontroller ', Templateurl:'/in_theaters/view.html '        });    }]); Module.controller (' Intheaterscontroller ', [' $scope ', ' Httpservice ',function($scope, Httpservice) {console.log (httpservice); Httpservice.jsonp (' Http://api.douban.com/v2/movie/in_theaters ', {count:10, start:0        }, function(data) {$scope. Data=data;            $scope. $apply ();        Console.log (data);    }); }]);}) (angular);

Then modify the view.html in the corresponding

<H1class= "Page-header">{{Data.title}}</H1><Divclass= "List-group">    <ahref= "{{Item.alt}}"class= "List-group-item"ng-repeat= "Item in Data.subjects">        <spanclass= "badge">{{Item.rating.average}}</span>        <Divclass= "Media">            <Divclass= "Media-left">                <imgclass= "Media-object"ng-src= "{{Item.images.small}}"alt="">            </Div>            <Divclass= "Media-body">                <H3class= "Media-heading">{{Item.title}}</H3>                <P>Type:<span>{{Item.genres.join (', ')}}</span></P>                <P>Director:<spanng-repeat= "D in item.casts">{{d.name + ($last? ': ', ')}}</span></P>                          </Div>        </Div>    </a></Div>

The corresponding is also modified in the Controller.js under the Coming_soon folder

(function(angular) {' Use strict '; varmodule = angular.module (' Movie.coming_soon ', [' Ngroute ', ' movie.http ']); Module.config ([' $routeProvider ',function($routeProvider) {$routeProvider. When ('/coming_soon ', {controller:' Comingsooncontroller ', Templateurl:'/coming_soon/view.html '        });    }]); Module.controller (' Comingsooncontroller ', [' $scope ', ' Httpservice ',function($scope, Httpservice) {Httpservice.jsonp (' Http://api.douban.com/v2/movie/coming_soon ', {count:10, start:0        },function(data) {$scope. Data=data;        $scope. $apply ();    }); }]);}) (angular);

The corresponding view.html is modified into

<H1class= "Page-header">{{Data.title}}</H1><Divclass= "List-group">    <ahref= "{{Item.alt}}"class= "List-group-item"ng-repeat= "Item in Data.subjects">        <spanclass= "badge">{{Item.rating.average}}</span>        <Divclass= "Media">            <Divclass= "Media-left">                <imgclass= "Media-object"ng-src= "{{Item.images.small}}"alt="">            </Div>            <Divclass= "Media-body">                <H3class= "Media-heading">{{Item.title}}</H3>                <P>Type:<span>{{Item.genres.join (', ')}}</span></P>                <P>Director:<spanng-repeat= "D in item.casts">{{d.name + ($last? ': ', ')}}</span></P>                          </Div>        </Div>    </a></Div>

Finally, don't forget to quote in Index.html last

<src= "/components/http.js"></script  >

The result of the final display is

The project is almost done over here.

A Watercress movie app based on Bootstrap+angular