豆瓣電影個人項目總結
1.用到的技術點
npm 使用npm來進行下載相應的插件和框架
新建項目的文件目錄
dist
src
assets
css
js
img
details
details.html
details.js
app.js 主模塊，各個從(子)模塊會依賴註入到這裏
index.html 主頁面來進行單頁面開發
gulp 來進行代碼壓縮和優化
2.index.html首頁模塊，用到的技術點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電影展示</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/wap.css">
</head>
<!--
1. 先按照功能劃分模塊.
首頁模塊
正在上映
即將上映
top250模塊
電影詳情
為每一個模塊創建1個文件夾.
用來分別保存每一個模塊相關的視圖 控制器.
-->
<body ng-app="moviecat">
<!-- 頂部導航欄開始 -->
<div class="top">
<div class="header">
<a href="#/home_page"><img src="assets/img/logo.png" ></a>
<div class="search">
<input class="my-input" type="text" placeholder="電影搜索">
<button>搜索</button>
</div>
</div>
<nav class="nav">
<ul>
<!--li中添加 active 類樣式，顯示焦點狀態。-->
<li class="active"><a href="#/home">首頁</a></li>
<li><a href="#/in_theaters">正在熱映</a></li>
<li><a href="#/coming_soon">即將上映</a></li>
<li><a href="#/top250">Top250</a></li>
</ul>
</nav>
</div>
<!-- 頂部導航欄結束 -->
<div class="container" ng-view>
</div>
<footer class="footer">
<div class="container">
<p>版權所有© 前端與移動開發學院 火騎士空空</p>
</div>
</footer>
<script src="assets/js/prefixfree.min.js"></script>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/angular-route/angular-route.min.js"></script>
<script src="./service/heima.js"></script>
<script src="./home/home.js"></script>
<script src="./in_theaters/in_theaters.js"></script>
<script src="./details/details.js"></script>
<script src="./coming_soon/coming_soon.js"></script>
<script src="./top250/top250.js"></script>
<script src="app.js"></script>
</body>
</html>
豆瓣電影個人項目總結