1.用到的技术点
npm 使用npm来进行下载相应的插件和框架
新建项目的文件目录
dist
src
assets
css
js
img
details
details.html
details.js
app.js 主模块，各个从(子)模块会依赖注入到这里
index.html 主页面来进行单页面开发
gulp 来进行代码压缩和优化
2.index.html首页模块，用到的技术点
angular指令
ng-app 设置ng的管理范围 ng-app="moviecat"
ng-view 路由匹配的内容会在这里显示 ng-view
ng-submit submit事件 按enter和button都会触发的事件
模块js的引入
顺序需要注意，需要依赖关系
<!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" ng-controller="searchCtrl"> <a href="#/home_page"><img src="assets/img/logo.png" alt=""></a> <div class="search"> <form ng-submit="query()"> <input class="my-input" type="text" placeholder="电影搜索" ng-model="keyword"> <button>搜索</button> </form> </div> </div> <nav class="nav"> <ul> <!--li中添加 active 类样式，显示焦点状态。--> <li class="active" hm-active><a href="#/home">首页</a></li> <li hm-active><a href="#/in_theaters">正在热映</a></li> <li hm-active><a href="#/coming_soon">即将上映</a></li> <li hm-active><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>
3.app.js是主模块，各个从(子)模块依赖到这里来
1.使用一个自执行函数把全局变量angular传到函数里面
(function(angular){处理业务逻辑})(angular)
2.创建angular模块并起一个名字 跟ng-app="moviecat" 里的值是一样的
var app = angular.module("moviecat",["从模块名称"])
3.动态获取表单的值
视图中 <input class="my-input" type="text" placeholder="电影搜索" ng-model="keyword">
控制器中 $scope.keyword
4.
(function (angular) {
//主模块.
//用来管理ng-app的那个模块就叫做主模块.
//在主模块中写的代码就会直接在html页面上=起作用.
//从模块如果需要起作用,除非被主模块依赖.
var app = angular.module("moviecat", [
"moviecat_home",
"moviecat_details",
"moviecat_movie_list",
"heima"
]);
app.controller("searchCtrl",["$scope","$window",function($scope,$window){
$scope.query = function(){
//将url地址栏的路由改成/
// #/search?q=china
$window.location.hash = "#/search/q="+$scope.keyword;
}
}]);
})(angular);
4.movie_list.js是几个模块结合起来的，用到的功能是
1.创建module模块，并增加模块依赖 ngRoute heima
2.配置路由 需要angular的路由模块的 $routeProvider 方法调用when()方法
路由匹配 "/:type/:page?" 前面 ":"是动态匹配后面的?是有路由就匹配，没有路由匹配可以忽略
通过templateUrl:"./movie_list/movie_list.html"与html建立联系
通过controller:"movie_listController"进行与控制器建立联系
3.服务功能介绍
$scope 服务是存放数据的，可以到html文件中的
$scope.data="石顺麟"
$scope.getPage=function(pageIndex){出来业务逻辑} 在视图中 ng-click="getPage(pageIndex)"
$scope.$apply() 通知视图数据已经发生更改，赶紧刷新页面
$routeParams 服务获取路由动态的值
$window 服务类似全局变量window，
$route 服务是一个路由
$route.updateParams({page:pageindex}) 更改路由参数的值
(function(angular){
//1.创建1个正在热映的模块.
var app = angular.module("moviecat_movie_list",["ngRoute","heima"]);
//2.配置路由
app.config(["$routeProvider",function($routeProvider){
// /in_theaters
// #/in_theaters/3
// #/coming_soon/2
// #/top250/4
// #/details/26270502
// #/search?q=china
$routeProvider.when("/:type/:page?",{
templateUrl:"./movie_list/movie_list.html",
controller:"movie_listController"
});
}]);
app.controller("movie_listController",["$scope","$routeParams","$route","$window","heimaJsonp",function($scope,$routeParams,$route,$window,heimaJsonp){
$scope.isShow = true;
//每一页的容量
$scope.pageSize = 10;
//当前这次要请求第几页的数据.
$scope.pageIndex = ($routeParams.page || "1" ) - 0;
/*
pageIndex start
1 0
2 10 = (pageIndex-1)*pageSize
3 20
4 30
5 40
*/
heimaJsonp.jsonp({
url:"http://api.douban.com/v2/movie/"+$routeParams.type,
//http://api.douban.com/v2/movie/search?q=china&count=20&strat=0
params:{
count:$scope.pageSize,//20
start:($scope.pageIndex-1)*$scope.pageSize,//0
q:$routeParams.q
//http://api.douban.com/v2/movie/in_theaters?count=10&start=10&q=undefine
},
callback:function(data){
$scope.movies = data;
console.log(data);
//总页数.
$scope.pageCount = $window.Math.ceil((data.total/$scope.pageSize));
$scope.isShow = false;
$scope.$apply();//通知视图数据模型已经发生变化.赶紧刷新视图.
}
});
//请求指定页码的数据.
$scope.getPage = function(pageIndex){
//2 $route.updateParams({ page: pageIndex });
//先判断页码是否合法.
//10 1 10 0 5
//>0 && <= 总页码
if(pageIndex < 1 || pageIndex > $scope.pageCount) return;
$route.updateParams({
page:pageIndex
});
};
/*
1. 实现分页
1.1 如何向api发送分页的请求.
参数1: count 代表希望服务器返回的电影的数量.
参数2: start 从第几部开始给.
count=5&start=10
1.2 页码通过路由参数来传递
修改路由的匹配规则.
/in_theaters/:page
在控制器中就可以拿到page参数.
就可以根据页码和页容量发起请求.
1.3 上一页和下一页的切换.
调用同1个方法 getPage(pageIndex+1)
我们通过$route服务
updateParams方法修改路由参数.
{page:3}
*/
}]);
})(angular);
5.自定义跨域服务
1.创建一个模块，模块里面新建一个自定义服务，服务里面有一个jsonp函数
2.jsonp里面思路是拼接url并随机生成函数名，创建script标签并给src赋值，并追加到body标签中
3.调用自己的自定义的服务看上面
先在angular.module()模块引入，在app.controller()中注入里面的服务，调用服务里面的jsonp函数
(function(angular){
var app = angular.module("heima",[]);
app.service("heimaJsonp",["$window",function($window){
this.jsonp = function(opts){
//1 拼接url
var url = opts.url += "?";
for(var key in opts.params){
url += (key + "=" + opts.params[key] + "&");
}
// 生成随机的函数名
// Math
var callbackName = "jsonp_"+ $window.Math.random().toString().slice(2);
$window[callbackName] = opts.callback;
url += "callback="+callbackName
//2.创建script标签.
var script = $window.document.createElement("script");
script.src = url;
$window.document.body.appendChild(script);
}
}]);
app.directive("hmActive",[function(){
return {
restrict:"A",
link:function(scope,elemnt,attrs){
elemnt.on("click",function(){
elemnt.parent().children().removeClass("active");
elemnt.addClass("active");
});
}
};
}]);
})(angular);
6.通过gulp打包工具压缩代码，清除注释
1.使用node下载相应的第三方包
下载gulp npm install gulp --save
下载压缩css npm install gulp-cssmin --save
下载压缩js npm install gulp-uglify --save
下载合并js npm install gulp-concat --save
下载压缩html npm install gulp-htmlmin --save
2.引入下载的第三方包，通过require()方法来引入
3.创建任务压缩css代码
gulp.task("yscss",function(){gupl.src(想压缩文件).pipe(引入的js函数).pipe(gulp.dest(压缩到哪里))})
在cmd中运行gulp gulp yscss 来进行压缩css代码
//1. 引入gulp
var gulp = require("gulp");
//2. 引入压缩css的模块.
var cssmin = require("gulp-cssmin");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var htmlmin = require("gulp-htmlmin");
//2.创建任务.
gulp.task("testTask", function () {
console.log("这是1个新的任务！");
});
//3.创建任务 压缩css代码
gulp.task("yscss", function () {
gulp.src("./src/**/*.css")
.pipe(cssmin())
.pipe(gulp.dest("./dist"));
});
//4.压缩js代码
gulp.task("ysjs", function () {
gulp.src(["./dist/assets/js/all.js"])
.pipe(uglify())
.pipe(gulp.dest("./dist/assets/js"));
})
//5. 压缩html
gulp.task("yshtml", function () {
gulp.src("./src/**/*.html")
.pipe(htmlmin({
removeEmptyAttributes: true,
collapseWhitespace: true,
removeComments: true,
}))
.pipe(gulp.dest("./dist"));
});