一、基本指令
提供一些基本的语法来去书写并运行Angular项目。
1、angularJS基本语法
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset='utf-8'/>
<title>angularJS基本语法</title>
<script src='../../js/angular.js'></script>
</head>
<body>
<input type="text" ng-model='msg' placeholder='请输入内容'>
<h1>输入的内容是:{{msg}}</h1>
<script>
/*
1.AngularJS框架
描述：AngularJS框架诞生于2009年，由google公司提出
特点：AngularJS的核心特点是MVC的设计模式，支持模块化和双向数据绑定
以及依赖注入。
由来：AngularJS框架时为了克服html语言在构建App上天生的不足而设计的
2.AngularJS整体感知
描述：AngularJS框架的内容非常庞大，涉及到WEB应用架构的各个方面
我们在这里学习AngularJS的1.0版本目的主要是为了改变我们的思想
例子：快速实现mvc设计模式(数据模块与页面与用户之间的沟通)
*/
</script>
</body>
</html>
2、angularJS基本指令
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset='utf-8'/>
<title>angularJS基本指令</title>
<script src='../../js/angular.js'></script>
</head>
<body ng-init='message="hello AngularJS"'>
<input type="text" ng-model='message'>
<br/>
<!-- 内容：{{message}} -->
<br/>
<!-- 内容：<span>{{message}}</span> -->
内容：<span ng-bind='message'></span>
<script>
/*
1.边界指令ng-app
描述：AngularJS框架在使用的时候除了需要引入框架文件之外，还需要为框架指明一个边界
告知框架在哪个范围内生效。如果不使用边界指令进行声明，则AngularJS框架引入失败。
习惯上写在html标签之内，表示在当前页面中angularJS都能正常使用
语法：<html ng-app></html>
注意：边界指令是使用NG框架必须使用的一个指令，不写一定使用错误
2.呈现指令{{}}
描述：NG框架规定{{}}嵌套双花括号用来表示【内容呈现】功能
在{{}}中可以书写NG语法规则下的变量、字符串甚至表达式
说明：在上节课例子中{{msg}}，
就是使用了呈现指令，将NG变量msg中的内容呈现出来
强调：呈现指令内只能书写合乎NG语法规则的内容，
任何不符合的输入都不能保证最终的呈现结果
这种写法坚决禁止：{{var num = 1;}}
3.信息指令ng-model
描述：NG框架规定ng-model用来对input或textarea这类
用于收集用户信息的标签进行数据绑定
ng-model所赋的值，即为【保存有用户输入内容的NG变量】
语法：<textarea ... ng-model='userInfo'></textarea>
4.绑定指令ng-bind
描述：NG框架中提供了一个用于对非输入性的标签使用的
类似于{{}}呈现指令的辅助指令
即为ng-bind
作用是能够将NG变量绑定到想要显示的标签之上，
并且在NG框架加载失败的时候，也不会直接将语法错误暴露出来
语法：<span ng-bind='message'><span>
5.初始化指令ng-init
描述：NG框架中规定使用本指令来对边界内部的数据模型(NG变量们)进行初始化操作
ng-init并没有规定具体的必须摆放位置，但习惯上放在body上
会在页面加载后，自动对内部规定的数据模型进行初始化操作
语法：<body ng-init='message="hello AngularJS"'></body>
*/
</script>
</body>
</html>
3、控制器原理讲解
<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head>
<meta charset='utf-8'/>
<!-- <title>控制器</title> -->
<title ng-bind='pageTitle'></title>
<script src='../../js/angular.js'></script>
</head>
<body>
<h1 ng-bind='msg'></h1>
<span>{{msg}}</span>
<ul>
<li ng-repeat='pname in names track by $index'>{{pname}}</li>
</ul>
<div ng-repeat='info in bookInfos track by $index'>
<p>书名：{{info.bookName}}</p>
<p>作者：{{info.author}}</p>
</div>
<script>
//页面数据模型
var app = angular.module('app', []);
//实现html标签的控制器
app.controller('mainController', ['$scope', function ($scope){
$scope.pageTitle = '控制器讲解';
/*...收到了后台返回的数据*/
$scope.msg = '天气不错！！';
//
$scope.names = ['frank','lily','lucy','hanMeiMei','frank'];
$scope.bookInfos = [
{bookName:'js入门', author:'frank'},
{bookName:'js精通', author:'frank'}
];
}]);
/*
1.angular.module()方法
描述：本方法是NG框架中提供，用来生成【页面数据模型】的方法
语法：var 模型名称 = angular.module('边界名称', [注入信息])
说明：因为现在还没有涉及到注入内容，因此暂时空置即可
例子：var myApp_module = angular.module('app', []);
2.声明控制器指令ng-controller
描述：本指令用来在页面中声明哪一个元素为控制器
控制器，就是用来操作数据和视图的部件。
语法：<html ng-controller='mainController'>...</html>
注意：只要声明一个标签拥有控制器，这个控制器在脚本中就必须写出！！
3.实现控制器方法*.controller()
描述：本方法是NG框架在script脚本中提供，用来生成【页面控制器】的方法
语法：页面数据模型名称.controller('控制器名称'，['$scope', function ($scope){...}]);
例子：app.controller('mainController', ['$scope', function ($scope){...}]);
4.遍历指令ng-repeat
描述：本指令用来遍历NG变量，并根据其进行构建页面html元素
语法：<E ng-repeat='任意变量名 in NG变量 track by $index'>{{任意变量名}}</E>
说明：track by $index 表示允许有重复内容存在，如果不写出现重复内容会报错
例子：<li ng-repeat='pname in names track by $index'>{{pname}}</li>
补充：ng-repeat指令必须在controller中对NG变量赋值之后才会生效
单独的ng-repeat毫无用处，因为NG变量不存在，没法赋值。
*/
</script>
</body>
</html>
4、事件监听机制
<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head>
<meta charset='utf-8'/>
<title ng-bind='mainTitle'></title>
</head>
<body>
<p ng-show='showFlag'>{{msg}}</p>
<button ng-click='clickHandler()'>测试按钮</button>
<ul>
<li ng-repeat='li_info in li_infos track by $index' ng-click='li_click($index)'>{{li_info}}</li>
</ul>
<script src='../../js/angular.js'></script>
<script>
var app = angular.module('app', []);
app.controller('mainController', ['$scope', function ($scope){
$scope.mainTitle = '事件监听';
$scope.showFlag = true;//默认显示
$scope.msg = 'here is a test msg';
$scope.clickHandler = function (){
$scope.showFlag = !$scope.showFlag;
};
$scope.li_infos = ['金嗓子喉宝','感康胶囊','复方对乙烯氨基酚片'];
$scope.li_click = function (index){
console.log('点击的li的内容是：'+$scope.li_infos[index]);
};
}]);
/*
1.事件监听
描述：NG框架中通过对元素标签添加【ng-事件名】指令，来对元素添加事件监听
而事件监听的回调函数需要在controller中，通过$scope来实现
说明：整个过程类似html事件
语法：<E ng-事件名称='回调函数名(NG变量)'></E>
...
$scope.回调函数名 = function (形参){
//在函数中形参就是传入的NG变量的值
};
...
例子：
<button ng-click='func()'>点我调用controller中的函数</button>
app.controller('mainController', ['$scope', function ($scope){
$scope.mainTitle = 'lesson4_事件监听';
$scope.func = function (){
console.log('here is a func');
};
}]);
*/
</script>
</body>
</html>
5、案例：评论
<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head>
<meta charset='utf-8'/>
<title>简答的评论案例</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<br/><br/><br/>
<div class="container">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<!-- 评论模块 -->
<div class="input-group">
<input type="text" class="form-control" ng-model='comt'>
<span class='input-group-btn'>
<button class="btn btn-primary" ng-click='submitComment(comt)'>评论</button>
</span>
</div>
<!-- 评论标题 -->
<h2 ng-show='commentArr.length>0'>评论</h2>
<!-- 评论内容 -->
<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 class="col-xs-3"></div>
</div>
</div>
<script src='../../js/angular.js'></script>
<script>
var app = angular.module('app', []);
app.controller('mainController', ['$scope', function ($scope){
$scope.commentArr = [];
//评论功能
$scope.submitComment = function (comt){
$scope.commentArr.push(comt);
$scope.comt = '';
};
//删除评论
$scope.deleteComment = function (index){
$scope.commentArr.splice(index, 1);
};
}]);
</script>
</body>
</html>
6、多控制器思想与模块化编程架构
整体架构概览和被拆分前的实现代码：
<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head>
<meta charset='utf-8'/>
<title>多控制器思想与模块化编程架构</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<br/><br/><br/>
<div class="container" ng-controller='commentController'>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<!-- 评论模块 -->
<div class="input-group">
<input type="text" class="form-control" ng-model='comt'>
<span class='input-group-btn'>
<button class="btn btn-primary" ng-click='submitComment(comt)'>评论</button>
</span>
</div>
<!-- 评论标题 -->
<h2 ng-show='commentArr.length>0'>评论</h2>
<!-- 评论内容 -->
<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 class="col-xs-3"></div>
</div>
</div>
<ul ng-controller='namelistController'>
<li ng-repeat='liInfo in liInfoList track by $index'>{{liInfo}}</li>
</ul>
<script src='../../js/angular.js'></script>
<script>
var app = angular.module('app', []);
app.controller('mainController', ['$scope', function ($scope){
}]);
//评论控制器
app.controller('commentController', ['$scope', function ($scope){
$scope.commentArr = [];
//评论功能
$scope.submitComment = function (comt){
$scope.commentArr.push(comt);
$scope.comt = '';
};
//删除评论
$scope.deleteComment = function (index){
$scope.commentArr.splice(index, 1);
};
}]);
//名称列表控制器
app.controller('namelistController', ['$scope', function ($scope){
$scope.liInfoList = ['frank','lily','lucy','hanMeiMei'];
}]);
/*
1.ng-controller与多控制器思想
描述：能够看到angular的操作，实际上脚本代码都是写在controller之中的。
而刚刚我们将所有的脚本都堆积到一个控制器中的操作
虽然理解上变得容易，但是实际开发过程中则会造成灾难
所以为了便于团队开发，为了便于维护
NG提出了【多控制器思想】
说明：
(1)多控制器思想：
类似于div中的布局思想，是将控制器按照页面的不同模块功能进行切分
一个控制器只用来控制一个功能模块，多个控制器之间互不影响，独立工作。
(2)优势：
分工明确，代码清晰，便于维护
当系统出现问题，能够立即定位到问题坐标
(3)弊端：
对于初学者而言，前期代码的架构会变得很繁琐，对初学者不是很友好。
强调：
(1)每一个控制器只要被声明，就必须通过.controller实现
即便控制器中没有代码，也必须写出。
(2)每一个控制器作用域可以认为是嵌套的，
即外层controller可以直接访问到内层controller内的NG变量
而同级controller之间互不影响
(3)对于程序，习惯上mainController作为用户默认加载页面的根控制器
有且仅有唯一一个
*/
</script>
</body>
</html>
二、路由功能
路由：提供显示基本的或者说是默认的页面的显示。
1、整体架构
2、相关代码（结合模块化）
2.1 index.html
<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head lang="en">
<meta charset='utf-8'/>
<title ng-bind='mainTitle'></title>
</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 black;" ng-view></div>
<script src="js/libs/angular.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/apps/app.js"></script>
<script src="js/apps/route.js"></script>
<script src="js/apps/controllers/mainController.js"></script>
<script src="js/apps/controllers/shownameController.js"></script>
<script src="js/apps/controllers/showinfoController.js"></script>
</body>
</html>
2.2 showinfo.html
<div>
<div ng-repeat='info in infos track by $index'>
<h2>{{info.username}}</h2>
<p>{{info.password}}</p>
</div>
</div>
2.3 showname.html
<ul>
<li ng-repeat='pname in pnames track by $index'>{{pname}}</li>
</ul>
2.4 app.js
var app = angular.module('app', ['ngRoute']);
2.5 route.js
app.config(['$routeProvider', function ($routeProvider){
$routeProvider
.when('/showname', {
templateUrl:'view/showname.html',
// template:'<ul>'+
// '<li ng-repeat='pname in pnames track by $index'>{{pname}}</li>'+
// '</ul>',
controller:'showNameController'
})
.when('/showinfo', {
templateUrl: 'view/showinfo.html',
controller:'showInfoController'
})
.otherwise({
redirectTo:'/showname'
});
}]);
2.6 mainController.js
app.controller('mainController', ['$scope', function ($scope){
$scope.mainTitle = '路由与模块化';
}]);
2.7 showinfoController.js
app.controller('showInfoController', ['$scope', function ($scope){
$scope.infos = [
{ username:'frank', password:'123456' },
{ username:'zoe', password:'654321' }
];
}]);
2.8 shownameController.js
app.controller('showNameController', ['$scope', function ($scope){
$scope.pnames = ['frank','lily','lucy'];
}]);
三、服务学习
系统服务
1、网络服务
<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head lang="en">
<meta charset='utf-8'/>
<title>{{mainControllerTitle}}</title>
</head>
<body>
<!--
tips:
对于像通过angular框架请求来的图片imgsrc和a标签的href
不能直接赋值给src和href
应当写作ng-src指令和ng-href指令
-->
<img ng-src="{{imgSrc}}">
<script src="../../../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('mainController', ['$scope', '$http', function ($scope, $http){
$scope.mainControllerTitle = '网络服务';
//get请求测试
// $http({
// method:'GET',
// url:'httpService.php'
// }).success(function (data){
// console.log(data);
// //
// $scope.imgSrc = data.src;
// }).error(function (err){
// console.log(err);
// });
//post
$http({
method:'POST',
url:'httpService.php',
headers:{
//"Content-Type":'multipart/form-data'
//"Content-Type":'application/json'
"Content-Type":'application/x-www-form-urlencoded'
},
data:'userName=frank&password=123456'
}).success(function (data){
console.log(data);
}).error(function (err){
console.log(err);
});
}]);
/*
1.服务service
描述：可以这么来认为，服务service相当于是app提供给用户使用的全局变量
而服务存在的目的，
其实可以认为是对各个controller功能的一个扩展
说明：
(1)在NG框架中，服务是一个名词。实在不能理解就替换成【NG全局变量】
(2)在NG框架中，因为controller的作用域问题，平级controller之间无法互相沟通
所以提出服务这一概念，不同的controller可以通过注入服务的方式来进行交互
(3)在NG框架中，存在多种不同的服务，有系统服务，也允许自定义服务
【在angular框架内存在多种全局变量，有系统自带的，也可以自己重新定义】
注意：不管是系统服务还是自定义服务，服务没有优劣之分
只是从功能角度去选择更适合的。
2.系统服务$http
描述：NG框架内直接对app数据模型内置了一个用于处理网络功能的服务，就是$http
可以认为系统提供的服务都是带有$前缀的
而为了区分服务，我们自定义的服务一般都不写$前缀
语法：因为$http服务是系统直接提供，所以不需要手动定义服务的内容
而是直接通过注入的方式，添加到controller内，直接使用即可。
app.controller('控制器名', ['$scope','$http', function ($scope, $http){...}]);
注意：
对controller注入了$http服务后，只是说明在这个controller的脚本内可以使用网络请求
而不是已经使用了网络请求
具体的网络请求还需要我们手动编辑。
*/
</script>
</body>
</html>
<?php
// $success = array('msg' => 'ok', 'src' => '01_frank.jpg');
$success = array('msg' => 'ok', 'info' => $_POST);
echo json_encode($success);
?>
2、监听服务
<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head lang="en">
<meta charset='utf-8'/>
<title>{{mainControllerTitle}}</title>
</head>
<body>
<input type="text" ng-model='myInput'>
<script src="../../../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('mainController', ['$scope', function ($scope){
$scope.mainControllerTitle = '监听服务';
$scope.myInput = '';
$scope.$watch('myInput', function (){
console.log('监听到myInput输入框内容发生了变化,变化是:'+$scope.myInput);
});
}]);
/*
1.监听服务$watch
描述：$watch虽然我们称之为服务，但实际上这个服务并不需要我们主动注入
而是可以在任何时刻，在控制器中任何位置直接使用他们。
他的作用是监听任何想要监听的NG变量的值，并在这个值发生变化的时候回调。
语法：$scope.$watch('想要监听的angular表达式或字符串', 回调函数);
*/
</script>
</body>
</html>
3、过滤服务
<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head lang="en">
<meta charset='utf-8'/>
<title>{{mainControllerTitle}}</title>
</head>
<body>
<!-- currency -->
<span>我的手机价格：</span>
<span>{{5799 | currency:'¥'}}</span><br/>
<!-- filter -->
<span>展示符合要求的内容</span>
<input type="text" ng-model='filter_input'>
<ul>
<li ng-repeat='pname in pnames | filter:filter_input'>{{pname}}</li>
</ul>
<!-- uppercase & lowercase -->
<h2>{{'hello WORLD! 你好世界! がぃい' | uppercase}}</h2>
<h2>{{'hello WORLD! 你好世界! がぃい' | lowercase}}</h2>
<!-- orderBy -->
<ul>
<li ng-repeat='info in infos | orderBy:"stuName"'>{{info.stuName+','+info.score}}</li>
</ul>
<p>{{ '人不吃饭就会饿' | surfix }}</p>
<script src="../../../js/angular.js"></script>
<script>
var app = angular.module('app', []);
// 自定义过滤服务，添加个人签名
app.filter('surfix', function (){
return function (text){
return text.concat('------by Frank');
};
});
app.controller('mainController', ['$scope', '$filter', function ($scope, $filter){
$scope.mainControllerTitle = '过滤服务';
$scope.filter_input = '';
$scope.pnames = ['lily','lasa','lbsure','lczerbeila','lcbai','lilei','lihua'];
$scope.infos = [
{ stuName:'frank', score:100 },
{ stuName:'lily', score:105 },
{ stuName:'lucy', score:92 },
{ stuName:'liLei', score:3 }
];
}]);
/*
2.自定义过滤服务
描述：直接对app页面数据模型，通过.filter()方法进行扩展，
即可在页面中直接使用，不需要额外的注入操作。
语法：app.filter('自定义过滤服务名称', function (){
return function (text){
//...功能代码
}
});
1.过滤服务$filter
描述：$filter服务在NG框架中是对数据进行转换显示的一种小工具
使用本服务能够让页面中的显示内容呈现为不一样的结构
语法：{{ 任意内容 | 过滤器 }}
补充：$filter虽然是系统服务，但是支持自定义内容
说明：
在$filter服务中共计提供了四种过滤器
(1)*** | currency:'货币符号'
用于将内容转换为货币格式
tips：默认转换为美元格式，当然支持定制。
(2)*** | filter:子集数组
用于从一个数组选项中筛选出符合要求的子集数组
类似于输入提示功能
(3)*** | uppercase，lowercase
用于将内容的格式进行大小写转换
(4)*** | orderBy:'表达式'
用于根据表达式的值对显示的内容进行顺序排列
一般会用于ng-repeat结构中，并且repeat结构不是简单数据结构
*/
</script>
</body>
</html>
4、时间轴服务
<!DOCTYPE html>
<html ng-app='app' ng-controller='mainContorller'>
<head lang="en">
<meta charset='utf-8'/>
<title>{{mainControllerTitle}}</title>
</head>
<body>
<p>{{num}}</p>
<script src="../../../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('mainContorller', ['$scope', '$interval', '$timeout', function ($scope, $interval, $timeout){
$scope.mainControllerTitle = '时间轴服务';
$scope.num = 0;
//间隔调用服务
var timer = null;
timer = $interval(function (){
if($scope.num>=99){
/*清除时间轴服务*/
$interval.cancel(timer);
}else{
$scope.num++;
}
}, 20);
//延迟调用服务
var timerout = null;
timerout = $timeout(function (){
alert('输出完毕！');
}, 2000);
console.log(timer);
console.log(timerout);
}]);
/*
1.时间轴服务
描述：时间轴服务共有三种，没有统一的名称
在使用之前必须注入到controller之中才能使用
类型：【间隔调用服务$interval】【延迟调用服务$timeout】【清除时间轴内容服务】
补充：以上三种服务与bom中间隔调用等函数基本没有区别。
*/
</script>
</body>
</html>
自定义服务
相当于添加全局变量供给使用，突破了控制器间无法传输数据的情况。
1、Value服务
该服务只适用于添加键值对数据使用。
注意：自定义指令不需要带$符号。
<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head lang="en">
<meta charset='utf-8'/>
<title>{{mainControllerTitle}}</title>
</head>
<body>
<!-- controller1 向全局变量储存内容 -->
<div class="div1" ng-controller='controller1'>
<input type="text" ng-model='msg'>
<button ng-click='submit(msg)'>保存</button>
</div>
<!-- controller2 从全局变量获取内容 -->
<div class="div2" ng-controller='controller2'>
<p ng-bind='showMsg'></p>
<button ng-click='download()'>获取</button>
</div>
<script src="../../../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.value('globalObj',{});
app.controller('mainController', ['$scope', function ($scope){
$scope.mainControllerTitle = 'value服务';
}]);
//controller1
app.controller('controller1', ['$scope', 'globalObj', function ($scope, globalObj){
$scope.msg = '';
$scope.submit = function (tempMsg){
//向全局变量中存入msg
globalObj.inputMsg = tempMsg
//测试变量范围
$scope.showMsg = $scope.msg;
console.log($scope);
console.log($scope.showMsg);
console.log($scope.msg);
};
}]);
//controller2
app.controller('controller2', ['$scope', 'globalObj', function ($scope, globalObj){
$scope.showMsg = '';
$scope.download = function (){
//从全局变量中读取msg
$scope.showMsg = globalObj.inputMsg;
};
}]);
/*
1.自定义服务
描述：之前课程中我们提到过，angularJS中的服务实际上就是对app数据模型的扩展
从某种意义上可以理解为【服务就是全局变量】的含义
接下来要提到的自定义服务则很好的贯彻了这个观点
系统服务是系统直接提供的，有不同的功能
自定义服务需要手动编辑功能
但两者都需要注入之后才能使用(特殊的服务不需要注入，$filter $watch)
说明：
自定义服务的方式常见有五种：
(1)value服务
(2)constant服务
(3)factory服务
(4)service服务
(5)provider服务
补充：
不论哪一种自定义服务，自定义服务的目的基本都是一致的，就是提供一个全局变量
来支持controller之间的交流
2.value自定义服务
描述：value服务是通过.value()方法对app数据模型进行扩展的一种服务定制方式
通过对app进行扩展
可以使得服务在controller之间进行信息交换，充当“全局变量”的角色
语法：app.value('自定义服务名称', 服务内容JSON);
说明：value服务实际上就是一个全局变量，所以可以随意的对其内容进行读取和修改
例子：
app.value('FrankService', {
pname:'frank'
});
...
$scope.msg = FrankService.pname;
*/
</script>
</body>
</html>
2、Constant服务
通常页面内只有第一个该服务被执行。
<!DOCTYPE html>
<html ng-app='app'>
<head lang="en">
<meta charset='utf-8'/>
<title>constant服务</title>
</head>
<body>
<!-- controller1 向全局变量储存内容 -->
<div class="div1" ng-controller='controller1' style="width:300px; height:100px; border:1px solid black;">
<input type="text" ng-model='msg'>
<button ng-click='submit(msg)'>保存</button>
</div>
<!-- controller2 从全局变量获取内容 -->
<div class="div2" ng-controller='controller2' style="width:300px; height:100px; border:1px solid black;">
<p ng-bind='showMsg'></p>
<button ng-click='download()'>获取</button>
</div>
<script src="../../../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.constant('FrankService', {
pname:'frankenStein'
});
app.constant('FrankService', {
pname:'frank'
});
//controller1
app.controller('controller1', ['$scope', function ($scope){
$scope.msg = '';
$scope.submit = function (tempMsg){
console.log('controller1中的内容被保存到了全局变量中');
};
}]);
//controller2
app.controller('controller2', ['$scope','FrankService', function ($scope, FrankService){
$scope.showMsg = '';
$scope.download = function (){
console.log('controller2中从全局变量中读取具体内容');
console.log(FrankService.pname);
FrankService.pname = 'liLei';
console.log(FrankService.pname);
};
}]);
/*
1.constant服务
描述：constant服务可以认为从作用上完全等价于value服务
区别就是constant服务一旦被定制完成，那么在注入使用之前都是不能更改的
(多次定制constant服务，只有第一个生效)
语法：app.constant('自定义服务名称', 服务内容JSON);
*/
</script>
</body>
</html>
3、Factory服务
返回一个对象。
<!DOCTYPE html>
<html ng-app='app'>
<head lang="en">
<meta charset='utf-8'/>
<title>factory服务</title>
</head>
<body>
<!-- controller1 向全局变量储存内容 -->
<div class="div1" ng-controller='controller1' style="width:300px; height:100px; border:1px solid black;">
<input type="text" ng-model='msg'>
<button ng-click='submit(msg)'>保存</button>
</div>
<!-- controller2 从全局变量获取内容 -->
<div class="div2" ng-controller='controller2' style="width:300px; height:100px; border:1px solid black;">
<p ng-bind='showMsg'></p>
<button ng-click='download()'>获取</button>
</div>
<script src="../../../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.factory('FrankService', function (){
var obj = {};
obj.pname = 'frank';
return obj
});
//controller1
app.controller('controller1', ['$scope', 'FrankService', function ($scope, FrankService){
$scope.msg = '';
$scope.submit = function (tempMsg){
console.log('controller1中的内容被保存到了全局变量中');
FrankService.msg = tempMsg;
};
}]);
//controller2
app.controller('controller2', ['$scope', 'FrankService', function ($scope, FrankService){
$scope.showMsg = '';
$scope.download = function (){
console.log('controller2中从全局变量中读取具体内容');
console.log(FrankService.pname);
$scope.showMsg = FrankService.msg;
};
}]);
/*
1.factory服务
描述：factory服务是通过.factory()方法去创建一个object结构并直接返回的操作。
说明：乍一看返回一个对象，和直接value式提供一个对象并无区别
但是通过函数返回一个对象，那么这个对象的所有结构就都是在函数内完成
而函数内是可以对对象进行任意的操作和扩充的
但是在value式固定结构中却无法做到
*/
</script>
</body>
</html>
4、Service服务
相对于之上的服务更加的开发，可以写入更多的东西，开发较常用此服务。
扫描二维码关注公众号，回复：
9972445 查看本文章
<!DOCTYPE html>
<html ng-app='app'>
<head lang="en">
<meta charset='utf-8'/>
<title>service服务</title>
</head>
<body>
<!-- controller1 向全局变量储存内容 -->
<div class="div1" ng-controller='controller1' style="width:300px; height:100px; border:1px solid black;">
<input type="text" ng-model='msg'>
<button ng-click='submit(msg)'>保存</button>
</div>
<!-- controller2 从全局变量获取内容 -->
<div class="div2" ng-controller='controller2' style="width:300px; height:100px; border:1px solid black;">
<p ng-bind='showMsg'></p>
<button ng-click='download()'>获取</button>
</div>
<script src="../../../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.service('FrankService', function (){
this.pname = 'frank';
var secret = '这是一个小秘密';
//特权函数
this.setSecret = function (tempSecret){
secret = tempSecret;
}
this.getSecret = function (){
return secret;
};
});
//controller1
app.controller('controller1', ['$scope', function ($scope){
$scope.msg = '';
$scope.submit = function (tempMsg){
console.log('controller1中的内容被保存到了全局变量中');
};
}]);
//controller2
app.controller('controller2', ['$scope','FrankService', function ($scope, FrankService){
$scope.showMsg = '';
$scope.download = function (){
console.log('controller2中从全局变量中读取具体内容');
FrankService.setSecret('我饿了');
console.log(FrankService.getSecret());
};
}]);
/*
1.service服务
描述：service服务相当于本身已经构建了一个空白对象
在服务内部所有内容的操作均通过this.来完成。
*/
</script>
</body>
</html>
5、Provider服务
注意：该服务会预先加载，较消耗内存资源。
<!DOCTYPE html>
<html ng-app='app'>
<head lang="en">
<meta charset='utf-8'/>
<title>provider服务</title>
</head>
<body>
<!-- controller1 向全局变量储存内容 -->
<div class="div1" ng-controller='controller1' style="width:300px; height:100px; border:1px solid black;">
<input type="text" ng-model='msg'>
<button ng-click='submit(msg)'>保存</button>
</div>
<!-- controller2 从全局变量获取内容 -->
<div class="div2" ng-controller='controller2' style="width:300px; height:100px; border:1px solid black;">
<p ng-bind='showMsg'></p>
<button ng-click='download()'>获取</button>
</div>
<script src="../../../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.provider('FrankService', function (){
console.log('provider initialized');
this.$get = function (){
var obj = {};
obj.pname = 'franky';
return obj;
}
});
//controller1
app.controller('controller1', ['$scope', function ($scope){
$scope.msg = '';
$scope.submit = function (tempMsg){
console.log('controller1中的内容被保存到了全局变量中');
};
}]);
//controller2
// app.controller('controller2', ['$scope', 'FrankService', function ($scope, FrankService){
// $scope.showMsg = '';
// $scope.download = function (){
// console.log('controller2中从全局变量中读取具体内容');
// console.log(FrankService.pname);
// };
// }]);
app.controller('controller2', ['$scope', function ($scope){
$scope.showMsg = '';
$scope.download = function (){
console.log('controller2中从全局变量中读取具体内容');
};
}]);
/*
1.provider服务
描述：provider服务通过.provider()方法添加，并在第二个参数的函数内
通过this.$get = function (){...}的固定结构对服务内容进行扩充
特殊：provider服务只要被创建，就会直接添加到app当中
无论是否对controller进行注入，provider服务都会一直存在。
其余四种自定义服务都不能做到这点。
*/
</script>
</body>
</html>
四、自定义指令
1、自定义指令
自定义的指令与bootstrap里的组件有些相似。
<!DOCTYPE html>
<html ng-app='app'>
<head lang='en'>
<meta charset='utf-8'/>
<title>自定义指令</title>
</head>
<body>
<div frankbutton></div>
<frankbutton></frankbutton>
<div class="frankbutton"></div>
<!-- directive: frankbutton -->
<script type="text/javascript" src='../../../js/angular.js'></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.directive('frankbutton', function (){
return {
restrict:'AECM',
template:'<div><button>frank自定义的按钮</button></div>',
replace:true,
};
});
/*
1.【指令】与【自定义指令】
描述：指令可以理解为属性，
angularJS中的系统指令使得页面元素拥有了除了本身之外的一些特殊功能
自定义指令更像是创造了一个组件(标签)
2.如何自定义指令
描述：在angular框架内部，所有的自定义指令都是通过app.directivef()方法创建的。
语法：app数据模型.directive('自定义指令名称', function(){
return {
restrict:'指令类型',
template:'指令结构',
replace:'指令复写'
};
});
说明：(1)restrict指令类型
描述：指令类型指的是，指令在页面中需要通过何种形式进行唤醒
类型：指令共计有四种唤醒方式，分别为"A"\"E"\"C"\"M"
说明：
a:"A",指的是attribute，意味着指令需要通过属性的方式实现
eg:app.directive('frankbutton', function (){
return {
restrict:'A',
...
}
})
b:"E",指的是element，意味着指令需要通过元素的方式进行唤醒
c:"C",指的是class，意味着指令需要通过类名的方式呈现
d:"M",指的是comment，意味着指令需要通过注释的方式进行唤醒
注意：
a:指令名称必须采用小写，任何大写都会导致无效。
b:指令名称如果是M类型，则replace字段就是必须写的，并且必须设置为true才能生效
c:指令如果通过template加载，则有且仅有唯一一个根节点。
(2)指令结构template
描述：指令结构template指的是指令在页面中能够显示的html结构
如果需要从外部文件中加载指令的结构，则需要写成templateUrl
(3)指令复写replace
描述：指令复写指的是指令当在页面中存在时，
是否会被当做是一个子元素添加到当前所在的元素内
默认为false，表示不会当成是子元素，而是会直接替换当前元素
可以设置为true，表示不覆盖当前元素，而是作为他的一个子元素添加到页面中
*/
</script>
</body>
</html>
2、指令方案方面
<!DOCTYPE html>
<html ng-app='app'>
<head lang='en'>
<meta charset='utf-8'/>
<title>自定义指令的指令方案</title>
</head>
<body>
<div class="frankdiv"></div>
<script type="text/javascript" src='../../../js/angular.js'></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.directive('frankdiv', function (){
return {
restrict:'AECM',
template:'<div>'+
'<input type="text" ng-model="msg">'+
'<button ng-click="getMsg(msg)">获取输入内容</button>'+
'</div>',
//从外部文件加载
// templateUrl:
replace:true,
scope:{},
link:function (scope, element, attrs){
console.log(scope);
console.log(element[0].childNodes);
console.log(attrs);
// element[0].childNodes[1].ondblclick = function (){
// console.log('这是一个双击事件');
// };
attrs.$set('style','color:red');
scope.msg = '';
scope.getMsg = function (tempMsg){
console.log(tempMsg);
}
}
};
});
/*
1.指令方案link
描述：指令方案link是angularJS中提供给自定义指令的一种“专有行为”
专门为自定义指令提供了一个用来编写对应脚本的区域
语法：app.directive('指令名称', function (){
...
...
link:function (scope, element, attrs){...}
});
说明：
(1)scope：如果将整个指令看作是一个controller，那么scope的作用等价于$scope
(2)element:一个包含了指令中所有页面元素的数组，每一个元素都是一个dom对象
数组整体支持jq操作，而数组元素本身支持js原生操作
(3)attrs：当前指令的属性集合，用来获取元素的属性。
补充：
在指令内部，需要对scope进行初始化编辑
...
scope:{},
link:function (scope, element, attrs){...}
原因是如果不进行初始化操作，那么scope默认为mainController中的$scope
*/
</script>
</body>
</html>
五、总结
Angular框架主要是让团队开发更加适合，它是通过多控制器来实现团队间的合作，以此实现模块化，协调开发。
