前端-06-AngularJs
2020-09-10 本文已影响0人
西海岸虎皮猫大人
1.概述
完美实现mvvm mvw模式
模块化结构
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.js"></script>
</head>
<body>
<h1>输入的内容是: {{ msg }}</h1>
<input type="text" ng-model="msg" placeholder="请输入内容">
<script>
/*
* google出品
* mvw设计模式,模块化,双向数据绑定,依赖注入
* 克服html天生不足
* 原生js无论是onchange或者onkeyup都无法实现数据实时绑定
*/
</script>
</body>
</html>
2.语法基础
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>angularjs语法基础</title>
<script src="js/angular.js"></script>
</head>
<body ng-init="msg='hello world'">
<h1>输入的内容是: {{ msg }}</h1>
<input type="text" ng-model="msg" placeholder="请输入内容">
内容: <span ng-bind="msg"></span>
<script>
// 1.边界指令 ng-app
// 告知框架在哪个范围内生效,习惯写在html标签内
// 2.呈现指令 {{}}
// 可以写ng语法规则的变量 字符串 表达式
// 禁止赋值
// 3.信息指令 ng-model
// 绑定input或textarea
// 4.绑定指令 ng-bind
// 配合ng-model使用,非输入性便签内容显示
// 5.初始化指令 ng-init
// 不常用,对边界内部数据模型(ng变量)初始化
// 习惯放在body上
</script>
</body>
</html>
3.控制器
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<title ng-bind="pageTitle"></title>
<script src="js/angular.js"></script>
</head>
<body>
<h1 ng-bind="msg"></h1>
<span>{{ msg }}</span>
<ul>
<!--track 重复元素处理-->
<li ng-repeat="pname in names track by $index">{{ pname }}</li>
</ul>
<div ng-repeat="info in bookInfos track by $index">
<p>{{ info.name }}</p>
<p>{{ info.author }}</p>
</div>
<script>
// 1.angular.module()方法
// 生成页面数据模型
// 目前不涉及注入,空置即可
// 等价document的作用,页面模型的抽象
var app = angular.module('app', []);
console.log(app);
// 2.声明控制器 ng-controller
// 声明页面哪一个元素为控制器
// 操作数据和视图
// 声明了控制器必须写脚本
// 3.控制器方法 controller()
// 生成页面控制器
// 控制器将脚本分为模块
app.controller('mainController', ['$scope', function ($scope) {
// 设置标题
$scope.pageTitle = 'angular控制器';
$scope.msg = 'hello angular';
// 遍历数据
$scope.names = ['zhangsan', 'lisi', 'wangwu', 'zhangsan'];
// 遍历复杂数据
$scope.bookInfos = [
{name: 'js入门', author: 'vincent'},
{name: 'angular入门', author: 'lili'}
];
}]);
// 4.遍历指令 ng-repeat
// 页面开发尽量不用循环结构
</script>
</body>
</html>
4.事件监听
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<title ng-bind="mainTitle"></title>
<script src="js/angular.js"></script>
</head>
<body>
<!--<button ng-click="func()">点击</button>-->
<p ng-show="showFlag">{{ msg }}</p>
<button ng-click="clickHandler()">点击</button>
<ul>
<li ng-click="li_click($index)" ng-repeat="li_info in li_infos track by $index">{{li_info}}</li>
</ul>
<script>
var app = angular.module('app', []);
// 1.事件监听 ng-事件名
// 回调在controller中通过$scope实现
/* app.controller('mainController', ['$scope', function ($scope) {
$scope.mainTitle = '事件监听';
$scope.func = function () {
console.log('click');
};
}]);*/
app.controller('mainController', ['$scope', function ($scope) {
$scope.mainTitle = '事件监听';
// 默认显示
$scope.showFlag = true;
$scope.msg = 'test msg';
$scope.clickHandler = function () {
console.log('clickHandler');
// 点击隐藏
$scope.showFlag = !$scope.showFlag;
};
$scope.li_infos = ['宝马', '奔驰', '保时捷'];
$scope.li_click = function (index) {
console.log('点击内容是:' + $scope.li_infos[index]);
}
}]);
</script>
</body>
</html>
5.评论案例
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<title>评论案例</title>
<script src="js/angular.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<br><br><br>
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<!--评论模块-->
<div class="input-group">
<input type="text" class="form-control" ng-model="cmt">
<span class="input-group-btn">
<button class="btn btn-primary" ng-click="submitComment(cmt)">评论</button>
</span>
</div>
<!--评论标题-->
<!--有评论显示,无评论不显示-->
<h1 ng-show="commentArr.length>0"></h1>
<!--评论内容-->
<ul class="list-group">
<li class="list-group-item" ng-repeat="comment in commentArr track by $index">
<span>{{ comment }}</span>
<!--禁止调转-->
<a href="javascript:;" class="btn btn-link" ng-click="deleteComment($index)">删除</a>
</li>
</ul>
</div>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller('mainController', ['$scope', function ($scope) {
$scope.commentArr = ['评论1', '评论2', '评论3'];
$scope.submitComment = function (cmt) {
$scope.commentArr.push(cmt);
$scope.cmt = '';
};
$scope.deleteComment = function (index) {
$scope.commentArr.splice(index, 1);
};
}]);
</script>
</body>
</html>
6.模块化
/js/apps/controllers/mainController.js
app.controller('mainController', ['$scope', function ($scope) {
$scope.mainTitle= '模块化思想';
}]);
js/apps/controllers/commentController.js
// 评论控制器
app.controller('commentController', ['$scope', function ($scope) {
$scope.commentArr = ['评论1', '评论2', '评论3'];
$scope.submitComment = function (cmt) {
$scope.commentArr.push(cmt);
$scope.cmt = '';
};
$scope.deleteComment = function (index) {
$scope.commentArr.splice(index, 1);
};
}]);
js/apps/controllers/namelistController.js
// 姓名列表控制器
app.controller('namelistController', ['$scope', function ($scope) {
$scope.liInfos = ['lili', 'lucy', 'vincent'];
}]);
js/apps/app.js
var app = angular.module('app', []);
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<title ng-bind="mainTitle">模块化思想</title>
<!--
写在相同模块中不利于协同开发 -> 划分模块
对初学者不友好
-->
<link rel="stylesheet" href="css/libs/bootstrap.min.css">
<script src="js/libs/angular.js"></script>
<script src="js/apps/app.js"></script>
<script src="js/apps/controllers/commentController.js"></script>
<script src="js/apps/controllers/namelistController.js"></script>
<script src="js/apps/controllers/mainController.js"></script>
</head>
<body>
<br><br><br>
<div class="container" ng-controller="commentController">
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<!--评论模块-->
<div class="input-group">
<input type="text" class="form-control" ng-model="cmt">
<span class="input-group-btn">
<button class="btn btn-primary" ng-click="submitComment(cmt)">评论</button>
</span>
</div>
<!--评论标题-->
<!--有评论显示,无评论不显示-->
<h1 ng-show="commentArr.length>0"></h1>
<!--评论内容-->
<ul class="list-group">
<li class="list-group-item" ng-repeat="comment in commentArr track by $index">
<span>{{ comment }}</span>
<!--禁止调转-->
<a href="javascript:;" class="btn btn-link" ng-click="deleteComment($index)">删除</a>
</li>
</ul>
</div>
</div>
</div>
<!--展示姓名-->
<ul ng-controller="namelistController">
<li ng-repeat="liInfo in liInfos track by $index">{{liInfo}}</li>
</ul>
</body>
</html>
7.路由
应用只有一个页面,在不切换页面加载不同页面效果
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<title>路由</title>
<script src="js/libs/angular.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<link rel="stylesheet" href="css/libs/bootstrap.min.css">
</head>
<body>
<ul>
<li><a href="#showname">姓名列表展示</a></li>
<li><a href="#showinfo">信息</a></li>
</ul>
<div style="width: 300px; height: 300px; border: 1px solid;" ng-view></div>
<script>
// router功能依赖于angular-route.min.js
// ng-view指令, 标注不同页面的容器
// router功能依赖于a便签href属性
// 通过app页面数据模型构建, config语法构建,
// when() 加载哪一页面
// otherwise() 默认加载哪个页面
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/showname', {
templateUrl: 'showname.html',
controller: 'namelistController'
})
.when('/showinfo',{
templateUrl: 'showinfo.html',
controller: 'showInfoController'
})
.otherwise({
redirectTo: '/showname'
});
}]);
app.controller('mainController', ['$scope', function ($scope) {
}]);
// 姓名列表控制器
app.controller('namelistController', ['$scope', function ($scope) {
$scope.liInfos = ['lili', 'lucy', 'vincent'];
}]);
app.controller('showInfoController', ['$scope', function ($scope){
$scope.infos = [
{ username:'frank', password:'123456' },
{ username:'zoe', password:'654321' }
];
}]);
</script>
</body>
</html>
showinfo.html
<div ng-controller="showInfoController">
<div ng-repeat="info in infos track by $index">
<h2>{{ info.username }}</h2>
<p>{{ info.password }}</p>
</div>
</div>
showname.html
<!--展示姓名-->
<ul ng-controller="namelistController">
<li ng-repeat="liInfo in liInfos track by $index">{{liInfo}}</li>
</ul>
8.网络服务
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<title>{{mainControllerTitle}}</title>
<link rel="stylesheet" href="css/libs/bootstrap.min.css">
<link rel="stylesheet" href="css/apps/index.css">
</head>
<body>
<img ng-src="{{ imgSrc }}" alt="">
<script src="js/libs/angular.js"></script>
<script>
/*
* 服务用于不同controller沟通
* $http-网络服务
* 系统服务都带$前缀,自定义服务都不带
* angular框架请求来的imgsrc和a标签的href需要加ng前缀
*/
var app = angular.module('app',[]);
app.controller('mainController', ['$scope', '$http', function ($scope, $http) {
$scope.mainControllerTitle = '服务概述与系统服务';
// 测试get请求
/* $http({
// 习惯大写
method: 'GET',
url: 'index.php'
}).success(function (data) {
console.log(data);
$scope.imgSrc = data.imgSrc;
}).error(function (err) {
console.log(err);
});*/
// 测试post请求
$http({
method: 'POST',
url: 'index.php',
// post请求需要加headers
headers: {
// 默认 multipart/form-data(表单数据方式)
// application/json json方式,不生效
'Content-Type': 'application/x-www-form-unlencoded'
},
data: 'username=frank&password=123'
}).success(function (data) {
// TODO 没返回数据
console.log(data);
}).error(function (err) {
console.log(err);
});;
}]);
</script>
</body>
</html>
9.过滤服务
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<title>{{mainControllerTitle}}</title>
<link rel="stylesheet" href="css/libs/bootstrap.min.css">
<link rel="stylesheet" href="css/apps/index.css">
</head>
<body>
<!--currency-->
<span>手机价格: </span>
<span>{{5799 | currency:'¥'}}</span>
<!--filter-->
<input type="text" ng-model="filter_input">
<ul>
<!--TODO-->
<li ng-repeat="pname in pnames track by $index | filter:filter_input">{{pname}}</li>
</ul>
<!--uppercase lowercase-->
<h2>{{'hello WORLD 你好世界' | uppercase}}</h2>
<h2>{{'hello WORLD 你好世界' | lowercase}}</h2>
<!--order by TODO-->
<ul>
<li ng-repeat="info in infos | orderBy: 'username'">{{info.username + ',' +info.score}}</li>
</ul>
<!--加后缀-->
<p>{{famousPhase|surfix}}</p>
<script src="js/libs/angular.js"></script>
<script>
/*
* 过滤服务$filter,数据转换
* 语法:{{任意内容 | 过滤器}}
* 支持自定义服务
* 1.currency 货币符号,将内容转换为货币,默认美元,支持定制
* 2.filter 子集数组,从数组选项中筛选出符合要求的子集
* 3.uppercase lowercase 大小写转换
* 4.orderby 排序,根据表达式内容,一般用于复杂ng-repeat结构
*
* 自定义过滤服务
* 通过filter方法扩展即可
*/
var app = angular.module('app',[]);
// 自定义过滤器
app.filter('surfix', function () {
return function (text) {
return text.concat('--by Vincent');
}
});
app.controller('mainController', ['$scope','$filter', function ($scope, $filter) {
$scope.mainControllerTitle = '过滤服务';
$scope.filter_input = '';
$scope.pnames = ['lili', 'lisa', 'lcisi', 'lcibai', 'lilei'];
$scope.infos = [
{
username: 'zhangsan',
score: '60'
},
{
username: 'lisi',
score: '10'
},
{
username: 'wangwu',
score: '100'
}
];
$scope.famousPhase = '吃饱不饿';
}]);
</script>
</body>
</html>
10.时间轴服务
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<title>{{mainControllerTitle}}</title>
<link rel="stylesheet" href="css/libs/bootstrap.min.css">
<link rel="stylesheet" href="css/apps/index.css">
</head>
<body>
<p>{{num}}</p>
<script src="js/libs/angular.js"></script>
<script>
/*
* 时间轴服务
* 间隔 延迟 清除
*/
var app = angular.module('app',[]);
app.controller('mainController', ['$scope','$interval','$timeout', function ($scope, $interval, $timeout) {
$scope.mainControllerTitle = '时间轴服务';
$scope.num = 0;
// 测试间隔
var timer = null;
timer = $interval(function () {
if($scope.num >= 10) {
// 清除定时器
$interval.cancel(timer);
} else {
$scope.num++;
}
}, 1000);
// 测试延迟
var timeout = null;
timeout = $timeout(function () {
alert('输出完毕');
}, 2000);
}]);
</script>
</body>
</html>
11.监听服务
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<title>{{mainControllerTitle}}</title>
<link rel="stylesheet" href="css/libs/bootstrap.min.css">
<link rel="stylesheet" href="css/apps/index.css">
</head>
<body>
<input type="text" ng-model="myInput">
<script src="js/libs/angular.js"></script>
<script>
/*
* 监听服务 watch
* 不需要注入,监听任何ng变量,并在值变化时回调
*/
var app = angular.module('app',[]);
app.controller('mainController', ['$scope', function ($scope) {
$scope.mainControllerTitle = '监听服务';
// angular表达式或字符串 回调函数
$scope.myInput = '';
$scope.$watch('myInput', function () {
console.log('监听到myInput发生变化:' + $scope.myInput);
});
}]);
</script>
</body>
</html>
12.五种自定义服务
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<title>{{mainControllerTitle}}</title>
<link rel="stylesheet" href="css/libs/bootstrap.min.css">
<link rel="stylesheet" href="css/apps/index.css">
</head>
<body>
<!--{{msg}}-->
<div class="div1" ng-controller="controller1">
<input type="text" ng-model="msg">
<button ng-click="submit(msg)">保存</button>
</div>
<div class="div2" ng-controller="controller2">
<p ng-bind="showMsg"></p>
<button ng-click="download()">加载</button>
</div>
<script src="js/libs/angular.js"></script>
<script>
/*
* 自定义服务
* 服务是对app数据模型的扩展,可以理解为服务即全局变量
* 自定义服务需要手动编辑,需要注入后使用
*
* 五种方式
* 1.value服务
* value()方法扩展app数据模型,在controller之间数据交换
* value服务就是一个全局变量
*
* 2.constant服务
* 一旦定制完成,注入使用之前不能修改,多次定制只第一个生效
*
* 3.factory服务
* 借鉴了工厂模式
* factory()方法创建object结构并直接返回
* 通过函数创建对象可以对对象操作扩充
*
* 4.service服务
* 相当于本身已经构建了对象,服务内部通过this.操作
* 1-4 注入之后才生效,注入前相当于不存在
*
* 5.provider服务
* 占内存
*
* 目的都是提供一个全局变量,支持controller交流
*/
var app = angular.module('app',[]);
// 1.使用自定义服务传递变量
/* app.value('VincentService', {
pname: 'vincent'
});
app.controller('mainController', ['$scope', 'VincentService', function ($scope, VincentService) {
$scope.mainControllerTitle = '自定义服务';
$scope.msg = VincentService.pname;
}]);*/
// 2.contoller间传递变量
/* app.controller('mainController', ['$scope', function ($scope) {
$scope.mainControllerTitle = '自定义服务';
}]);
app.controller('controller1', ['$scope','globalObj', function ($scope, globalObj) {
$scope.msg = '';
$scope.submit = function (tempMsg) {
// 向全局变量存入msg
globalObj.inputMsg = tempMsg;
// 此种方式无法传递
// $scope.showMsg = globalObj.inputMsg;
}
}]);
app.controller('controller2', ['$scope','globalObj', function ($scope, globalObj) {
$scope.download = function () {
// 从全局变量中读取
$scope.showMsg = globalObj.inputMsg;
}
}]);
app.value('globalObj', {
});*/
// 3.constant服务
/* app.controller('mainController', ['$scope', function ($scope) {
$scope.mainControllerTitle = '自定义服务';
}]);
app.controller('controller1', ['$scope','globalObj', function ($scope, globalObj) {
$scope.msg = '';
$scope.submit = function (tempMsg) {
// 向全局变量存入msg
globalObj.inputMsg = tempMsg;
// 此种方式无法传递
// $scope.showMsg = globalObj.inputMsg;
}
}]);
app.controller('controller2', ['$scope','globalObj', function ($scope, globalObj) {
$scope.download = function () {
globalObj.inputMsg = 'lilei';
// 从全局变量中读取
$scope.showMsg = globalObj.inputMsg;
}
}]);
app.constant('globalObj', {
});
// 不能重复定制
app.constant('globalObj', {
inputMsg: 'hello world'
});*/
// 3.factory服务
/* app.controller('mainController', ['$scope', function ($scope) {
$scope.mainControllerTitle = '自定义服务';
}]);
app.controller('controller1', ['$scope','globalObj', function ($scope, globalObj) {
$scope.msg = '';
$scope.submit = function (tempMsg) {
// 向全局变量存入msg
globalObj.inputMsg = tempMsg;
// 此种方式无法传递
// $scope.showMsg = globalObj.inputMsg;
}
}]);
app.controller('controller2', ['$scope','globalObj', function ($scope, globalObj) {
$scope.download = function () {
// 从全局变量中读取
$scope.showMsg = globalObj.inputMsg;
}
}]);
app.factory('globalObj', function (){
var obj = {};
// 可以变更对象(函数调用 计算等)
obj.showMsg = 'hello world';
return obj;
});*/
// 4.service服务
/*app.controller('mainController', ['$scope', function ($scope) {
$scope.mainControllerTitle = '自定义服务';
}]);
app.controller('controller1', ['$scope','globalObj', function ($scope, globalObj) {
$scope.msg = '';
$scope.submit = function (tempMsg) {
// 向全局变量存入msg
globalObj.inputMsg = tempMsg;
// 此种方式无法传递
// $scope.showMsg = globalObj.inputMsg;
globalObj.setSecret('修改秘密');
}
}]);
app.controller('controller2', ['$scope','globalObj', function ($scope, globalObj) {
$scope.download = function () {
// 从全局变量中读取
$scope.showMsg = globalObj.inputMsg;
console.log(globalObj.getSecret());
}
}]);
app.service('globalObj', function (){
// 可以认为是构造函数
this.showMsg = 'hello world';
// 私有条目
var secret = '这是一个秘密';
// 特权函数暴露私有条目
this.getSecret = function () {
return secret;
}
// 设置私有条目
this.setSecret = function (tempSecret) {
secret = tempSecret;
}
});*/
// 5.provider服务
app.controller('mainController', ['$scope', function ($scope) {
$scope.mainControllerTitle = '自定义服务';
}]);
app.controller('controller1', ['$scope','globalObj', function ($scope, globalObj) {
$scope.msg = '';
$scope.submit = function (tempMsg) {
}
}]);
app.controller('controller2', ['$scope','globalObj', function ($scope, globalObj) {
$scope.download = function () {
// 从全局变量中读取
$scope.showMsg = globalObj.inputMsg;
}
}]);
// 不注入也会占内存
app.provider('globalObj', function (){
this.$get = function () {
var obj = {};
obj.inputMsg = 'hello world';
return obj;
}
});
</script>
</body>
</html>
13.自定义指令
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<title>{{mainControllerTitle}}</title>
</head>
<body>
<!--<vincentbtn></vincentbtn>-->
<!--<div vincentbtn></div>-->
<!--<div class="vincentbtn"></div>-->
<!-- directive:vincentbtn -->
<script src="js/libs/angular.js"></script>
<script>
/*
* 自定义指令-实现组件复用
* 指令可以理解为属性,使页面元素有了半身之外的特殊功能
* 自定义指令更像创建了一个组件
* 通过app.directive()创建
* 1.restrict指令类型,何种形式唤醒,A-属性 E-元素 C-类名 M-注释
* 指令名称必须小写
* 如果是M类型,replace字段必须设置为true
* 如果通过template加载,有且只有一个根节点
* 2.template指令结构,指令在页面中能够显示的html结构
* 如果从外部加载指令结构,需要写成templateUrl
* 3.replace指令复写
* 指令在当前页面存在时,是否当成子元素或者替换当前元素
*/
var app = angular.module('app',[]);
// 名称小写
app.directive('vincentbtn', function () {
return {
restrict: 'AECM',
template: '<div><button>vincent自定义按钮</button></div>',
// 一般都是true
replace: true
}
});
app.controller('mainController', ['$scope', function ($scope) {
$scope.mainControllerTitle = '自定义指令';
}]);
</script>
</body>
</html>
