搜索
您的当前位置:首页正文

AngularJS实现与后台服务器进行交互的示例讲解

2023-12-07 来源:爱乐情感

AngularJS作为一个非常实用的前端框架,我们知道在AngularJS中有自己的Model和Controler。

angularJS中所有的请求都是通过js定义的Controler来完成的,也就是我们完全脱离了后台,

将整个应用程序的压力交给了客户端来完成。但是在实际开发的时候我们难免需要访问后台或者

与数据库进行交互,这个时候我们就需要一个类似于JQAJAX的方法来进行数据访问。

在angularJS中提供了一种与远程Http服务器交互的服务,$http

$http是angularJS中的一个可信服务,利用浏览器的XMLHTTPRequest核心对象与远程http服务器进行交互。

$http的使用方法也不难理解,与Jquery提供的$ajax操作比较类似。也支持get、post等。

使用格式:

// 简单的 GET 请求,可以改为 POST$http({method:'post',//提交方式url:'Account/DoLogin',//提交路径data:$scope.user,//传递到后台的数据,json对象headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, //当post方式提交的时候需要加上这段来解决后台获取不到数据的问题 transformRequest: function ( data ) { var str = ''; for( var i in data ) { str += i + '=' + data[i] + '&'; } return str.substring(0,str.length-1); }//解析json对象的自定义函数}).then(function successCallback(response){//请求成功执行的代码},function errorCallback(response){//请求失败执行的代码});

POST与GET简写方法格式:

$http.get('/someUrl', config).then(successCallback, errorCallback);$http.post('/someUrl', data, config).then(successCallback, errorCallback);

以上这篇AngularJS实现与后台服务器进行交互的示例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

小编还为您整理了以下内容,可能对您也有帮助:

如何通过AngularJs从后台取数据

为了实现这一点,Angular提供了一个叫做$http的服务。它提供了一个可扩展的抽象方法列表,使得与服务器的交互更加容易。它支持HTTP、JSONP和CORS方式。它还包含了安全性支持,避免JSON格式的脆弱性和XSRF。它让你可以轻松地转换请求和响应数据,甚至还实现了简单的缓存。

例如,我们打算让购物站点从服务器上获取商品信息,而不是从内存假数据获取。如何编写服务端代码已经超越了本书的范畴,所以,我们仅仅来想象一下,比方说我们已经创建了一个服务器,当查询/procts 路径时,它会以JSON格式返回一个商品列表。

返回的响应示例如下:

[

{

"id": 0,

"title": "Paint pots",

"description": "Pots full of paint",

"price": 3.95

},

{

"id": 1,

"title": "Polka dots",

"description": "Dots with that polka groove",

"price": 12.95

},

{

"id": 2,

"title": "Pebbles",

"description": "Just little rocks, really",

"price": 6.95

}

...etc...

]

我们可以像下面这样编写查询代码:

function ShoppingController($scope, $http) {

$http.get('/procts').success(function(data, status, headers, config) {

$scope.items = data;

});

}

然后在模板中这样使用它:

<body ng-controller="ShoppingController">

<h1>Shop!</h1>

<table>

<tr ng-repeat="item in items">

<td>{{item.title}}</td>

<td>{{item.description}}</td>

<td>{{item.price | currency}}</td>

</tr>

</table>

</div>

</body>

正如我们前面讲过的,从长远来看,让服务来代理与服务器交互的工作对我们有好处,这个服务可以被多个控制器共享。

hbuilder前端怎么和后端交互

在HBuilder前端开发中,与后端进行交互是非常常见的需求,以便获取数据、发送请求或与服务器进行通信。以下是一些常用的方式来实现HBuilder前端与后端的交互~

hbuilder前端和后端交互教程

1、AJAX请求:使用JavaScript中的AJAX技术,通过XMLHttpRequest对象或fetchAPI向后端发送异步请求,获取数据或提交表单数据。可以使用GET或POST方法发送请求,并通过回调函数处理后端返回的数据。

2、使用框架或库:HBuilder可以结合使用流行的前端框架或库,如Vue.js、React.js或AngularJS等。这些框架提供了更高级的封装和便捷的方式来与后端进行交互,例如通过组件或服务来处理API请求和响应。

3、使用HTTP代理:如果前端开发时需要跨域请求后端API接口,可以配置一个HTTP代理服务器来转发请求。通过配置代理,前端可以绕过浏览器的同源策略,将请求发送到代理服务器,再由代理服务器将请求转发到后端。

以上是几种常见的HBuilder前端与后端交互的方式。根据具体的项目需求和技术选型,选择合适的方式来实现前后端之间的数据传输和交互。

AngularJS中directive指令使用之事件绑定与指令交互用法示例

本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考,具体如下:
AngularJS中模板的使用,事件绑定以及指令与指令之间的交互
<!doctype
html>
<html
ng-app="myapp">
<head>
<meta
charset="utf-8"/>
</head>
<body
ng-controller="ShieldController">
<div>
<who></who>
</div>
<div>
<button
you-btn></button>
</div>
<theshield
reigns>343</theshield>
<theshield
reigns>fdhg</theshield>
<theshield
rollins>hhh</theshield>
<theshield
ambros>kkk</theshield>
</body>
<script
src="./js/angular.min.js"></script>
<script>
var
app
=
angular.mole('myapp',[]);
/*=======================1.
模板的使用
========================*/
app.directive('who',function(){
return
{
restrict:"E",
//元素element
的意思
link:function(scope,element,attrs){
console.log(element);
element[0].innerHTML
=
'sdfhkj';
//这个优先级别最高
},
//templateUrl:"param.html",
//这个不显示
优先级别最低
template:"<h1>jkdhf</h1>"
//这个显示
优先级别其次
};
});
/*=======================2.
事件的绑定
========================*/
app.directive('youBtn',function(){
return
{
restrict:"A",
//attribute
属性的意思
link:function(scope,element,attrs){
console.log(element);
element[0].innerHTML
=
'my
btn';
//事件绑定
element.bind('mouseenter',function(){
element[0].innerHTML
=
'your
btn';
});
element.bind('mouseleave',function(){
element[0].innerHTML
=
'her
btn';
});
}
};
});
/*=======================3.
元素
属性
控制器之间的交互========================*/
app.controller('ShieldController',function($scope){
$scope.shieldNames
=
[];
this.addReigns
=
function(){
$scope.shieldNames.push("reigns:jjj");
}
this.addRollins
=
function(){
$scope.shieldNames.push("Rollins:hhh");
}
this.addAmbros
=
function(){
$scope.shieldNames.push("Ambros:ggg");
}
})
.directive('reigns',function(){
return
{
require:"theshield",
link:function(scope,element,attrs,ShieldController){
ShieldController.addReigns();
}
};
})
.directive('rollins',function(){
return
{
require:"theshield",
link:function(scope,element,attrs,ShieldController){
ShieldController.addRollins();
}
};
})
.directive('ambros',function(){
return
{
require:"theshield",
link:function(scope,element,attrs,ShieldController){
ShieldController.addAmbros();
}
};
})
.directive('theshield',function(){
return
{
restrict:"E",
controller:"ShieldController",
//指定控制器
scope:{},
//清空该指令处的$scope

link:function(scope,element,attrs){
element.bind('mouseenter',function(){
//对于该指令所对应的元素绑定对应的事件
console.log(scope.shieldNames);
});
}
};
});
</script>
</html>
希望本文所述对大家AngularJS程序设计有所帮助。

AngularJS中directive指令使用之事件绑定与指令交互用法示例

