整合项目和路由功能的开发【APP开发实战项目】

目前互联网上有很多视频网站在完善的技术平台支持下提供电影及电视剧资料库,如豆瓣、优酷等，它们在网站的首页通常会展示节目的列表。本文将要完成电影访问列表的路由功能并整合项目，通过人口文件访问项目的所有功能，步骤如下：

①打开MovieList\app. js文件，在该文件中添加本项目用于实现路由功能的代如下。

/*
 
 *路由
 
 **/
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"
                });
            });

在上述代码中，首先创建mlist. main,并在该模块中注人ngRoute(路由)、mlist.controllers. movieDetail(详细页面控制器)和mlist. controllers. movieList(列表页面控制器)三个模块。第6~20行代码用于创建路由;第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度，当路由匹配访问内容后，会在这个div中展示相应的页面模板;例如访向电影详情页rka eplre html的内容便会被添加到该div中。至此项目的整合已经完成了。

猜你喜欢：

网页前端开发工具有哪些？

Python 有序列表标签的基本属性简介【前端web文章】

前端面试题：兼容性面试题汇总【最新】

黑马程序员web前端工程师培训