导航:首页 > 全硕论文 > angularjs应用硕士论文

angularjs应用硕士论文

发布时间:2021-01-21 14:05:38

『壹』 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

『贰』 前端基于angular有哪些硕士论文题目方向可以写

原创
按照要求定制
包修改
包过
直到通过为止
诚信指导,

『叁』 如何评价大漠穷秋的文章《Vue从Angular里面抄了哪些东西》

Can we forge

『肆』 如何评价大漠穷秋的文章《angular有哪些地方比vue更优秀

Angular2相对于Vue的优势在Vue2.0之后已经削弱很多了。比如SSR(Vue2已经原生支持)和全栈式框架(官方推荐Vuex+Vue-Router),native端也有阿里巴巴的weex。
但是Angular2在API设计的完整度和覆盖度上还是Vue所不能及的,主要有这么几点
1. Angular2原生Form支持:
Angular2原生的Form模块功能相当强大。除了双向绑定之类的基本功能,还能通过programatic API 控制dom元素的表单行为。也有成型API提供自定义validator。这一点Vue只有v-model和第三方库。对于后台之类的重表单应用,还是Ng2有优势。
2. 依赖注入
无论喜不喜欢DI,这就是Angular2的强大功能之一。有DI可以在不改变代码结构的情况下完成功能替换。(如,在desktop和mobile有不同功能,可以通过注入不同service实现,而共用相同的template和directive)。Vue则需要程序员自己规划代码组织,用来支持共享组件。DI也可以用于类似mole local state的功能。比如,一个视频播放控件有几个子组件完成,子组件需要分享一个状态。这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。
3. 对标准向后兼容
Angular2在一些细节上对标准有更好的支持。比如 list differ 算法中 Angular2 可以支持实现了Symbol.iterator的对象,而Vue只能支持Array。对Observable和Promise,Angular2在应用的各个地方,甚至模板级别都有支持(async pipe)。而Vue需要vue-rx等第三方库支持。Angular2的组件有shadow dom的实现可以选择,而Vue目前还没有。

阅读全文

与angularjs应用硕士论文相关的资料

热点内容
20132014南开大学国家奖学金名单 浏览:560
专升本考生考研复试 浏览:354
研究生给导师写自荐信被婉拒了怎么回复 浏览:470
2020中科大非全日制分数 浏览:747
江西非全日制研究生 浏览:1
2016全日制自考学校 浏览:86
考研广播电视学分数线 浏览:465
研究生什么年龄能考试 浏览:580
中科院大学研究生考试培训 浏览:43
全日制大专免考免试入学 浏览:943
考研在学校租房子 浏览:543
上海全日制专升本报名 浏览:924
事业单位必须是全日制学历吗 浏览:233
出国读研澳洲 浏览:340
金融研究生考英语考试 浏览:43
云南大学研究生比较好的专业 浏览:32
本科生考在职研究生报考时间 浏览:173
密码学专业考研科目 浏览:996
工程学院针对的考研的学校有哪些 浏览:982
研究生考试366分 浏览:123