更新時間:2021-03-01 來源:黑馬程序員 瀏覽量:
目前互聯(lián)網(wǎng)上有很多視頻網(wǎng)站在完善的技術平臺支持下提供電影及電視劇資料庫,如豆瓣、優(yōu)酷等,它們在網(wǎng)站的首頁通常會展示節(jié)目的列表。本文將要完成電影訪問列表的路由功能并整合項目,通過人口文件訪問項目的所有功能,步驟如下:
①打開MovieList\app. js文件,在該文件中添加本項目用于實現(xiàn)路由功能的代如下。
/* *路由 **/ var app angular.module('mlist .main', ['ngRoute', "mist.conrollers .moovie Detai1’mlist. controllers . movieList']) ; app.config(function($routeProvider) { $routeProvider //訪問列表頁 .when(' /list/ :category/ :page', { templateUrl: "movie list/list_ template.html", control ler: "MovieListController", }); //訪問詳細頁 .when(' /detail/ :id', { templateUrl: "movie detail/detail template.htm1 ”, controller: "MovieDetailController", }); //默認訪問路徑 .otherwise({ redirectTo: "/list/top250/1" }); });
在上述代碼中,首先創(chuàng)建mlist. main,并在該模塊中注人ngRoute(路由)、mlist.controllers. movieDetail(詳細頁面控制器)和mlist. controllers. movieList(列表頁面控制器)三個模塊。第6~20行代碼用于創(chuàng)建路由;第8行用于匹配訪問列表的路徑;第13行用于匹配詳細頁面的路徑,如果沒有指定路徑,則在第18行重定向到top250列表。
②打開MovieList\index. html文件(該文件作為本項目的人口文件),在該文件中添加整合所有項目功能的代碼如下。
< !DOCTYPE html > < html 1 ang = "en"ng - app = "mlist ·main" > < head > < meta charset - "UTF- 8" > < title > 電影列表 < /title> < link rel = "stylesheet"href = "lib/bootstrap/bootstrap .css" > < /head> < body > < div ng - view > < /div> <!--引入 AngularJS API-- > < script src = "lib/ angular/angular. js" > < /script> < script src - "lib/ angular/ angular- route. js" > < /script> <!--引入路由文件-- > < script src = "app.js" > < /script> <!--引入詳細頁面和列表的控制器--> < script srce "movie detail/detail controller. js" > < /script> < script src = "movie list/list controller.js" > < /script> <!--引人分頁配置文件--> < script src = "config service.js" > < /script> <!--引入Model層服務--> < script src = ”mode1 service.js "></script> <!--引入jsonp服務--> < escript sro "jsonp_service.js></seript> < /body> < /html>
在上述代碼中,首先引人了Bosrp和AngularJS框架的庫文件,然后引入自定文的所有is文件,包括路由、控制器配置文件、服務等。第9行使用ngview指令綁定aiy度,當路由匹配訪問內(nèi)容后,會在這個div中展示相應的頁面模板;例如訪向電影詳情頁rka eplre html的內(nèi)容便會被添加到該div中。至此項目的整合已經(jīng)完成了。
猜你喜歡: