网站模块添加,我的钢铁网网站架构,苏州 网站 建设 公司,wordpress模板文件在哪里之前学习的事视图与模版#xff0c;我们在控制器文件中直接定义一个数组#xff0c;让其在模版文件中用ng-repeat指令构造一个迭代器#xff0c;定义的数组http://t.cn/RUbL4rP如同以下#xff1a; $scope.phones [{name:xioabin,number:18824863682,age:12},{name:xioalo…之前学习的事视图与模版我们在控制器文件中直接定义一个数组让其在模版文件中用ng-repeat指令构造一个迭代器定义的数组http://t.cn/RUbL4rP如同以下 $scope.phones [
{name:xioabin,number:18824863682,age:12},
{name:xioalong,number:18824863683,age:19},
{name:xiaohua,number:18824863684,age:5},
{name:xiaoMING,number:18824863685,age:1},
{name:xiaoTU,number:18824863686,age:2},
{name:xiaoKE,number:18824863687,age:40},
]; 这种形式往往不是我们所要的我们通常会使用常用ajax技术去获取数据在angular也有类似的服务来实现XHR那就是 $http使用怎么一个服务需要将代码放置在本地服务器或是web站点上首先先准备phone.json文件如下 [
{name:xioabin,number:18824863682,age:12},
{name:xioalong,number:18824863683,age:19},
{name:xiaohua,number:18824863684,age:5},
{name:xiaoMING,number:18824863685,age:1},
{name:xiaoTU,number:18824863686,age:2},
{name:xiaodfs,number:18824863687,age:46},
{name:xiaodfE,number:18824863682,age:46},
{name:xiaobh,number:18824863680,age:48},
{name:xiaogg,number:18824863687,age:10},
{name:xiaouu,number:18824863686,age:20},
{name:xiaoKds,number:18824863682,age:30},
{name:xiaoKEdad,number:18824863689,age:60},
{name:xiaoKb,number:18824863683,age:90},
{name:xiaofa,number:18824863685,age:17}
] 内容可以自己设置模版文件代码与之前大同小异 !doctype html
html ng-app ng-controllerPhoneListCtrl
head
meta charsetutf8 /
title ng-bindGoogle Phone Gallery: query/title
!-- title ng-bind-templateGoogle Phone Gallery:{{query}}/title --
script srchttp://code.angularjs.org/angular-1.0.1.min.js/script
script srcscript.js/script
/head
body
div classexample2
Select:
select nameselect idselect ng-modelorder
option valuename名字/option
option valueage年龄/option
/select
Search: input namesearch typetext ng-modelquery /
ul
!--迭代器--
li
span序号/spannbsp;nbsp;
span姓名/spannbsp;nbsp;
span号码/spannbsp;nbsp;
span年龄/span
/li
li ng-repeatphone in phones | filter:query | orderBy:order
span{{$index 1}}/spannbsp;nbsp; span{{phone.name}}/spannbsp; nbsp; span{{phone.number}}/spannbsp; nbsp; span{{phone.age}}/span
/li
/ul
/div
/body
/html
不同的就是控制器文件的不同如下 //注入服务$http
function PhoneListCtrl($scope,$http){
$http.get(phone.json).success(function(data, status, headers, config) {
if(status200){ $scope.phones data; }
console.log(status , headers , config);
// alert(JSON.stringify(data));
});
$scope.order name;
} 这里传入了一个$http那么我们就可以通过$http.get(路径).success(function(data,status){/*成功获取数据之后该干嘛*/})data是返回的数据status是状态码header和config可以打印出来看一下应该是一些配置和头部吧这样$scope.phones就与之前一样是一个数组了
官网的$http是这样的形式可以参考着写 $http({
url:...,
method:...,
data:...,
params:...,
cache:...
})
.success(function(){....})
.error(function() {.....}); 如果我们的控制器按上面那样写的话在压缩代码时候会出错那么有这两种方法可以解决这个问题
为了克服压缩引起的问题只要在控制器函数里面给$inject属性赋值一个依赖服务标识符的数组就像被注释掉那段最后一行那样
PhoneListCtrl.$inject [$scope, $http];
另一种方法也可以用来指定依赖列表并且避免压缩问题——使用Javascript数组方式构造控制器把要注入的服务放到一个字符串数组代表依赖的名字里数组最后一个元素是控制器的方法函数
var PhoneListCtrl [$scope, $http, function($scope, $http) { /* constructor body */ }];
这就是angularjs的依赖注入了当控制器构造的时候AngularJS的依赖注入器会将这些服务注入到你的控制器中。当然依赖注入器也会处理所需服务可能存在的任何传递性依赖一个服务通常会依赖于其他的服务。
注意不要使用‘$’前缀来命名你自己的服务和模型就是自己可以定义自己的服务像$http否则可能会产生名字冲突。 更多专业前端知识请上
【猿2048】www.mk2048.com
