AngularJs-1.6版本网络请求
其实和1.5版本没什么区别,就是成功的回调函数和失败的回调函数语法不同了!
**示例代码 : **
<body ng-app="app" ng-controller="appController">
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('appController',['$scope','$http',function ($scope,$http) {
$http({
url:'01-get.php',
method:'get',
// 之前是用success和error回调 现在用then和catch 就这点区别
}).then(function (res) {
console.log(res.data);
}).catch(function (error) {
console.log(error);
});
}]);
</script>
AngularJs-1.6跨域
其实和1.6之前的版本也没太大的区别,就是要设置一个白名单进去
**示例代码 : **
<body ng-app="app" ng-controller="appController">
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app',[]);
app.config(['$sceDelegateProvider',function ($sceDelegateProvider) {
// 1.6版本跨域必须设置白名单
$sceDelegateProvider.resourceUrlWhitelist([
'self',
// 后面跟/** 访问域名下所有文件
'http://datainfo.duapp.com/**'
])
}]);
app.controller('appController',['$scope','$http',function ($scope,$http) {
$http({
url:'http://datainfo.duapp.com/shopdata/getGoods.php',
method:'jsonp'
}).then(function (res) {
console.log(res);
}).catch(function (error) {
console.log(error);
});
}]);
</script>
</body>
AngularJs1.6版本的路由
- **示例代码 : **
<body ng-app="app">
<!--
什么路由？
锚点的变化我们称为angular的路由。
-->
<ul class="title">
<!--4.路由的跳转。1.6版本的跳转 需要在锚点后面加一个感叹号 -->
<li><a href="#!/index">首页</a></li>
<li><a href="#!/singer">歌手</a></li>
<li><a href="#!/range">排行</a ></li>
</ul>
<div class="content">
<!--5.设置占位符，把请求的结果放到哪个位置-->
<div ng-view></div>
</div>
<script src="../js/angular.js"></script>
<!-- 1.引入angular-route -->
<script src="../js/angular-route.js"></script>
<script>
/*2.注入路由模块*/
var app = angular.module('app',['ngRoute']);
/*1.引入angular-route*/
/*2.注入路由模块*/
/*3.配置路由
* 让路由监听哪些锚点的变化。
* 4.路由的跳转。
* 5.设置占位符，把请求的结果放到哪个位置
* */
/* 3.配置路由 */
app.config(['$routeProvider',function ($routeProvider) {
$routeProvider.when('/index',{
template:'<h3>首页</h3>>'
}).when('/singer',{
template:'<h3>歌手</h3> '
}).when('/range',{
template:'<h3>排行</h3> '
});
}]);
</script>
</body>
Angular内置的jqLit
Angular内置的jqLite 它只有jQuery当中一部分功能,像
animate这些功能是没法实现的,要想实现,需要引入原生jQ库才行.**示例代码 : **
<body ng-app="app">
<div class="box"></div>
<button class="btn">点我</button>
<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app',[]);
var box = document.querySelector('.box');
var btn = document.querySelector('.btn');
// 把dom对象转成jQ对象
box = angular.element(box);
btn = angular.element(btn);
// 实现不了 颜色的变化
box.css({
backgrond:'blue'
});
/*
* angular内置的jqLite 它只有jQuery当中一部分功能。
* 如果引用了jQury.js 那么 angular.element它就是原生jQuery. $();
* */
btn.on('click',function () {
box.animate({
width:'300px',
height:'300px'
});
});
</script>
</body>
指令作用域
每自定义一个指令，就会创建一个新的做用域。
** 默认情况下，使用的是同一个作用域**
**示例代码 : **
<body ng-app="app" ng-controller="appController">
<p>{{name}}</p>
<p>{{age}}</p>
<input type="text" ng-model="name">
<hr>
<!--
这里特别注意: 下面自定义的指令名称如果是驼峰的话 上面绑定的时候要
用中划线的格式 不然解析出来都会变成小写myorder,系统就找不到这个属
性名称
-->
<div my-order ng-show="true"></div>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
/*
$scope : 是bool值 如果为bool类型，默认是false ->使用的是同一个
$scope为true，会使用自己的scope, 两个不是一个scope , 如果自己没有该属性，就会使用父作用域的属性.
还可以是一个对象{} 可以单独隔离出来作用域
* */
app.directive('myOrder', function () {
return {
restrict: 'EA',
template: '<h1>{{name}}</h1>',
replace: true,
scope: false,
controller: function ($scope) {
console.log('controller');
},
link:function ($scope, ele, attr) {
console.log('link');
/*
用到场景，关于一些DOM操作。都在link当中执行。
link方法 ，所有都已经加载完成了。
$scope:就是指令当中控制器的$scope,
ele:当前的DOM元素，是一个jq对象
*/
console.log($scope);
console.log(ele);
console.log(attr);
}
}
});
app.controller('appController', ['$scope', function ($scope) {
$scope.name = '父name';
$scope.age = '父age'
}]);
</script>
</body>
子级自定义指令作用域
scope:{}隔离作用域，跟父作用域没有任何关系。如果想要与父作用域有关系，可以让父作用把数据传递进来。
传递参数的时候有三个修饰符,每个修饰符的作用都不同
@修饰符:传递的是一个变量。在传递数据时，必须得要使用插值语法{{}},如果自己当中使用了传递进来的值 ，会被覆盖掉.
@修饰符:属于单向传递在指定当中,是不能更改的。原数据修改时，指令当中的值，也会更改
**示例代码 : **
<body ng-app="app" ng-controller="appController">
<p>{{name}}</p>
<p>{{age}}</p>
<input type="text" ng-model="name">
<hr>
<div my-order age="{{age}}"></div>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.directive('myOrder', function () {
return {
restrict: 'EA',
template: '<div><h3>{{name}}</h3> <p>{{age}}</p> </div>',
replace: true,
// scope:{},
// 隔离作用域，跟父作用域没有任何关系。如果想要与父作用域有关系，可以让父作用把数据传递进来。
scope: {
'age': '@'
// 传递的是一个变量。在传递数据时，必须得要使用插值语法{{}}
// <div my-order age="{{age}}"></div>
// 如果自己当中使用了传递进来的值 ，会被覆盖掉。
// 属于单向传递在指定当中,是不能更改的。原数据修改时，指令当中的值，也会更改。
},
controller: function ($scope) {
// 如果自己当中没有 定义，那么使用的还是父作用域
$scope.name = '子name';
$scope.age = '子age';
},
}
});
app.controller('appController', ['$scope', function ($scope) {
$scope.name = '父name';
$scope.age = '父age'
}]);
</script>
</body>
= 修饰符:传递的是一个变量。在传递数据时，必须得要使用下面这种语法
<div 指令名称 属性="属性值"></div>是属于双向的绑定,子级修改会影响到父级,父级修改同样也会影响到子级。
** & 修饰符: 相当于传递了一个方法,可以直接调用**
**示例代码 : **
<body ng-app="app" ng-controller="appController">
<p>{{name}}</p>
<p>{{age}}</p>
<input type="text" ng-model="address">
<hr>
<div my-order address="address" test="order()"></div>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
// 子级作用域
app.directive('myOrder', function () {
return {
restrict: 'EA',
template: '<div><h3>{{name}}</h3><p>{{age}}</p><p ng-click="click()">{{address}}</p> </div>',
replace: true,
// scope:{},
// 隔离作用域，跟父作用域没有任何关系。如果想要与父作用域有关系，可以让父作用把数据传递进来。
scope: {
'address': '=',
// 传递的是一个变量。在传递数据时，必须得要使用下面这种语法
// <div my-order address="address"></div>
// 是属于双向的绑定。
// 子级修改会影响到父级
// 父级修改同样也会影响到子级。
'test':'&'
// & 相当于传进来一个方法 可以直接调用
},
controller: function ($scope) {
// 如果自己当中没有 定义，那么使用的还是父作用域
$scope.name = '子address';
$scope.click = function () {
$scope.test();
}
},
}
});
// 父级作用域
app.controller('appController', ['$scope', function ($scope) {
$scope.name = "父name123";
$scope.age ="父age";
$scope.address = "父address";
$scope.order = function () {
console.log("父控制器打印order");
}
}]);
</script>
</body>
广播
发送广播时，一定要等指令加载完毕之后，才去发送广播
**示例代码 : **
<body ng-app="app" ng-controller="appController">
<button ng-click="click()">广播</button>
<hr>
<xiba1></xiba1>
<xiba2></xiba2>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('appController', ['$scope', function ($scope) {
$scope.click = function () {
// 广播事件：让下一级做某件事
$scope.$broadcast('buy', {money: 10});
$scope.$on('xiba2', function (event, data) {
console.log("控制器执行了xiba2方法" + data.id);
});
}
}]);
app.directive('xiba1', function () {
return {
restrict: 'EA',
template: '<h1>{{name}}</h1>',
link: function ($scope) {
$scope.name = 'xiba1指令';
$scope.$on('buy', function (event, data) {
console.log('xiba1指令执行了buy');
});
}
}
});
app.directive('xiba2', function () {
return {
restrict: 'EA',
template: '<div><h1>{{name}}</h1> <button ng-click="xiba2_click()">xiba2</button></div>',
link: function ($scope) {
$scope.name = 'xiba2指令';
$scope.$on('buy', function (event, data) {
console.log('xiba2指令执行了buy');
});
$scope.xiba2_click = function () {
// 让上一级做任务
$scope.$emit('xiba2', {id: 10});
}
}
}
});
</script>
</body>
