<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
<!--
ng-app 边界指令
{{}} 呈现指令
ng-model 信息指令 用于信息绑定
ng-bind 绑定指令
ng-init 初始化指令 :对边界内数据模型初始化 习惯放在BODY上
-->
</head>
<body ng-app="myApp">
<ul>
<li><a href="#!home">首页</a></li>
<li><a href="#!liebiao">列表页</a></li>
</ul>
<!--显示页 把路由templateUrl 页面中的内容写到该DIV中 并加上控制类-->
<div ng-view>
</div>
<script>
var app = angular.module('myApp',['ngRoute']);
//自定义服务
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
//系统的服务不加$
// 图片和链接要加ng 指定
// <img ng-src="{{}}"/><a ng-href="{{}}"></a>
app.controller('homeCon',function ($scope, $route) {
//$scope.$route = $route;
$scope.name = '这是首页';
$scope.add = function () {
alert('121212');
}
})
.controller('liebiaoCon',function ($scope, $route, $http,hexafy) {
//$scope.$route = $route;
$scope.name = '这是列表页';
$scope.add = function () {
alert('121212');
}
//发送http服务
/*$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});*/
//POST请求要加headers否则服务器接受不到
$http({
method: 'POST',
url: '/someUrl',
headers:{
"Content-Type":"application/X-www-form-urlencoded"
},
data:""//用字符串 不能用{}
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
//过滤服务{{任意内容 | 过滤器}}
//自定义过滤服务
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
//过滤筛选服务
// <li ng-repeat='pname in pnames | filter:filter_input'></li>
//监听服务 $watch 不需要注入
//在控制器中可是随时使用
$scope.InputValue = '';
$scope.$watch('InputValue',function () {
//监听InputValue 变化就会触发
})
})
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home',{
templateUrl: 'home.html',
controller: 'homeCon',
})
.when('/liebiao',{
templateUrl: 'liebiao.html',
controller: 'liebiaoCon',
})
.otherwise({
redirectTo:'/home'//默认页 只能用CODE
});
}]);
</script>
</body>
</html>
