angularJS中-$route路由-$http(ajax)的使用
后台请求使用的是nodeJS驱动(后面帖代码),很简单的RESTFUL, 页面使用的是bottstarp3.0(懒人神器);
第一个例子:
在本地架设NODEJS, angular的所有请求都是请求本地的3000端口, 这个例子展示的是angular用GET请求服务器的list.json, 1.json, 2.json等文件;
POST请求/0和/id这两个地址：
运行下面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
<!--
<script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>
-->
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-resource.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script> </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",["ngResource",'ngRoute']);
</script> <div class="panel panel-default">
<div class="panel-heading"> </div>
<div class="panel-body" ng-controller="reso">
<table class="table">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr ng-repeat="i in users">
<td> {{i.name}} </td>
<td> {{i.age}} </td>
</tr>
</table>
<button class="btn btn-default" ng-click="update(1)">
query_1.json
</button>
<button class="btn btn-default" ng-click="update(2)">
query_2.json
</button>
<button class="btn btn-danger" ng-click="update(0)">
GET_0.json
</button>
<button class="class btn btn-waring" ng-click="post(0)">
POST_0.json
</button>
<table class="table">
<tr ng-repeat="i in msgs">
<td class="alert-warning alert"> {{i.id}} </td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
//所有的依赖都要在外部定义好;
var app = angular.module("app", ["ngResource",'ngRoute']);
app.factory('Geek', function($resource) {
var url = "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) {
var url = "http://127.0.0.1:3000";
return function(search,data) {
return $http.post(url+search, data);
};
});
function reso($scope, Geek, http, $rootElement) {
$scope.users = Geek.query();
//$scope.post =
window.root = $rootElement;
$scope.post = function(id) {
http("/0").then(function(r){
var data = r.data;
//var data = JSON.stringify(r.data);
//var aEl = angular.element('<div class="alert alert-success" role="alert">'+data+"</div>");
//root.append( aEl )
$scope.msgs = data.list;
x = msgs
});
//有加了一个请求数据就报了跨域问题,卧槽;
//而且请求的方式变成了OPTION,我读书少别逗我啊;
http("/0",id).then(function(r){
var data = 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": "for watch",
"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: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "sqqihao.github.com"
},
"keywords": [
"nono"
],
"author": "nono",
"license": "__MIT__"
}
nodejs的文件内容如下(安装nodejs很简单的, 下载以后复制到全局变量即可哦)
运行下面代码
var express = require('express')
, http = require('http')
, path = require('path');
var Mock = require('mockjs');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', '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')));
// development only
if ('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('/', function( req, res){
res.setHeader('Content-Type', 'application/json;charset=utf-8');
res.send("you are welcom!");
});
app.get("/list.json",function(req, res) {
res.setHeader('Content-Type', 'application/json;charset=utf-8');
res.send([{
name : "nono",
age : 26
},{
name : "hehe",
age : 24
}]);
});
app.get("/0.json",function(req, res) {
res.setHeader('Content-Type', 'application/json;charset=utf-8');
res.send([{
name : "youare",
age : "welcome"
}]);
});
app.get("/1.json",function(req, res) {
res.setHeader('Content-Type', 'application/json;charset=utf-8');
res.send([{
name : "yy",
age : 22
},{
name : "niubiu",
age : 50
}]);
});
app.get("/2.json",function(req, res) {
res.setHeader('Content-Type', 'application/json;charset=utf-8');
res.send([{
name : "ddp",
age : 33
},{
name : "makiro",
age : 20
}]);
});
app.post("/0",function(req, res) {
res.setHeader('Content-Type', 'application/json;charset=utf-8');
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
data.list = Mock.Random.shuffle(data.list);
res.send(data);
});
app.post("/id",function(req, res) {
res.setHeader('Content-Type', 'application/json;charset=utf-8');
res.send("yy");
});
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
第二个例子:
我们在firefox或者是chrome里面一直用console.log 等打log的方法, angular对这些方法进行了简单的封装:
运行下面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
<!--
<script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>
-->
<!--
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-resource.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
-->
</head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script> <div class="panel panel-default">
<div class="panel-heading">
$log()的使用, 主要用来调试:
</div>
<div class="panel-body" ng-controller="LogController">
<div class="alert alert-success">
<input class="btn" type="text" ng-model="message"/>
<button class="btn btn-danger" ng-click="$log.log(message)">log</button>
<button class="btn btn-danger" ng-click="$log.warn(message)">warn</button>
<button class="btn btn-danger" ng-click="$log.info(message)">info</button>
<button class="btn btn-danger" ng-click="$log.error(message)">error</button>
</div>
</div>
<script type="text/javascript">
app.controller('LogController', ['$scope', '$log', function($scope, $log) {
$scope.$log = $log;
$scope.message = 'Hello World!';
}]);
</script>
</div>
</body>
</html>
例子3:
angular的路由处理, ng-view的使用, 所有对应路由的模板会在 标志有ng-view属性的div中显示. 我们通过url控制页面对应的逻辑是个好主意么么哒;
运行下面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
<!---->
<script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-resource.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script> </head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",['ngRoute']);
</script> <!--使用angular的路由处理-->
<div class="panel panel-default">
<div class="panel-heading">
ng-view的实例
</div>
<div class="panel-body" ng-controller="route">
<ul class="nav nav-pills" role="tablist" >
<li role="presentation" ng-repeat="id in [1, 2, 3 ]">
<a href="#/list/{{ id }}"> ID{{ id }}</a>
</li> </ul>
<div ng-view></div>
</div>
</div>
<script type="text/javascript">
app.controller("route",function(){});
//app.controller("hehe", );
//路由是定义在app的config里面的;
app.config(function($routeProvider, $locationProvider) {
console.log($routeProvider);
/*
app.controller("hehe", function($scope, $routeParams) {
$scope.ver = $routeParams.bookId
//$scope
});
*/
$routeProvider.when('/list/:bookId', {
template: '<div>This is in page : <a href="#/list/{{ver}}/detail">href-to-{{ver}}</a></div>',
controller : function($scope, $routeParams) {
$scope.ver = $routeParams.bookId
}
})
.when('/list/:bookId/detail', {
template : "<div>this is detail : {{bookId}}</div><a href='#/list/{{bookId}}'>back</a>",
controller : function($scope, $routeParams) {
console.log( $routeParams )
$scope.bookId = $routeParams.bookId;
}
})
//剩下的走这路由
.otherwise; })
</script>
</body>
</html>
angularJS中-$route路由-$http(ajax)的使用的更多相关文章
- 【angularJS】Route路由
介绍 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). ...
- Ⅲ.AngularJS的点点滴滴-- 路由
路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...
- 两强相争，鹿死谁手 — JQuery中的Ajax与AngularJS中的$http
一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...
- AngularJS ui-router (嵌套路由)
http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...
- 一步步学习ASP.NET MVC3 (14)——Route路由
请注明转载地址:http://www.cnblogs.com/arhat 由于今天是星期六,所以多写几篇,感觉前几天的忙碌没有及时发布文章,趁着周末老魏尽力的多写几篇文章.因为本系列基本上快结束了,所 ...
- [转]AngularJS ui-router (嵌套路由)
本文转自:http://www.oschina.net/translate/angularjs-ui-router-nested-routes http://www.codeproject.com/A ...
- AngularJS 视图和路由
在AngularJS之后引用angular-route 路由 ngRoute模块加载声明 AngularJS提供的when和otherwise两个方法来定义应用的路由 otherwise ...
- [PHP] - Laravel - Route路由
前言 这里使用的是Laravel 5 PHP Laravel的路由比较强悍,但也正因如此,不统一而容易凌乱.比如在路由中可以直接写方法操作(破坏封装啊) 以下是个人学习的例子,不供参考 路由中的直接方 ...
- laravel route路由
基本路由 您的应用程序的绝大多数路由将在 app/routes.php 文件中定义.Laravel 中最简单的路由由一个 URI 和一个闭包调用组成. 基本 GET 路由 代码如下: Route::g ...
随机推荐
- POJ 2823 Sliding Window
Sliding Window Time Limit: 12000MSMemory Limit: 65536K Case Time Limit: 5000MS Description An array ...
- SQOOP Load Data from Oracle to Hive Table
sqoop import -D oraoop.disabled=true \ --connect "jdbc:oracle:thin:@(description=(address=(prot ...
- Android配置----Eclipse+BlueStacks调试Android应用
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...
- svn分支开发与主干合并(branch & merge)
下面我将step by step地演示如何一次完整的branching和merging,包括创建分支.分支开发.分支和主线同步,分支合并到主线的全过程,甚至包括如何在本地创建一个测试用的reposit ...
- java 15 - 6 List的方法
List集合的特有功能: A:添加功能 void add(int index,Object element):在指定索引处添加元素 B:获取功能 Object get(int index):获取指定索 ...
- vmware12安装vmtools
一. 1. 机器要开启支持BIOS的选项. 二. 1. 点击vmware 应用 vmware install 2. 虚拟机: tar xvf vmtools-distb.tgr.gz 3. 虚拟机: ...
- SQL 第一范式、第二范式、第三范式、BCNF
作者 : Dolphin 原文地址: http://blog.csdn.net/qingdujun/article/details/27365979 一.第一范式 1NF 要求:每一个分量必须是不可分 ...
- 2014Ember带来怎样的变化？
每隔几个月的时间,Ember的核心团队就会聚在一起讨论目前遇到的各种问题,并决定下一季度需要优先处理的各种事务. 这一次,在俄勒冈州的波特兰,大家聚在一起,商讨2014年的发展方向. 开发工具 &am ...
- Spring2.5与JDK8的集成问题
Spring2.5不支持JDK8及其以上的版本,因为有一段校验JDK版本的代码,当JDK版本大于1.7之后,会识别成JDK1.4之前的.会报版本太低的错误. /* * Copyright 2002-2 ...
- f2fs源码解析(五) node管理结构梳理
node是f2fs重要的管理结构, 它非常重要! 系统挂载完毕后, 会有一个f2fs_nm_info结构的node管理器来管理node的分配. f2fs_nm_info中最让人疑惑的是几颗基数树: s ...