1、搭建项目框架
npm初始化项目
npm init -y //按默认配置初始化项目
安装需要的第三方库
npm install bootstrap angular angular-route --save
新建一个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文件中 写上
(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="/UploadFiles/2021-04-02/app.js">最后浏览index.html
说明一切配置正常
4、豆瓣API
豆瓣API开发者文档
https://developers.douban.com/wiki/"htmlcode">
(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('"htmlcode">(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}}" rel="external nofollow" rel="external nofollow" 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="/UploadFiles/2021-04-02/{{item.images.small}}">(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}}" rel="external nofollow" rel="external nofollow" 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="/UploadFiles/2021-04-02/{{item.images.small}}">华山资源网 Design By www.eoogi.com广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!华山资源网 Design By www.eoogi.com暂无评论...
更新日志
2024年09月27日
2024年09月27日
- 纯音入心系列纯音乐《中央民族乐团-古筝传奇》1CD[MP3][253.1MB]
- 江玲.1989-这样你才爱我,是吗?【新作有声】【WAV+CUE】
- 郭美美.2010-我是郭美美【华纳】【WAV+CUE】
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]