本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考,具体如下:
AngularJS中模板的使用,事件绑定以及指令与指令之间的交互
<!doctype
html>
<html
ng-app="myapp">
<head>
<meta
charset="utf-8"/>
</head>
<body
ng-controller="ShieldController">
<div>
<who></who>
</div>
<div>
<button
you-btn></button>
</div>
<theshield
reigns>343</theshield>
<theshield
reigns>fdhg</theshield>
<theshield
rollins>hhh</theshield>
<theshield
ambros>kkk</theshield>
</body>
<script
src="./js/angular.min.js"></script>
<script>
var
app
=
angular.mole('myapp',[]);
/*=======================1.
模板的使用
========================*/
app.directive('who',function(){
return
{
restrict:"E",
//元素element
的意思
link:function(scope,element,attrs){
console.log(element);
element[0].innerHTML
=
'sdfhkj';
//这个优先级别最高
},
//templateUrl:"param.html",
//这个不显示
优先级别最低
template:"<h1>jkdhf</h1>"
//这个显示
优先级别其次
};
});
/*=======================2.
事件的绑定
========================*/
app.directive('youBtn',function(){
return
{
restrict:"A",
//attribute
属性的意思
link:function(scope,element,attrs){
console.log(element);
element[0].innerHTML
=
'my
btn';
//事件绑定
element.bind('mouseenter',function(){
element[0].innerHTML
=
'your
btn';
});
element.bind('mouseleave',function(){
element[0].innerHTML
=
'her
btn';
});
}
};
});
/*=======================3.
元素
属性
控制器之间的交互========================*/
app.controller('ShieldController',function($scope){
$scope.shieldNames
=
[];
this.addReigns
=
function(){
$scope.shieldNames.push("reigns:jjj");
}
this.addRollins
=
function(){
$scope.shieldNames.push("Rollins:hhh");
}
this.addAmbros
=
function(){
$scope.shieldNames.push("Ambros:ggg");
}
})
.directive('reigns',function(){
return
{
require:"theshield",
link:function(scope,element,attrs,ShieldController){
ShieldController.addReigns();
}
};
})
.directive('rollins',function(){
return
{
require:"theshield",
link:function(scope,element,attrs,ShieldController){
ShieldController.addRollins();
}
};
})
.directive('ambros',function(){
return
{
require:"theshield",
link:function(scope,element,attrs,ShieldController){
ShieldController.addAmbros();
}
};
})
.directive('theshield',function(){
return
{
restrict:"E",
controller:"ShieldController",
//指定控制器
scope:{},
//清空该指令处的$scope

link:function(scope,element,attrs){
element.bind('mouseenter',function(){
//对于该指令所对应的元素绑定对应的事件
console.log(scope.shieldNames);
});
}
};
});
</script>
</html>
希望本文所述对大家AngularJS程序设计有所帮助。

如何用AngularJS实现web开发的MVC框架

MVC模式学习之MVC解释:
Model(模型)——View(视图)——Controller(控制器)
1、视图和控制器都依赖于模型;
2、模型相对独立,可以自己的调试和使用
3、在胖客户端程序中,视图和控制器的分离是次要的。
4、在Web程序中可以将视图理解为浏览器,服务器端组件为控制器,模型即为业务逻辑模块
MVC的处理过程:
首先控制器接收用户的请求,并决定应该调用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器用相应的视图格式化模型返回的数据,并通过表示层呈现给用户。
Angular.js 的wed MVC框架:
目前的前端MVC 框架有很多,如Angular.js,Backbone.js,Javascript MVC,Knockout.js等。虽然都是基于MVC,但是每个框架都有自己处理问题的方法,下面简要分析Angular.js的特点以及适用范围: AngularJS是Google推出的开源的JavaScript MV*(MVW、MVVM、MVC)框架,目前由Google维护。AngularJS弥补了HTML在构建应用方面的不足,其通过使用标识符(directives)结构,来扩展Web应用中的HTML词汇,使开发者可以使用HTML来声明动态内容,从而使得Web开发和测试工作变得更加容易。

使用AngularJS,Model直接与UI视图绑定,Model与UI视图的关系,通过directive封装,AngularJS内置的通用directive,就能实现大部分操作了,也就是说,基本不必关心Model与UI视图的关系,直接操作Model就行了,UI视图自动更新。而Model数据验证、与服务器端的数据交互都是非常简单而自由的。
AngularJS的directive,你输入特定数据,他就能输出相应UI视图,这样的directive可以变成了一个html通用组件,比如文章编辑器组件、分页导航组件、madal组件等,在不同应用中可以直接拿来用,减少重复开发。

用angular.js,写UI视图就是写正常的HTML/CSS,写逻辑控制代码就是用JavaScript操控数据(不是DOM),不同的就是增加了directive,实现DOM与数据的互动,如上所述,directive是通用组件。AngularJS只是定义了一个环境和一个数据与视图交互的机制,并提供了若干通用组件和服务,所以AngularJS开发很简单,很高效,很“原生态”。

如何用AngularJS实现web开发的MVC框架

MVC模式学习之MVC解释:
Model(模型)——View(视图)——Controller(控制器)
1、视图和控制器都依赖于模型;
2、模型相对独立,可以自己的调试和使用
3、在胖客户端程序中,视图和控制器的分离是次要的。
4、在Web程序中可以将视图理解为浏览器,服务器端组件为控制器,模型即为业务逻辑模块
MVC的处理过程:
首先控制器接收用户的请求,并决定应该调用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器用相应的视图格式化模型返回的数据,并通过表示层呈现给用户。
Angular.js 的wed MVC框架:
目前的前端MVC 框架有很多,如Angular.js,Backbone.js,Javascript MVC,Knockout.js等。虽然都是基于MVC,但是每个框架都有自己处理问题的方法,下面简要分析Angular.js的特点以及适用范围: AngularJS是Google推出的开源的JavaScript MV*(MVW、MVVM、MVC)框架,目前由Google维护。AngularJS弥补了HTML在构建应用方面的不足,其通过使用标识符(directives)结构,来扩展Web应用中的HTML词汇,使开发者可以使用HTML来声明动态内容,从而使得Web开发和测试工作变得更加容易。

使用AngularJS,Model直接与UI视图绑定,Model与UI视图的关系,通过directive封装,AngularJS内置的通用directive,就能实现大部分操作了,也就是说,基本不必关心Model与UI视图的关系,直接操作Model就行了,UI视图自动更新。而Model数据验证、与服务器端的数据交互都是非常简单而自由的。
AngularJS的directive,你输入特定数据,他就能输出相应UI视图,这样的directive可以变成了一个html通用组件,比如文章编辑器组件、分页导航组件、madal组件等,在不同应用中可以直接拿来用,减少重复开发。

用angular.js,写UI视图就是写正常的HTML/CSS,写逻辑控制代码就是用JavaScript操控数据(不是DOM),不同的就是增加了directive,实现DOM与数据的互动,如上所述,directive是通用组件。AngularJS只是定义了一个环境和一个数据与视图交互的机制,并提供了若干通用组件和服务,所以AngularJS开发很简单,很高效,很“原生态”。

angularjs能够调用restful api吗

可以的

REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格。RESTful风格的设计不仅具有更好的可读性(Human
Readable),而且易于做缓存以及服务器扩展(scalability)。REST风格体现在URL设计上:

每个URL对应一个资源
对资源的不同操作对应于HTTP的不同方法
资源表现形式(representation)通过Accept和Content-Type指定

AngularJS提供了$resourceService来更方便地与RESTful服务器API进行交互,可以方便地定义一个REST资源,而不必手动所有的声明CRUD方法。

参考文档: https://docs.angularjs.org/api/ngResource/service/$resource

Resource Factory

$resourceService定义在ngResourceMole中,需要在你的HTML中引入这个Mole对应的JS,同时在你的APP中添加这样一个依赖:

