详解基于Bootstrap+angular的一个豆瓣电影app

前端之家收集整理的这篇文章主要介绍了详解基于Bootstrap+angular的一个豆瓣电影app前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、搭建项目框架

npm初始化项目

安装需要的第三方库

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

新建两个文件夹coming_soon in_theaters

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

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

2、搭建首页样式

采用bootstrap

http://v3.bootcss.com/examples/dashboard/

页面的样式

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

http://v3.bootcss.com/examples/dashboard/dashboard.css

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

最后形成的界面

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

3、配置angular路由

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

}]);
})(angular);

在view.html写上

到coming_soon下的controller.js 写上

}]);
})(angular);

在view.html写上

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

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

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

引用app.js

最后浏览index.html

说明一切配置正常

4、豆瓣API

豆瓣API开发者文档

https://developers.douban.com/wiki/?title=movie_v2

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

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

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

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

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

类型:{{item.genres.join('、')}}

导演:

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

对应的view.html 修改

类型:{{item.genres.join('、')}}

导演:

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

最后展示的效果

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/bootstrap/38359.html

猜你在找的Bootstrap相关文章