首頁技術(shù)文章正文

整合項(xiàng)目和路由功能的開發(fā)【APP開發(fā)實(shí)戰(zhàn)項(xiàng)目】

更新時(shí)間:2021-03-01 來源:黑馬程序員 瀏覽量:

目前互聯(lián)網(wǎng)上有很多視頻網(wǎng)站在完善的技術(shù)平臺支持下提供電影及電視劇資料庫,如豆瓣、優(yōu)酷等,它們在網(wǎng)站的首頁通常會(huì)展示節(jié)目的列表。本文將要完成電影訪問列表的路由功能并整合項(xiàng)目,通過人口文件訪問項(xiàng)目的所有功能,步驟如下:

①打開MovieList\app. js文件,在該文件中添加本項(xiàng)目用于實(shí)現(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",
                    });
                //訪問詳細(xì)頁
                .when(' /detail/ :id', {
                    templateUrl: "movie detail/detail template.htm1 ”,
                    controller: "MovieDetailController",
                });
                //默認(rèn)訪問路徑
                .otherwise({
                    redirectTo: "/list/top250/1"
                });
            });


在上述代碼中,首先創(chuàng)建mlist. main,并在該模塊中注人ngRoute(路由)、mlist.controllers. movieDetail(詳細(xì)頁面控制器)和mlist. controllers. movieList(列表頁面控制器)三個(gè)模塊。第6~20行代碼用于創(chuàng)建路由;第8行用于匹配訪問列表的路徑;第13行用于匹配詳細(xì)頁面的路徑,如果沒有指定路徑,則在第18行重定向到top250列表。

 1614923420281_電影列表的路由功能.jpg

②打開MovieList\index. html文件(該文件作為本項(xiàng)目的人口文件),在該文件中添加整合所有項(xiàng)目功能的代碼如下。

< !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>
    <!--引入詳細(xì)頁面和列表的控制器-->
    < script srce "movie detail/detail controller. js" > < /script> 
    < script src = "movie list/list controller.js" > 
    < /script>
    <!--引人分頁配置文件-->
    < script src = "config service.js" > < /script>
    <!--引入Model層服務(wù)-->
    < script src = ”mode1 service.js "></script>
    <!--引入jsonp服務(wù)-->
    < escript sro "jsonp_service.js></seript> < /body> < /html>


在上述代碼中,首先引人了Bosrp和AngularJS框架的庫文件,然后引入自定文的所有is文件,包括路由、控制器配置文件、服務(wù)等。第9行使用ngview指令綁定aiy度,當(dāng)路由匹配訪問內(nèi)容后,會(huì)在這個(gè)div中展示相應(yīng)的頁面模板;例如訪向電影詳情頁rka eplre html的內(nèi)容便會(huì)被添加到該div中。至此項(xiàng)目的整合已經(jīng)完成了。




猜你喜歡:

網(wǎng)頁前端開發(fā)工具有哪些?

Python 有序列表標(biāo)簽的基本屬性簡介【前端web文章】

前端面試題:兼容性面試題匯總【最新】

黑馬程序員web前端工程師培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!