首页

web前端

js教程

分享Bootstrap+angular实现豆瓣电影app实例

零下一度

Jun 27, 2017 am 10:51 AM

基于电影豆瓣

1、搭建项目框架

npm初始化项目

npm init -y 　　//按默认配置初始化项目

安装需要的第三方库

npm install bootstrap angular angular-route --save

新建一个index.html页面引用这三个依赖库

新建两个文件夹coming_soon in_theaters

然后在这两个文件夹里分别创建一个controller.js 文件和view.html文件

最后项目文件的结构是这样

2、搭建首页样式

采用bootstrap

该页面的样式

然后还需要引用这一个css文件

然后删掉一些不需要的标签

最后形成的界面

到这边后，项目的基本结构与样式搭建完成

3、配置angular路由

到in_theaters下的controller.js文件中写上

(function(angular){'use strict';var module = angular.module('movie.in_theaters',['ngRoute']);
    module.config(['$routeProvider',function($routeProvider){
        $routeProvider.when('/in_theaters',{
            controller: 'inTheatersController',
            templateUrl: '/in_theaters/view.html'});
    }]);
    module.controller('inTheatersController',['$scope',function($scope){

    }]);
})(angular);

在view.html写上

<h1 class="page-header">正在热映</h1>

到coming_soon下的controller.js 写上

(function(angular){'use strict';var module = angular.module('movie.coming_soon',['ngRoute']);
    module.config(['$routeProvider',function($routeProvider){
        $routeProvider.when('/coming_soon',{
            controller: 'comingSoonController',
            templateUrl: '/coming_soon/view.html'});
    }]);
    module.controller('comingSoonController',['$scope',function($scope){

    }]);
})(angular);

在view.html写上

<h1 class="page-header">即将上映</h1>

然后在js文件夹中新建一个app.js 写上

(function (angular) {'use strict';var module = angular.module('movie', ['ngRoute', 'movie.in_theaters','movie.coming_soon' ]);
    module.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.otherwise({
            redirectTo: '/in_theaters'});
    }]);
})(angular);

最后在index.html页面 body标签加上指令

<body ng-app="movie">

在内容显示模块中加上ng-view指令

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

引用app.js

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

最后浏览index.html

说明一切配置正常

4、豆瓣API

豆瓣API开发者文档

这边采用jsonp方式获取数据、

由于angular的jsonp方式豆瓣不支持、所以这边自己封装了一个jsonp组件

新建一个components文件夹、在该文件夹下创建http.js文件写上

(function (angular) {'use strict';var http = angular.module('movie.http', []);
    http.service('HttpService', ['$window', '$document', function ($window, $document) {this.jsonp = function (url, data, callback) {var cbFuncName = 'jsonp_fun' +Math.random().toString().replace('.', '');
            $window[cbFuncName] = callback;var queryString = url.indexOf('?') == -1 ? '?' : '&';for (var key in data) {
                queryString += key + '=' + data[key] + '&';
            }
            queryString += 'callback=' + cbFuncName;var script = document.createElement('script');
            script.src = url + queryString;
            $document[0].body.appendChild(script);
        }
    }]);
})(angular);

然后在in_theaters文件夹下的controller.js添加对movie.http模块的依赖，并通过jsonp请求数据封装到$scope.data中

(function (angular) {'use strict';var module = 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);

然后在对应的view.html中修改成

<h1 class="page-header">{{data.title}}</h1><div class="list-group"><a href="{{item.alt}}" class="list-group-item" ng-repeat="item in data.subjects"><span class="badge">{{item.rating.average}}</span><div class="media"><div class="media-left"><img class="media-object" ng-src="{{item.images.small}}" alt=""></div><div class="media-body"><h3 class="media-heading">{{item.title}}</h3><p>类型：<span>{{item.genres.join('、')}}</span></p><p>导演：<span ng-repeat="d in item.casts">{{d.name +($last?'':'、')}}</span></p>              </div></div></a></div>

对应的也在coming_soon文件夹下的controller.js中修改

(function(angular){'use strict';var module = 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);

对应的view.html 修改成

<h1 class="page-header">{{data.title}}</h1><div class="list-group"><a href="{{item.alt}}" class="list-group-item" ng-repeat="item in data.subjects"><span class="badge">{{item.rating.average}}</span><div class="media"><div class="media-left"><img class="media-object" ng-src="{{item.images.small}}" alt=""></div><div class="media-body"><h3 class="media-heading">{{item.title}}</h3><p>类型：<span>{{item.genres.join('、')}}</span></p><p>导演：<span ng-repeat="d in item.casts">{{d.name +($last?'':'、')}}</span></p>              </div></div></a></div>

最后别忘了在index.html最后引用

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

最后展示的效果为

项目到这边已经完成的差不多了

以上是分享Bootstrap+angular实现豆瓣电影app实例的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。