var app = angular.mole('helloApp, ['ngResource']);

然后为资源建立一个Factory:

app.factory('Notes', ['$resource', function($resource) {
return $resource('/notes/:id');
}]);

当然,你也可以不把$esource的实例放到Factory里,直接在控制器中存起来:var
Notes = $resource('/notes/:id)。

CRUD

在你的控制器中就可以对资源进行增删改查了:

app.controller('NotesCtrl', ['$scope', 'Notes', function($scope, Notes) {
var notes = Notes.query(function(){
// GET: /notes
// Response: [{id: 1, content: 'hello'}, {id: 2, content: 'world'}];

var first = notes[0];
first.content = 'halo';
first.$save();
// POST: /notes/1 {id: 1, content: 'halo'}
// Response: {id: 1, content: 'halo'}

second.$delete();
// DELETE: /notes/2
});

var note = new Notes({content: 'xxx'});
note.$save();
// POST: /notes
// Response: {id: 3, content: 'xxx'}
}]);

PUT 操作

$resource提供了五种默认操作:get, query, save, remove, delete。你可以配置一个update操作来完成HTTP
PUT:

app.factory('Notes', ['$resource', function($resource) {
return $resource('/notes/:id', null, {
update: { method:'PUT' }
});
}]);

现在,你可以在控制器中获取一个note并更新它:

var note = Notes.get({ id: 3}),
$id = note.id;

note.content = 'yyy';
Notes.update({ id:$id }, note);
// PUT /notes/3 {id: 3, content: 'yyy'}

现在你的Notes有六种操作了。这些操作有两种调用方式:

通过资源类调用,例如:Notes.update({id:
xxx});
通过资源实例调用,例如:note.$update(),此时操作名需加前缀$。

具体的调用参数可参考文档:

HTTP GET "class" actions: Resource.action([parameters], [success], [error])

non-GET "class" actions: Resource.action([parameters], postData, [success], [error])

non-GET instance actions: instance.$action([parameters], [success], [error])

其中,success参数为(value,
responseHeaders),error参数为(httpResponse)。

属性/URL映射

上述例子中,我们看到note对象的id属性会映射到URL中的:id(/notes/:id)。如果你的业务更加复杂,可以手动配置这个映射关系。例如:

var Notes = $resouce('/users/:userId/notes/:noteId', {
noteId: '@id',
userId: '@owner'
}

将会读取note的owner和id属性来生成URL,比如删除note时:

// note === {id: 123, owner: 'alice', content: 'hello'}
note.$delete();
// DELETE: /users/alice/notes/123

在构造$resource时,多于的属性映射会成为URL
Query。例如:

var Notes = $resouce('/notes/:id', {
id: '@id',
user: '@owner'
});
// note === {id: 123, owner: 'alice', content: 'hello'}
note.$delete();
// DELETE: /notes/123?user=alice

REST操作的声明和调用中,多于的属性会成为URL Query。例如:

var Notes = $resouce('/notes/:id', {id: '@id'}, {
update: {method: 'PUT', operator: 'bob'}
});
// note === {id: 123, content: 'hello'}
note.$update({trusted: true});
// PUT: /notes/123?operator=bob&trusted=true {id: 123, content: 'hello'}

响应转换

有时基于既定的后台设计,无法提供完全RESTful的API,比如/notes返回的是一个分页器对象,而非数组。此时,我们仍然可以使用$resource,但需要设置响应转换回调。例如:

var Notes = $resouce('/notes/:id', null, {
pager: {
method: 'GET',
transformResponse: function(data, headers){
// Server respond:
// data = {currentPage: 1,
// totalPage: 20,
// pageSize: 2,
// content: [{id: 1, content: 'hello'}, {id: 2, content: 'world'}]}
var pager = JSON.parse(data);
return pager.content;
}
}
});
var notes = Notes.query(function(){
// GET: /notes
// notes === [{id: 1, content: 'hello'}, {id: 2, content: 'world'}]
});

类似响应重写,你还可以设置请求转换transformRequest。

虽然$resource的设计可以支持绝大多数的URL和内容表示设计,但如果你发现$resource的使用过程极其复杂,那可能是你的服务器API并不满足RESTful风格。

地址: http://harttle.com/2015/06/05/angular-resource.html

angularjs能够调用restful api吗

可以的

REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格。RESTful风格的设计不仅具有更好的可读性(Human
Readable),而且易于做缓存以及服务器扩展(scalability)。REST风格体现在URL设计上:

每个URL对应一个资源
对资源的不同操作对应于HTTP的不同方法
资源表现形式(representation)通过Accept和Content-Type指定

AngularJS提供了$resourceService来更方便地与RESTful服务器API进行交互,可以方便地定义一个REST资源,而不必手动所有的声明CRUD方法。

参考文档: https://docs.angularjs.org/api/ngResource/service/$resource

Resource Factory

$resourceService定义在ngResourceMole中,需要在你的HTML中引入这个Mole对应的JS,同时在你的APP中添加这样一个依赖:

var app = angular.mole('helloApp, ['ngResource']);

然后为资源建立一个Factory:

app.factory('Notes', ['$resource', function($resource) {
return $resource('/notes/:id');
}]);

当然,你也可以不把$esource的实例放到Factory里,直接在控制器中存起来:var
Notes = $resource('/notes/:id)。

CRUD

在你的控制器中就可以对资源进行增删改查了:

app.controller('NotesCtrl', ['$scope', 'Notes', function($scope, Notes) {
var notes = Notes.query(function(){
// GET: /notes
// Response: [{id: 1, content: 'hello'}, {id: 2, content: 'world'}];

var first = notes[0];
first.content = 'halo';
first.$save();
// POST: /notes/1 {id: 1, content: 'halo'}
// Response: {id: 1, content: 'halo'}

second.$delete();
// DELETE: /notes/2
});

var note = new Notes({content: 'xxx'});
note.$save();
// POST: /notes
// Response: {id: 3, content: 'xxx'}
}]);

PUT 操作

$resource提供了五种默认操作:get, query, save, remove, delete。你可以配置一个update操作来完成HTTP
PUT:

app.factory('Notes', ['$resource', function($resource) {
return $resource('/notes/:id', null, {
update: { method:'PUT' }
});
}]);

现在,你可以在控制器中获取一个note并更新它:

var note = Notes.get({ id: 3}),
$id = note.id;

note.content = 'yyy';
Notes.update({ id:$id }, note);
// PUT /notes/3 {id: 3, content: 'yyy'}

现在你的Notes有六种操作了。这些操作有两种调用方式:

通过资源类调用,例如:Notes.update({id:
xxx});
通过资源实例调用,例如:note.$update(),此时操作名需加前缀$。

具体的调用参数可参考文档:

HTTP GET "class" actions: Resource.action([parameters], [success], [error])

non-GET "class" actions: Resource.action([parameters], postData, [success], [error])

non-GET instance actions: instance.$action([parameters], [success], [error])

其中,success参数为(value,
responseHeaders),error参数为(httpResponse)。

属性/URL映射

上述例子中,我们看到note对象的id属性会映射到URL中的:id(/notes/:id)。如果你的业务更加复杂,可以手动配置这个映射关系。例如:

var Notes = $resouce('/users/:userId/notes/:noteId', {
noteId: '@id',
userId: '@owner'
}

将会读取note的owner和id属性来生成URL,比如删除note时:

// note === {id: 123, owner: 'alice', content: 'hello'}
note.$delete();
// DELETE: /users/alice/notes/123

在构造$resource时,多于的属性映射会成为URL
Query。例如:

var Notes = $resouce('/notes/:id', {
id: '@id',
user: '@owner'
});
// note === {id: 123, owner: 'alice', content: 'hello'}
note.$delete();
// DELETE: /notes/123?user=alice

REST操作的声明和调用中,多于的属性会成为URL Query。例如:

var Notes = $resouce('/notes/:id', {id: '@id'}, {
update: {method: 'PUT', operator: 'bob'}
});
// note === {id: 123, content: 'hello'}
note.$update({trusted: true});
// PUT: /notes/123?operator=bob&trusted=true {id: 123, content: 'hello'}

响应转换

有时基于既定的后台设计,无法提供完全RESTful的API,比如/notes返回的是一个分页器对象,而非数组。此时,我们仍然可以使用$resource,但需要设置响应转换回调。例如:

var Notes = $resouce('/notes/:id', null, {
pager: {
method: 'GET',
transformResponse: function(data, headers){
// Server respond:
// data = {currentPage: 1,
// totalPage: 20,
// pageSize: 2,
// content: [{id: 1, content: 'hello'}, {id: 2, content: 'world'}]}
var pager = JSON.parse(data);
return pager.content;
}
}
});
var notes = Notes.query(function(){
// GET: /notes
// notes === [{id: 1, content: 'hello'}, {id: 2, content: 'world'}]
});

类似响应重写,你还可以设置请求转换transformRequest。

虽然$resource的设计可以支持绝大多数的URL和内容表示设计,但如果你发现$resource的使用过程极其复杂,那可能是你的服务器API并不满足RESTful风格。

地址: http://harttle.com/2015/06/05/angular-resource.html

dist包与后端如何交互

dist包与后端使用数据接*互。根据查询相关公开信息显示使用AngularJS开发前端,使用Springmvc开发Restful类型的后台接口,前端与后端使用接口进行数据交互。dist包是static文件夹和index.html文件。

dist包与后端如何交互

dist包与后端使用数据接*互。根据查询相关公开信息显示使用AngularJS开发前端,使用Springmvc开发Restful类型的后台接口,前端与后端使用接口进行数据交互。dist包是static文件夹和index.html文件。

如何在AngularJS指令中创建controller与ngModel进行交互

在本文中,我们将一步一步学着创建一个用来输入时间值的指令。我们的目标是能够将一个普通的文本输入字段变成一个能够以HH:mm格式显示时间的时间选择器,但是将它以毫秒为单位存储在我们的数据属性中。

对于这个例子,我们的HTML非常简单,如下所示:

<input type='text' ng-model='timeOfDay' time-picker/>

显然,我们需要在主页中包含一个timePicker插件以便于它能够被绑定在我们的input上。对于这个指令,我们首先来进行一个最基本的定义,由于我们需要数据绑定功能,我们将从一开始就require ngModel:

.directive('timePicker',function(){
   var today = new Date(new Date().toString());
   return {
       require: '?ngModel',
       link: function($scope,$element,$attrs,ngModel){

       }
   }
});  

注意到我们需要涉及元素的实际实例,因此我们所有的代码基本上都位于linking函数中,我们在此完全不需要担心编译过程。我们同事也实例化了一个today变量来保存一个Date对象,以此在午夜十分更新。创建这个变量作为factory函数的一部分允许我们在多个实例之间分享一个today变量。注意,尽管这允许我们将内存的使用最小化,它也意味着如果我们的应用在半夜还依然再运行,我们的指令会开始提供不准确的结果。如果你打算将这个指令用于一个实时应用中,你最好创建另一个函数在第二天来临时更新这个值。现在,我们急需要看我们的controller函数:

link: function($scope.$element,$attrs,ngModel){
   ngModel = ngModel || {
       "$setViewValue" : angular.noop
   }
}  

你以前可能也注意过这种模式。一定要记住我们让我们的controller有进行选择性的需求,因此如果有人想要使用我们的指令来绑定一个timepicker,而不需要由ngModel提供一个数据绑定,当指令没找到一个请求的controller时它也不会抛出一个错误。在这里,如果ngModel被定义了,我们就使用它,否则,我们就使用自定义的那个对象,其中有一个noop函数。于是当我们在指令中调用ngModel.$setViewValue时,如果没有ng-Model绑定到我们的节点上,我们的代码会继续执行。

说到ngModel.$setViewValue,我们来看看我们如何绑定我们的time picker,以及我们在什么地方会需要这个函数:

link: function($scope,$element,$attrs,ngModel){
   ..
   var initialized = false;
   setTimeout(function(){
       initialized = $element.timepicker()
           .on('changeTime',function(ev,ui){
               var sec = $element.timepicker('getSecondsFrimMidnight');
               ngModel.$setViewValue(sec * 1000);
           });
   });
}

毫无疑问的,你的第一个问题肯定是关于setTimeout的,因为它其中居然没有实际的延时数字。因为我们处于linking函数中,我们的$element是完全被实例化的,因此这种小技巧是没有必要的。但是我们还是推荐使用这种办法。

现在我们来看看我们如何使用$setViewValue。因为我们之前已经获得了一个分享的ngModel的实例,我们现在可以在我们的指令中调用$setViewValue函数,它将帮助我们链接我们的插件和数据模型。记住这是用来接受显示值的,它可以进行任何必要的解析,然后将它储存在数据属性中。timepicker插件将会发送一个changeTime时间,只要用户更新了在我们的input中显示的时间,因此我们使用它来了解应该何时改变内部值。在我们的时间处理函数内部,我们只需要获得自午夜以来的秒数,对此插件提供了一个方便的方法,然后将它乘以1000并传递给$setViewValue。当我们完成了以上过程,我们的数据将会经历以下的步骤:

一旦我们将我们的timepicker实例化完成并监听视图上的变化,我们的下一步就是要定义$render方法,它将负责将数据值转换为合适的显示或者视图值。只要我们指令内部的数值发生变化,它就会发生,包括第一次实例化时:

link : function ($scope, $element, $attrs, ngModel) {
    ...
    ngModel.$render = function (val) {
      if (!initialized) {

      //如果$render在我们的timepicker插件准备好之前就被调用,返回

           return; };
      $element.timepicker('setTime', new Date(today.getTime() + val));
    }
}  

再次,注意到我们实际上重定义了$render方法,因此当ngModel观察到一个数据变化时,它告诉控制器来执行$render,这时我们定义的$render就被调用了。我们所需要做的仅仅是将数据模型的值转换成为我们的插件期待的值。在这个例子中,timepicker插件提供了一种方法来设置时间显示。因为我们的时间以毫秒存储,当我们需要渲染一个值时,我们只需要简单地从today获取时间,加上我们的新值,然后用这个值创建一个Date对象即可。当我们完成时,我们的数据将会通过以下步骤返回到视图中:

如何在AngularJS指令中创建controller与ngModel进行交互

在本文中,我们将一步一步学着创建一个用来输入时间值的指令。我们的目标是能够将一个普通的文本输入字段变成一个能够以HH:mm格式显示时间的时间选择器,但是将它以毫秒为单位存储在我们的数据属性中。

对于这个例子,我们的HTML非常简单,如下所示:

<input type='text' ng-model='timeOfDay' time-picker/>

显然,我们需要在主页中包含一个timePicker插件以便于它能够被绑定在我们的input上。对于这个指令,我们首先来进行一个最基本的定义,由于我们需要数据绑定功能,我们将从一开始就require ngModel:

.directive('timePicker',function(){
   var today = new Date(new Date().toString());
   return {
       require: '?ngModel',
       link: function($scope,$element,$attrs,ngModel){

       }
   }
});  

注意到我们需要涉及元素的实际实例,因此我们所有的代码基本上都位于linking函数中,我们在此完全不需要担心编译过程。我们同事也实例化了一个today变量来保存一个Date对象,以此在午夜十分更新。创建这个变量作为factory函数的一部分允许我们在多个实例之间分享一个today变量。注意,尽管这允许我们将内存的使用最小化,它也意味着如果我们的应用在半夜还依然再运行,我们的指令会开始提供不准确的结果。如果你打算将这个指令用于一个实时应用中,你最好创建另一个函数在第二天来临时更新这个值。现在,我们急需要看我们的controller函数:

link: function($scope.$element,$attrs,ngModel){
   ngModel = ngModel || {
       "$setViewValue" : angular.noop
   }
}  

你以前可能也注意过这种模式。一定要记住我们让我们的controller有进行选择性的需求,因此如果有人想要使用我们的指令来绑定一个timepicker,而不需要由ngModel提供一个数据绑定,当指令没找到一个请求的controller时它也不会抛出一个错误。在这里,如果ngModel被定义了,我们就使用它,否则,我们就使用自定义的那个对象,其中有一个noop函数。于是当我们在指令中调用ngModel.$setViewValue时,如果没有ng-Model绑定到我们的节点上,我们的代码会继续执行。

说到ngModel.$setViewValue,我们来看看我们如何绑定我们的time picker,以及我们在什么地方会需要这个函数:

link: function($scope,$element,$attrs,ngModel){
   ..
   var initialized = false;
   setTimeout(function(){
       initialized = $element.timepicker()
           .on('changeTime',function(ev,ui){
               var sec = $element.timepicker('getSecondsFrimMidnight');
               ngModel.$setViewValue(sec * 1000);
           });
   });
}

毫无疑问的,你的第一个问题肯定是关于setTimeout的,因为它其中居然没有实际的延时数字。因为我们处于linking函数中,我们的$element是完全被实例化的,因此这种小技巧是没有必要的。但是我们还是推荐使用这种办法。

现在我们来看看我们如何使用$setViewValue。因为我们之前已经获得了一个分享的ngModel的实例,我们现在可以在我们的指令中调用$setViewValue函数,它将帮助我们链接我们的插件和数据模型。记住这是用来接受显示值的,它可以进行任何必要的解析,然后将它储存在数据属性中。timepicker插件将会发送一个changeTime时间,只要用户更新了在我们的input中显示的时间,因此我们使用它来了解应该何时改变内部值。在我们的时间处理函数内部,我们只需要获得自午夜以来的秒数,对此插件提供了一个方便的方法,然后将它乘以1000并传递给$setViewValue。当我们完成了以上过程,我们的数据将会经历以下的步骤:

一旦我们将我们的timepicker实例化完成并监听视图上的变化,我们的下一步就是要定义$render方法,它将负责将数据值转换为合适的显示或者视图值。只要我们指令内部的数值发生变化,它就会发生,包括第一次实例化时:

link : function ($scope, $element, $attrs, ngModel) {
    ...
    ngModel.$render = function (val) {
      if (!initialized) {

      //如果$render在我们的timepicker插件准备好之前就被调用,返回

           return; };
      $element.timepicker('setTime', new Date(today.getTime() + val));
    }
}  

再次,注意到我们实际上重定义了$render方法,因此当ngModel观察到一个数据变化时,它告诉控制器来执行$render,这时我们定义的$render就被调用了。我们所需要做的仅仅是将数据模型的值转换成为我们的插件期待的值。在这个例子中,timepicker插件提供了一种方法来设置时间显示。因为我们的时间以毫秒存储,当我们需要渲染一个值时,我们只需要简单地从today获取时间,加上我们的新值,然后用这个值创建一个Date对象即可。当我们完成时,我们的数据将会通过以下步骤返回到视图中:

为什么使用AngularJS 指令

使用过 AngularJS 的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能,并且AngularJS 是目前唯一提供Web应用可复用能力的框架。
目前有很多JavaScript. 产品提供插件给Web开发人员。例如, Bootstrap 就是当前比较流行的提供样式和JavaScript插件的前端开发工具包。但是开发人员在使用Booostrap中的插件时, 必须切换到JavaScript. 模式来写 jQuery 代码来激活插件虽然jQuery 代码写起来十分简单,但是必须和HTML进行同步,这是一个单调乏味且容易出错的过程。
AngularJS主页展示了一个简单的例子,用于实现Bootstrap中的 Tab功能,可以在页面中轻松添加 Tab 功能,并且使用方法和 ul 标签一样简单。HTML代码如下:
复制代码

BootStrap Tab Component

This is the content of the first tab.

This is the content of the second tab.

复制代码
JavaScript代码如下:
复制代码
angular.mole('components', []).
directive('tabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: [ "$scope", function($scope) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}
this.addPane = function(pane) {
if (panes.length == 0) $scope.select(pane);
panes.push(pane);
}
}],
template:
'
' +

'
' +

'
'+

'{{pane.title}}' +
'
' +

'
' +

'
' +

'
',

replace: true
};
}).
directive('pane', function() {
return {
require: '^tabs',
restrict: 'E',
transclude: true,
scope: { title: '@' },
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
'
' +

'
',

replace: true
};
})
复制代码
你可以从以下链接查看效果:http://jsfiddle.net/powertoolsteam/GBE7N/1/
image
正如你所见,除了拥有用于实现指令的 和 标签,页面和常规HTML页面没有什么区别。HTML开发人员无需编写任何代码。当然,总需要有第一个吃螃蟹的人,创建指令共享使用,但是目前Tabs指令已经很常见了,可以在任何地方复用(如BootStrap,、jQueryUI、Wijmo, 和一些知名的前端插件集)。
由于指令的易用和易编写,许多用户已经开始使用AngularJS编写指令了。例如, AngularJS 开发组已经基于AngularJS实现了一系列指令-UI Bootstrap 来代替Bootstrap; 知名ComponentOne 控件厂商也在AngularJS 基础上创建了Wijmo ;我们也可以在GitHub上找到一些公共指令资料库:jQueryUI widgets。
拥有了 AngularJS,是不是觉得自己已经站在了巨人的肩膀上了?但是不要高兴的太早,如果已经有了这么多的指令供我们使用,那我们为什么还要学习AngularJS ,为什么还要学习自定义指令呢?
举个简单的例子,也许你有特殊的需求:假设你在一家财务公司工作,你需要创建一张财务表单,它需要以表格的形式展示数据、拥有绑定、编辑、校验并且同步数据更新到服务器的功能。表单插件很常见但是能够满足这些具体需求的不得而知了,所以你必须根据实际业务需求来创建自定义指令。
复制代码

Offshore Investment Summary

customer="currentCustomer"
country="currentCountry">

复制代码
这就是本篇文章的目的,接下来我们会讨论如何创建 AngularJS指令。
创建自定义AngularJS 指令
文章开头的自定义指令十分的简单。它仅仅实现了同步的功能。一般指令是包含更多元素的:
复制代码
//创建指令模块 (或者检索现有模块)
var m = angular.mole("myApp");
// 创建"my-dir"指令
myApp.directive("myDir", function() {
return {
restrict: "E", // 指令是一个元素 (并非属性)
scope: { // 设置指令对于的scope
name: "@", // name 值传递 (字符串,单向绑定)
amount: "=", // amount 引用传递(双向绑定)
save: "&" // 保存操作
},
template: // 替换HTML (使用scope中的变量)
"
" +

" {{name}}: " +
" Save" +
"
",

replace: true, // 使用模板替换原始标记
transclude: false, // 不复制原始HTML内容
controller: [ "$scope", function ($scope) { … }],
link: function (scope, element, attrs, controller) {…}
}
});
复制代码
效果如下:
image
注意这个自定义指令遵循一种格式:以"my" 为前缀,类似于命名空间,因此如果你在应用中引用了多个模块指令,你可以通过前缀很容易的判断出它是在哪定义的。这不是硬性要求,但是这样做可以带来很多便利。
指令的构造函数会返回带有属性的JavaScript. 对象。这些内容在AngularJS 主页中都有清晰说明。以下是我对一些属性的理解:
restrict: 说明指令在HTML中的应用形式,备选项有"A"、"E" 和 "C", "M" ,分别代表 attribute、element、class和comment(默认值为"A")。我们将更多的关注attributes-如何创建UI元素。
scope: 创建指令的作用范围,scope在指令中作为属性标签传递。Scope 是创建可以复用指令的必要条件,每个指令(不论是处于嵌套指令的哪一级)都有其唯一的作用域,它不依赖于父scope。scope 对象定义names 和types 变量。上面的例子即创建了3个scope变量。
name: "@" (值传递,单向绑定):
"@"符号表示变量是值传递。指令会检索从父级scope中传递而来字符串中的值。指令可以使用该值但无法修改,是最常用的变量。
amount: "=" (引用,双向绑定)
"="符号表示变量是引用传递。指令检索主Scope中的引用取值。值可以是任意类型的,包括复合对象和数组。指令可以更改父级Scope中的值,所以当指令需要修改父级Scope中的值时我们就需要使用这种类型。
save: "&" (表达式)
“&”符号表示变量是在父级Scope中启作用的表达式。它允许指令实现比修改值更高级的操作。
template: 替代原始模板中的标记的字符串。替换功能将替换所有旧元素为新值。注意template是如何使用Scope中定义的变量的。这允许你无需写任何额外的代码即可创建macro-style. 风格指令。replace: 说明是否替换原始标记中的值或是追加原始标记中的值。默认值是false,这时原始标记将被保留。
transclude: 说明自定义指令是否复制原始标记中的内容。例如,之前展示的“tab”指令设置了transclude 为 true,因为tab 元素包含其他HTML 元素。 "dateInput" 指令则需要在初始化时为空,所以需要设置transclude 为false。
link: 该方法在指令中扮演着重要的角色。它负责执行DOM 操作和注册事件*等。link 方法包含以下参数:
scope: 指令Scope的引用。scope 变量在初始化时是不被定义的,link 方法会注册监视器监视值变化事件。
element: 包含指令的DOM元素的引用, link 方法一般通过jQuery 操作实例(如果没有加载jQuery,还可以使用Angular's jqLite )。
controller: 在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令,允许指令之间进行交互, tab 指令就是使用该参数较典型的例子:http://jsfiddle.net/powertoolsteam/GBE7N/1/
注意,当调用link 方法时, 通过值传递("@")的scope 变量将不会被初始化,它们将会在指令的生命周期中另一个时间点进行初始化,如果你需要监听这个事件,可以使用scope.$watch 方法。

为什么使用AngularJS 指令

使用过 AngularJS 的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能,并且AngularJS 是目前唯一提供Web应用可复用能力的框架。
目前有很多JavaScript. 产品提供插件给Web开发人员。例如, Bootstrap 就是当前比较流行的提供样式和JavaScript插件的前端开发工具包。但是开发人员在使用Booostrap中的插件时, 必须切换到JavaScript. 模式来写 jQuery 代码来激活插件虽然jQuery 代码写起来十分简单,但是必须和HTML进行同步,这是一个单调乏味且容易出错的过程。
AngularJS主页展示了一个简单的例子,用于实现Bootstrap中的 Tab功能,可以在页面中轻松添加 Tab 功能,并且使用方法和 ul 标签一样简单。HTML代码如下:
复制代码

BootStrap Tab Component

This is the content of the first tab.

This is the content of the second tab.

复制代码
JavaScript代码如下:
复制代码
angular.mole('components', []).
directive('tabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: [ "$scope", function($scope) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}
this.addPane = function(pane) {
if (panes.length == 0) $scope.select(pane);
panes.push(pane);
}
}],
template:
'
' +

'
' +

'
'+

'{{pane.title}}' +
'
' +

'
' +

'
' +

'
',

replace: true
};
}).
directive('pane', function() {
return {
require: '^tabs',
restrict: 'E',
transclude: true,
scope: { title: '@' },
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
'
' +

'
',

replace: true
};
})
复制代码
你可以从以下链接查看效果:http://jsfiddle.net/powertoolsteam/GBE7N/1/
image
正如你所见,除了拥有用于实现指令的 和 标签,页面和常规HTML页面没有什么区别。HTML开发人员无需编写任何代码。当然,总需要有第一个吃螃蟹的人,创建指令共享使用,但是目前Tabs指令已经很常见了,可以在任何地方复用(如BootStrap,、jQueryUI、Wijmo, 和一些知名的前端插件集)。
由于指令的易用和易编写,许多用户已经开始使用AngularJS编写指令了。例如, AngularJS 开发组已经基于AngularJS实现了一系列指令-UI Bootstrap 来代替Bootstrap; 知名ComponentOne 控件厂商也在AngularJS 基础上创建了Wijmo ;我们也可以在GitHub上找到一些公共指令资料库:jQueryUI widgets。
拥有了 AngularJS,是不是觉得自己已经站在了巨人的肩膀上了?但是不要高兴的太早,如果已经有了这么多的指令供我们使用,那我们为什么还要学习AngularJS ,为什么还要学习自定义指令呢?
举个简单的例子,也许你有特殊的需求:假设你在一家财务公司工作,你需要创建一张财务表单,它需要以表格的形式展示数据、拥有绑定、编辑、校验并且同步数据更新到服务器的功能。表单插件很常见但是能够满足这些具体需求的不得而知了,所以你必须根据实际业务需求来创建自定义指令。
复制代码

