angularJS中-$route路由-$http(ajax)的使用

发布时间：2020-12-17 09:24:56 所属栏目：安全来源：网络整理

导读：后台请求使用的是nodeJS驱动(后面帖代码),很简单的RESTFUL,页面使用的是bottstarp3.0(懒人神器); 第一个例子: 在本地架设NODEJS,angular的所有请求都是请求本地的3000端口,这个例子展示的是angular用GET请求服务器的list.json,1.json,2.json等文件; POST请求

后台请求使用的是nodeJS驱动(后面帖代码),很简单的RESTFUL,页面使用的是bottstarp3.0(懒人神器);

　　第一个例子:

　　在本地架设NODEJS,angular的所有请求都是请求本地的3000端口,这个例子展示的是angular用GET请求服务器的list.json,1.json,2.json等文件;

　　POST请求/0和/id这两个地址：

运行下面代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>angular</title>
　　<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<scriptsrc="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<linkhref="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css"rel="stylesheet">
<!--
<scriptsrc="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js"type="text/javascript"></script>
-->
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-resource.min.js"></script>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>

</head>
<bodyng-app="app">
<scripttype="text/javascript">varapp=angular.module("app",["ngResource",'ngRoute']);</script>

<divclass="panelpanel-default">
<divclass="panel-heading">

</div>
<divclass="panel-body"ng-controller="reso">
<tableclass="table">
<tr>
<td>name</td>
<td>age</td>
</tr>
<trng-repeat="iinusers">
<td>{{i.name}}</td>
<td>{{i.age}}</td>
</tr>
</table>
<buttonclass="btnbtn-default"ng-click="update(1)">
query_1.json</button>
<buttonclass="btnbtn-default"ng-click="update(2)">
query_2.json</button>
<buttonclass="btnbtn-danger"ng-click="update(0)">
GET_0.json</button>
<buttonclass="classbtnbtn-waring"ng-click="post(0)">
POST_0.json</button>
<tableclass="table">
<trng-repeat="iinmsgs">
<tdclass="alert-warningalert">{{i.id}}</td>
</tr>
</table>
</div>
</div>
<scripttype="text/javascript">//所有的依赖都要在外部定义好;
varapp=angular.module("app",'ngRoute']);
app.factory('Geek',function($resource){varurl="http://127.0.0.1:3000";//直接新建一个REST服务,相当于提供了一堆请求的合集;
return$resource(url+"/:id.json",{},{
query:{
method:"GET",params:{
id:"list"
},isArray:true
},get:{
method:"GET",params:{
id:"0"
}
},save:{
method:"POST",params:{
id:"id"
}
}
});
});
app.factory("http",function($http){varurl="http://127.0.0.1:3000";returnfunction(search,data){return$http.post(url+search,data);
};
});functionreso($scope,Geek,http,$rootElement){
$scope.users=Geek.query();//$scope.post=
window.root=$rootElement;
$scope.post=function(id){
http("/0").then(function(r){vardata=r.data;//vardata=JSON.stringify(r.data);
//varaEl=angular.element('<divclass="alertalert-success"role="alert">'+data+"</div>");
//root.append(aEl)
$scope.msgs=data.list;
x=msgs
});//有加了一个请求数据就报了跨域问题,卧槽;
//而且请求的方式变成了OPTION,我读书少别逗我啊;
http("/0",id).then(function(r){vardata=r.data;
});
};

$scope.update=function(id){
Geek.query({
id:id
}).$promise.then(function(r){
$scope.users=r;
})
};
};</script>
</body>
</html>

　　这个例子的gruntFile.json文件是这样的,用了nuysoft的Mock,通过npm install Mockjs,不要忘记了

{"name":"nono","version":"0.0.0","description":"forwatch","main":"Gruntfile.js","dependencies":{"grunt":"~0.4.5","express":"~3.15.2","grunt-contrib-connect":"~0.6.0","grunt-contrib-watch":"~0.5.3"
},"devDependencies":{},"scripts":{"test":"echo"Error:notestspecified"&&exit1"
},"repository":{"type":"git","url":"sqqihao.github.com"
},"keywords":["nono"
],"author":"nono","license":"__MIT__"}

　　nodejs的文件内容如下(安装nodejs很简单的,下载以后复制到全局变量即可哦)

varexpress=require('express'),http=require('http'),path=require('path');varMock=require('mockjs');varapp=express();//allenvironmentsapp.set('port',process.env.PORT||3000);
app.set('views',__dirname+'/views');
app.set('viewengine','jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname,'public')));//developmentonlyif('development'==app.get('env')){
app.use(express.errorHandler());
};

app.all('*',function(req,res,next){
res.header("Access-Control-Allow-Origin","*");
res.header("Access-Control-Allow-Headers","X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",'3.2.1')
res.header("Content-Type","application/json;charset=utf-8");
next();
});

app.get('/',res){
res.setHeader('Content-Type','application/json;charset=utf-8');
res.send("youarewelcom!");
});

app.get("/list.json",'application/json;charset=utf-8');
res.send([{
name:"nono",age:26
},{
name:"hehe",age:24
}]);
});


app.get("/0.json",'application/json;charset=utf-8');
res.send([{
name:"youare",age:"welcome"
}]);
});


app.get("/1.json",'application/json;charset=utf-8');
res.send([{
name:"yy",age:22
},{
name:"niubiu",age:50
}]);
});

app.get("/2.json",'application/json;charset=utf-8');
res.send([{
name:"ddp",age:33
},{
name:"makiro",age:20
}]);
});

app.post("/0",'application/json;charset=utf-8');vardata=Mock.mock({'list|1-10':[{'id|+1':1
}]
});
data.list=Mock.Random.shuffle(data.list);
res.send(data);
});

app.post("/id",'application/json;charset=utf-8');
res.send("yy");
});

http.createServer(app).listen(app.get('port'),function(){
console.log('Expressserverlisteningonport'+app.get('port'));
});

第二个例子:　　

我们在firefox或者是chrome里面一直用console.log 等打log的方法,angular对这些方法进行了简单的封装:

例子3:

angular的路由处理,ng-view的使用,所有对应路由的模板会在标志有ng-view属性的div中显示. 我们通过url控制页面对应的逻辑是个好主意么么哒;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!