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

目前互聯(lián)網(wǎng)上有很多視頻網(wǎng)站在完善的技術(shù)平臺支持下提供電影及電視劇資料庫,如豆瓣、優(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",
                    });
                //訪問詳細(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(列表頁面控制器)三個模塊。第6~20行代碼用于創(chuàng)建路由;第8行用于匹配訪問列表的路徑;第13行用于匹配詳細(xì)頁面的路徑，如果沒有指定路徑,則在第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>
    <!--引入詳細(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)容后，會在這個div中展示相應(yīng)的頁面模板;例如訪向電影詳情頁rka eplre html的內(nèi)容便會被添加到該div中。至此項目的整合已經(jīng)完成了。

猜你喜歡：

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

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

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

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