Offshore Investment Summary

customer="currentCustomer"
country="currentCountry">

复制代码
这就是本篇文章的目的,接下来我们会讨论如何创建 AngularJS指令。
创建自定义AngularJS 指令
文章开头的自定义指令十分的简单。它仅仅实现了同步的功能。一般指令是包含更多元素的:
复制代码
//创建指令模块 (或者检索现有模块)
var m = angular.mole("myApp");
// 创建"my-dir"指令
myApp.directive("myDir", function() {
return {
restrict: "E", // 指令是一个元素 (并非属性)
scope: { // 设置指令对于的scope
name: "@", // name 值传递 (字符串,单向绑定)
amount: "=", // amount 引用传递(双向绑定)
save: "&" // 保存操作
},
template: // 替换HTML (使用scope中的变量)
"
" +

" {{name}}: " +
" Save" +
"
",

replace: true, // 使用模板替换原始标记
transclude: false, // 不复制原始HTML内容
controller: [ "$scope", function ($scope) { … }],
link: function (scope, element, attrs, controller) {…}
}
});
复制代码
效果如下:
image
注意这个自定义指令遵循一种格式:以"my" 为前缀,类似于命名空间,因此如果你在应用中引用了多个模块指令,你可以通过前缀很容易的判断出它是在哪定义的。这不是硬性要求,但是这样做可以带来很多便利。
指令的构造函数会返回带有属性的JavaScript. 对象。这些内容在AngularJS 主页中都有清晰说明。以下是我对一些属性的理解:
restrict: 说明指令在HTML中的应用形式,备选项有"A"、"E" 和 "C", "M" ,分别代表 attribute、element、class和comment(默认值为"A")。我们将更多的关注attributes-如何创建UI元素。
scope: 创建指令的作用范围,scope在指令中作为属性标签传递。Scope 是创建可以复用指令的必要条件,每个指令(不论是处于嵌套指令的哪一级)都有其唯一的作用域,它不依赖于父scope。scope 对象定义names 和types 变量。上面的例子即创建了3个scope变量。
name: "@" (值传递,单向绑定):
"@"符号表示变量是值传递。指令会检索从父级scope中传递而来字符串中的值。指令可以使用该值但无法修改,是最常用的变量。
amount: "=" (引用,双向绑定)
"="符号表示变量是引用传递。指令检索主Scope中的引用取值。值可以是任意类型的,包括复合对象和数组。指令可以更改父级Scope中的值,所以当指令需要修改父级Scope中的值时我们就需要使用这种类型。
save: "&" (表达式)
“&”符号表示变量是在父级Scope中启作用的表达式。它允许指令实现比修改值更高级的操作。
template: 替代原始模板中的标记的字符串。替换功能将替换所有旧元素为新值。注意template是如何使用Scope中定义的变量的。这允许你无需写任何额外的代码即可创建macro-style. 风格指令。replace: 说明是否替换原始标记中的值或是追加原始标记中的值。默认值是false,这时原始标记将被保留。
transclude: 说明自定义指令是否复制原始标记中的内容。例如,之前展示的“tab”指令设置了transclude 为 true,因为tab 元素包含其他HTML 元素。 "dateInput" 指令则需要在初始化时为空,所以需要设置transclude 为false。
link: 该方法在指令中扮演着重要的角色。它负责执行DOM 操作和注册事件*等。link 方法包含以下参数:
scope: 指令Scope的引用。scope 变量在初始化时是不被定义的,link 方法会注册监视器监视值变化事件。
element: 包含指令的DOM元素的引用, link 方法一般通过jQuery 操作实例(如果没有加载jQuery,还可以使用Angular's jqLite )。
controller: 在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令,允许指令之间进行交互, tab 指令就是使用该参数较典型的例子:http://jsfiddle.net/powertoolsteam/GBE7N/1/
注意,当调用link 方法时, 通过值传递("@")的scope 变量将不会被初始化,它们将会在指令的生命周期中另一个时间点进行初始化,如果你需要监听这个事件,可以使用scope.$watch 方法。

如何用angularjs 做 一个简单注册页面

(SPA)这样一个名字里面蕴含着什么呢? 如果你是经典的Seinfeld电视秀的粉丝,那么你一定知道Donna Chang这个名字。Jerry跟Donna见面,Donna其实不是华人,但是却因在谈论其对中国的固有印象比如在针灸上的兴趣,以及偶然的一次单词发音带上了点儿中文口音,她将自己末尾的名字缩成了Chang Donna 在电话上同George的母亲交谈,(通过引用孔子)给她提了些建议。当George向自己的父母介绍Donna是,George的母亲意识到Donna并不是华人,因此并没有接受Donna的建议.

单页面引用 (SPA), 被定义成一个目的在于提供一种接近桌面应用程序的流畅用户体验单web页面应用程序,或者说网站. 在一个SPA中, 所有必需的代码 – HTML, JavaScript, 以及 CSS – 都是在单页面加载的时候获取,或者相关的资源被动态的加载并按需添加到页面中, 这常常是在响应用户动作的时候发生的. 尽管现代的Web技术(比如那些在HTML5中引入的技术)提供了应用程序中各自的逻辑页面相互感知和导航的能力,页面却不会在过程中重新加载任何端点,或者将控制转到另外一个页面. 同单页面应用程序的交互常常设计到同位于后台的web服务器的动态交互.

那么拿这项技术同 ASP.NET 的母版页Master Pages相比呢? 诚然 ASP.NET 的母版页让你可以为自己应用程序里的页面创建一个一直的布局。一个单独的母版页就可以定义好你想要在整个应用程序中的所有页面(或者一组页面)上应用的外观和标准动作. 然后你就可以再来创建你想要展示的内容各自页面. 当用户发起对内容页面的请求时,它们会将来自母版页的布局和来自内容页面的内容混合到一起,产生输出.

当你深入研究SPA和ASP.NET母版页实现这两者之间的不同时,你就开始会意识到它们之间相同的地方多于不同的地方——那就是SPA可以看做是一个简单的装着内容页面的外壳页面,就像是一个母版页, 只是SPA中的外壳页面不能像母版页那样根据每一个新的页面请求来重新装载和执行.

也许“单页面应用”是个不幸运的名字(像唐娜`程一样),让你相信这个技术不适合开发需要拓展到企业级,可能 包含上百页面以及数千用户的Web应用。

本文的目标是基于单页面应用程序开发出拥有数百页的内容,包括认证,授权,会话状态等功能,可以支持上千个用户的企业级应用。

AngularJS - 概述

本文的样例包含的功能有创建/跟新用户账号,创建/更新客户和产品。而且,它还允许用户针对所有信息执行查询,创建和跟新销售订单。为了实现这些功能,该样例将会基于AngularJS来开发。 AngularJS 是一个由Google和AngularJS社区的开发人员维护的开源的Web应用框架。

AngularJS仅需HTML,CSS和JavaScript就可在客户端创建单页面应用。它的目标是是开发和测试更容易,增强MVC Web应用的性能。

这个库读取HTML中包含的其他定制的标签属性;然后服从这个定制的属性的指令,把页面的I/O结合到有标准JavaScript变量生成的模块中。这些JavaScript标准变量的值可以手动设置,或者从静态或动态的JSON数据源中获取。

这个angular的例子怎么用jquery实现

[html] view plain copy

    <!DOCTYPE html>  

    <html>  

    <head lang="en">  

    <meta charset="UTF-8">  

    <title></title>  

    </head>  

    <body ng-app="Hello" ng-controller="helloCtrl">  

    <input type="text" ng-model="name"/>  

    <p> {{name}}</p>  

    </body>  

    <script src="bower_components/angular/angular.min.js"></script>  

    <script src="src/app.js"></script>  

    <script src="src/controller.js"></script>  

    </html>  


    学习angularJS一段时间了,也将angular成功的引入了两个项目,今天,我就将我使用angular这半年的经验,通过博客慢慢的记录下。

    一、什么是angular?

    AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线,它非但不畏缩不前,反而正面出击,提出了有效的解决方案。

    很多前端应用的开发框架,比如Backbone、EmberJS等,都要求开发者继承此框架特有的一些JavaScript对象。这种方式有其长处,但它不必要地污染了开发者自己代码的对象空间,还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式,因为网络最初的设计无法提供我们今天所需的交互性,于是我们需要框架,来帮我们填补JavaScript和HTML之间的鸿沟。

    AngularJS 填上了这条鸿沟。

    而且有了它,你不用再“直接”操控DOM,只要给你的DOM注上metadata(即AngularJS里的directive们),然后让AngularJS来帮你操纵DOM。

    同时,AngularJS不依赖(也不妨碍)任何其他的框架。你甚至可以基于其它的框架来开发AngularJS应用。

    它就这么好用。听着挺厉害?是挺厉害的。通过这个七步系列,我们会带着你开始用AngularJS写厉害的应用——不管你之前有没有接触过。跟着我们,我们会教你成为一个专家级的AngularJS开发者。

    不过首先我们得搞清楚:什么时候该用AngularJS?

    AngularJS是一个 MV* 框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。它专注于扩展HTML的功能,提供动态数据绑定(data binding),而且它能跟其它框架(如jQuery)合作融洽。

    如果你要开发的是单页应用,AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和*这样的应用,都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用,就不是AngularJS的用武之地了。

    以上来此互联网

    二、搭建angular环境

    执行

    npm

    npm install angular  --save

    bower

    bower install angular   --save

    什么?不知道npm,bower是什么?看看我以前的一篇博客吧!

    当然你直接下载也行

    直接下载地址

    然后

    在你的html文件中引用

    <scriptsrc="/node_moles/angular/angular.js"></script>

    或者

    <scriptsrc="/bower_components/angular/angular.js"></script>

    三、我们开始编写一个简单的angularAPP吧

    首先

    新建一个html文件

    index.html

    在src目录下简历两个javascript文件  app.js controller.js

    如图

    在index引入

    [html] view plain copy

    <script src="bower_components/angular/angular.min.js"></script>  

    <script src="src/app.js"></script>  

    <script src="src/controller.js"></script>  


    打开app.js写入

    [javascript] view plain copy

    var app = angular.mole('Hello', []);  //新建一个app模块 叫hello ,[]后面的数组为引入的其他模块名,我们没有其他模块,为空数组  


    打开controller.js写入

    [javascript] view plain copy

    app.controller('helloCtrl', function ($scope) {  

    $scope.name = "菲尔";  

    });  


    打开index.html 改变内容为

    [html] view plain copy

    <!DOCTYPE html>  

    <html>  

    <head lang="en">  

    <meta charset="UTF-8">  

    <title></title>  

    </head>  

    <body ng-app="Hello" ng-controller="helloCtrl">    <!--ng-app 指向你的app名  ng-controller指向你的controller名-->  

    <input type="text" ng-model="name"/>                    <!--ng-model定义或指向一个$scope变量,-->  

    <p> {{name}}</p>                                         <!--与{{name}}ng-model中 name绑定,ng-model的值的取代{{name}}-->  

    </body>  

    <script src="bower_components/angular/angular.min.js"></script>  

    <script src="src/app.js"></script>  

    <script src="src/controller.js"></script>  

    </html>  

    然后用浏览器打开这个文件

    {{name}}被解释成controller.js中$scope,name的值
    尝试改变一下input中的值 

    你会发现 <p></p>中的值 也自动发生了变化,是不是很神奇?比jquery来操作dom是不是简单很多?

这个angular的例子怎么用jquery实现

[html] view plain copy

    <!DOCTYPE html>  

    <html>  

    <head lang="en">  

    <meta charset="UTF-8">  

    <title></title>  

    </head>  

    <body ng-app="Hello" ng-controller="helloCtrl">  

    <input type="text" ng-model="name"/>  

    <p> {{name}}</p>  

    </body>  

    <script src="bower_components/angular/angular.min.js"></script>  

    <script src="src/app.js"></script>  

    <script src="src/controller.js"></script>  

    </html>  


    学习angularJS一段时间了,也将angular成功的引入了两个项目,今天,我就将我使用angular这半年的经验,通过博客慢慢的记录下。

    一、什么是angular?

    AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线,它非但不畏缩不前,反而正面出击,提出了有效的解决方案。

    很多前端应用的开发框架,比如Backbone、EmberJS等,都要求开发者继承此框架特有的一些JavaScript对象。这种方式有其长处,但它不必要地污染了开发者自己代码的对象空间,还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式,因为网络最初的设计无法提供我们今天所需的交互性,于是我们需要框架,来帮我们填补JavaScript和HTML之间的鸿沟。

    AngularJS 填上了这条鸿沟。

    而且有了它,你不用再“直接”操控DOM,只要给你的DOM注上metadata(即AngularJS里的directive们),然后让AngularJS来帮你操纵DOM。

    同时,AngularJS不依赖(也不妨碍)任何其他的框架。你甚至可以基于其它的框架来开发AngularJS应用。

    它就这么好用。听着挺厉害?是挺厉害的。通过这个七步系列,我们会带着你开始用AngularJS写厉害的应用——不管你之前有没有接触过。跟着我们,我们会教你成为一个专家级的AngularJS开发者。

    不过首先我们得搞清楚:什么时候该用AngularJS?

    AngularJS是一个 MV* 框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。它专注于扩展HTML的功能,提供动态数据绑定(data binding),而且它能跟其它框架(如jQuery)合作融洽。

    如果你要开发的是单页应用,AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和*这样的应用,都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用,就不是AngularJS的用武之地了。

    以上来此互联网

    二、搭建angular环境

    执行

    npm

    npm install angular  --save

    bower

    bower install angular   --save

    什么?不知道npm,bower是什么?看看我以前的一篇博客吧!

    当然你直接下载也行

    直接下载地址

    然后

    在你的html文件中引用

    <scriptsrc="/node_moles/angular/angular.js"></script>

    或者

    <scriptsrc="/bower_components/angular/angular.js"></script>

    三、我们开始编写一个简单的angularAPP吧

    首先

    新建一个html文件

    index.html

    在src目录下简历两个javascript文件  app.js controller.js

    如图

    在index引入

    [html] view plain copy

    <script src="bower_components/angular/angular.min.js"></script>  

    <script src="src/app.js"></script>  

    <script src="src/controller.js"></script>  


    打开app.js写入

    [javascript] view plain copy

    var app = angular.mole('Hello', []);  //新建一个app模块 叫hello ,[]后面的数组为引入的其他模块名,我们没有其他模块,为空数组  


    打开controller.js写入

    [javascript] view plain copy

    app.controller('helloCtrl', function ($scope) {  

    $scope.name = "菲尔";  

    });  


    打开index.html 改变内容为

    [html] view plain copy

    <!DOCTYPE html>  

    <html>  

    <head lang="en">  

    <meta charset="UTF-8">  

    <title></title>  

    </head>  

    <body ng-app="Hello" ng-controller="helloCtrl">    <!--ng-app 指向你的app名  ng-controller指向你的controller名-->  

    <input type="text" ng-model="name"/>                    <!--ng-model定义或指向一个$scope变量,-->  

    <p> {{name}}</p>                                         <!--与{{name}}ng-model中 name绑定,ng-model的值的取代{{name}}-->  

    </body>  

    <script src="bower_components/angular/angular.min.js"></script>  

    <script src="src/app.js"></script>  

    <script src="src/controller.js"></script>  

    </html>  

    然后用浏览器打开这个文件

    {{name}}被解释成controller.js中$scope,name的值
    尝试改变一下input中的值 

    你会发现 <p></p>中的值 也自动发生了变化,是不是很神奇?比jquery来操作dom是不是简单很多?

爱乐情感还为您提供以下相关内容希望对您有帮助:

如何通过AngularJs从后台取数据

为了实现这一点,Angular提供了一个叫做$http的服务。它提供了一个可扩展的抽象方法列表,使得与服务器的交互更加容易。它支持HTTP、JSONP和CORS方式。它还包含了安全性支持,避免JSON格式的脆弱性和XSRF。它让你可以轻松地转...

如何测试AngularJS中的Service

httpBackend服务有一些很方便测试的方法:httpBackend.expectGET(url).respond(data);httpBackend.expectPOST(url, param).respond(data);设置之后,当调用httpBackend.flush时,AngularJS会调用这个setup,发送的请求会被之前的s...

hbuilder前端怎么和后端交互

2、使用框架或库:HBuilder可以结合使用流行的前端框架或库,如Vue.js、React.js或AngularJS等。这些框架提供了更高级的封装和便捷的方式来与后端进行交互,例如通过组件或服务来处理API请求和响应。3、使用HTTP代理:如果前端...

如何用AngularJS实现web开发的MVC框架

而Model数据验证、与服务器端的数据交互都是非常简单而自由的。AngularJS的directive,你输入特定数据,他就能输出相应UI视图,这样的directive可以变成了一个html通用组件,比如文章编辑器组件、分页导航组件、madal组件等,在不...

AngularJS中directive指令使用之事件绑定与指令交互用法示例

本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考,具体如下:AngularJS中模板的使用,事件绑定以及指令与指令之间的交互 &lt;!doctype html&gt; &lt;who&gt;&lt;/who&gt; &lt;theshield ...

如何在AngularJS指令中创建controller与ngModel进行交互

一般来说,我们最常用到需要进行交互的指令就是ngModel。如果你想要创建一个自定义input,或者甚至是想绑定一个需要制定格式的input插件,ngModel都会为你提供你所需要的方法,它会帮助你在你的数据模型和插件之间进行交互。在...

dist包与后端如何交互

dist包与后端使用数据接口交互。根据查询相关公开信息显示使用AngularJS开发前端,使用Springmvc开发Restful类型的后台接口,前端与后端使用接口进行数据交互。dist包是static文件夹和index.html文件。

web前端需要哪些技术?

web前端主要学习Html5和css制作精美的静态页面,之后核心课程学习Java script这门语言,并使用各种JS框架和库实现交互性。以前大家常用的是JQuery、Bootstrap框架,现在形成React、Vue、Angular三大主流框架。 web前端开发一直是推陈出新速度最快...

成为一名web前端开发工程师在大学需要学习哪个专业的知识

它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。随着近两三年...

这个angular的例子怎么用jquery实现

如果你要开发的是单页应用,AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用,都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用,就不是Angular...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top