详解基于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最后引用 最后展示的效果为
项目到这边已经完成的差不多了 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
