GVKun编程网logo

angularjs – Web应用程序的前端和后端误解(angularjs前后端交互)

9

本文的目的是介绍angularjs–Web应用程序的前端和后端误解的详细情况,特别关注angularjs前后端交互的相关信息。我们将通过专业的研究、有关数据的分析等多种方式,为您呈现一个全面的了解an

本文的目的是介绍angularjs – Web应用程序的前端和后端误解的详细情况,特别关注angularjs前后端交互的相关信息。我们将通过专业的研究、有关数据的分析等多种方式,为您呈现一个全面的了解angularjs – Web应用程序的前端和后端误解的机会,同时也不会遗漏关于Angular JS 开发Web应用程序、angular – 共享混合移动应用程序和桌面Web应用程序的代码、AngularJS Java EE Web应用程序的基本示例和最佳实践、angularjs – Angular2将大型应用程序组织成较小的应用程序的知识。

本文目录一览:

angularjs – Web应用程序的前端和后端误解(angularjs前后端交互)

angularjs – Web应用程序的前端和后端误解(angularjs前后端交互)

我需要一些指导/建议.我已经决定构建一个Web应用程序,但是我很难将所有组件放在一起.

我过去制作了基本网站,但已经忘记了很多.我过去学习过JavaScript和Java,但是我有点生疏,所以如果你决定回复,请像对待这一切的人一样对待我.

基本上我很难理解整个Web应用程序的后端和前端以及我将需要什么.我做过一些研究发现我需要MysqL,Tomcat服务器或Apache? (我不明白这一部分),Spring Tool Suite,Java和AngularJS的前端知识.我有基本的sql知识.我很难将所有这些绑定在一起.

我试图创建的应用程序是原型,因此不是完整的应用程序.我希望能够将数据输入到文本框中,然后在图形/图表上直观地显示.我知道AngularJS能够实现这一目标. AngularJS和JavaScript一样吗? Java在哪里都有这个?我认为需要一种Web编程语言,为什么要使用Java呢? Java是否用于后端? MysqL将用于什么以及Tomcat或Apache服务器?如果可能的话,我更喜欢坚持使用JavaScript / Angular和Java,因为我还没有学过任何其他语言,如PHP或C.

如果有人在想,我正在Mac上工作.我的机器上已经安装了以下内容:

>最新的JDK
> Spring Tool Suite
> MysqL

有谁可以请尽可能为我澄清这个问题?我认为理解这一切并不需要太多,因为我对计算有所了解,但是因为我上次使用它已经有一段时间了,所以我有点生疏了.

任何帮助是极大的赞赏!

这个问题有很多内容.我会尽力回答这一切,但请耐心等待.因为我希望涵盖这么多理由,请记住,我所说的很多内容都是不精确的,你一定要仔细阅读这些主题.如果您喜欢它,您即将进入一个全新的编程世界,所以请花点时间尝试按照自己的节奏浸泡一切.

首先,一些Web技术的基础知识.这里理解的最基本的东西可能是客户端和服务器之间的分离.这些术语广泛用于软件讨论中,用于指代处理,存储和提供数据的事物(服务器)以及允许用户请求,查看,交互和更改该数据(客户端)的事物.根据您所讨论的上下文,但在Web开发领域,客户端和服务器的确切内容会有很大差异:

>通常假定客户端是Web浏览器.有很多不同的网络浏览器(例如Chrome,Firefox,Safari,Internet Explorer / Edge,Opera,…),它们各有各的怪癖,但总的来说,如果你不尝试任何太花哨的东西,你坚持对于最新版本的浏览器,无论您使用哪种浏览器查看您的网页,您的结果都将基本相同.
>在谈论“服务器”时,您可以根据您使用的句子来引用一些内容:您编写的服务器端代码(一分钟内更多内容),处理服务器的软件代码并提供您的网页(这将是Apache或Tomcat),或运行上述软件的铝,硅和塑料的物理集合(即计算机,从笔记本电脑到专用的任何东西)机).出于本讨论的目的,我们将坚持前两个.

正如我之前所说,客户端/服务器区别最重要的部分是在呈现和启用与客户端上的数据交互以及在服务器上处理和存储数据之间分离关注点.尽可能地保持那些分开;从长远来看,它会让你的生活更轻松.客户端代码不应该知道如何存储或处理数据;这是服务器的工作,客户端不应该知道.同样,您在服务器上编写的代码至少不应该关注数据的格式化和呈现给用户的方式.相反,它应该尝试以一种易于以多种不同方式处理的格式提供数据.

但我领先于自己.首先,我们需要谈谈您提出的技术问题.那么让我们深入了解一下.

客户端

通常,在服务器和client1上使用不同的编程语言.浏览器中使用了三种主要语言,每种语言都有不同的目的,这与其他两种语言的目的相称.原谅我(并且随意撇去或跳过)如果我踏上你已经覆盖的地面;我在这里为初学者写作,所以我想确保涵盖所有基础.

HTML

HTML(超文本标记语言)是构建网页的绝对基础. HTML的工作是描述页面的结构和其中呈现的数据. HTML将事物分成几个部分,包括页眉,页脚,文章,段落,旁白和其他此类容器. HTML还告诉浏览器有关图像,视频和Flash游戏的内容,哪些文本或图片应该是指向网络中其他位置的链接,应该强调哪些文本或者您要强调的地方.它可以包含包含各种输入设备的表单,它可以告诉浏览器在您提交表单时将表单的内容发送到何处.换句话说,它描述了文档的组成,内容各部分之间的关​​系,以及某种程度上文档某些部分的目的2.

HTML看起来像这样:

<html>
  <head>
    <title>A Sample Web Page</title>
  </head>
  <body>
    <header>
      <h1>Sample Code FTW!</h1>
    </header>
    <main>
      <section id="introduction">
        <h1>Introduction</h1>
        <h2>Where it all begins...</h2>
        <p>
          This is the first paragraph of the intro.
        </p>
        <p>This is the second one.</p>
      </section>
      <section id="picture-show">
        <h1>Pictures</h1>
        <h2>They're fun!</h2>
        <p>Here is a cat:</p>
        <img src="https://i.imgur.com/MQHYB.jpg" />
        <p>Here are some more (the internet is full of these things):</p>
        <img src="https://i.imgur.com/sHQQJG5.gif" />
      </section>
    </main>
    <footer>
      <small>&copy; KenB 2015; All rights reserved. (just kidding,do what you want with it)</small>
    </footer>
  </body>
</html>

这是一个链接,可以看到上面的操作:http://codepen.io/kenbellows/pen/GZvmVy

如果您点击该链接,您可以在技术上制作一个只有HTML的整个网页.事情是,这很无聊.首先,它非常简单;这是因为HTML不包含格式信息.它有结构,但没有布局,颜色,字体,边框或任何其他与演示相关的信息;这是CSS3的工作.其次,它完全是静态的;这是因为HTML不是用来描述动态内容或行为. HTML是故意静态的.如果您想要移动,更改或响应用户交互,如果您希望根据动态计算显示任何动态内容,那么您就需要使用JavaScript.

在此处了解有关HTML的更多信息:https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics

CSS

CSS(层叠样式表)解决格式问题.如果您正在编写一个静态页面,每次加载页面时只显示相同的内容,并且不需要任何用户交互,例如博客文章,您可能只需要HTML和CSS.

这里只是我在那里发布的那个HTML的一个小CSS:

body {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  color: #333;
  background-color: #ccc;
}
header,main,footer {
  margin: 1em auto;
  width: 60%;
  padding: 1em;
}
header {
  text-align: center;
}
header > h1 {
  font-size: 4em;
}
main {
  background-color: #fff;
}
main h1 {
  font-size: 2.5em;
  margin-bottom: 0;
}
main h2 {
  font-size: 1.5em;
  margin-top: 0;
}

和链接:http://codepen.io/kenbellows/pen/wGqewE

看看一个小样式可以为文档做些什么?

了解有关CSS的更多信息:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

JavaScript的

JavaScript是网页4的所有动态部分的动力.这是您正在谈论的图表内容中最重要的部分.与HTML和CSS不同,JavaScript是一种真正的,适当的编程语言,Turing-complete和所有内容,具有您期望从现代语言中获得的所有常用分支,循环,函数和面向对象的结构.因此,它比HTML或CSS复杂得多,并且它可能需要与任何其他成熟的编程语言一样长.

在此处了解有关JavaScript的更多信息:https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics

构架

与任何其他现代语言一样,JavaScript为此编写了大量的库和框架,以帮助您处理编写Web应用程序时的许多杂乱无章,易于编写的部分. Angular.js,你提到的那个,目前是一个特别受欢迎的框架,但你应该知道它只是众多框架中的一个.不要误解我,这是一个很好的.但是要记住这一点:如果你刚刚开始使用JavaScript作为一种语言,那么首先进入框架可能不是最好的主意.首先,你只需要复杂起来和运行所需的知识量;对于另一个,这非常重要,您应该在开始使用框架之前自己学习语言,以避免依赖于该框架.我知道有一些开发人员立即开始使用Angular,然后一年后他们没有充分掌握代码行为的原因,因为他们没有花时间去理解语言基础知识. Angular很精彩,我一直都在使用它,但是再一次,帮自己一个忙,至少要通过我上面链接的JavaScript的MDN教程,尝试编写几个玩具应用程序,然后再进入Angular.

想一想你的应用创意

我实际上认为,对于您的应用程序而言,除了托管它之外,您根本不需要服务器,如果您决定在Web上或公司的Intranet上发布它.我将在下面简要讨论服务器以回答您的问题,但实际上,如果您只需要接收一些用户数据并以图表的形式实时显示,那么您只需使用一些JavaScript即可. Angular肯定会有所帮助,因为您听起来像是想要实时更新图表.你应该研究一些基于Angular的图表/图表库,例如: https://jtblin.github.io/angular-chart.js/

服务器

通常,服务器处理数据处理和存储.不要像我为客户那样进入理论,让我直接回答你的问题:

> Tomcat和Apache – Tomcat和Apache HTTP Server是Web服务器的两个选项. (这些人适合我上面提到的“服务器”的第二个定义.)他们绝对是受欢迎的选择,虽然Apache在生产服务器上更受欢迎,而Tomcat更适合开发设置(根据我的经验;人们一直在争论这个问题) ).
> Spring – Spring,包括其所有各种模块和工具(SpringMVC,Spring Security,Spring Tool Suite等),是一个帮助您编写服务器代码的Java框架(服务器定义#1).在我个人看来(值得为此付出代价),Spring非常适合具有大量移动部件的大型复杂应用程序,但对于像您所描述的那样的简单应用程序来说却不必要地复杂化.
> MysqL – 与所有sql版本一样,MysqL是一个数据库程序.它将数据存储在表中,并提供一个界面供您以各种方便的方式查询数据.数据库非常棒,MysqL是一个受欢迎的选择,但重要的是要弄清楚你的项目是否需要数据库.您是否计划存储用户输入的数据以供日后使用?如果没有,请跳过数据库.
>其他语言 – Web服务器代码可以使用您可以在命令行上运行的任何语言编写.如果你喜欢Java并且你很擅长Java,那么坚持使用Java.如果您想要冒险,可以查看Node.js,这是一个JavaScript服务器解决方案;你还在学习JavaScript,对吧?这完全取决于个人偏好以及将为您完成工作的内容.不需要学习PHP(绝对不需要学习C,好上帝;请不要在C中编写您的服务器代码)只是为了一个简单的应用程序编写后端,就像你已经得到的那样.听起来你已经为这个项目学到了很多东西;无需为您的盘子添加更多.

1.(在完成上述所有操作后,最好再次阅读此脚注.)一个值得注意的例外是使用Node.js在服务器端使用JavaScript.如果您在客户端尝试使用JavaScript并坠入爱河(就像我们许多人一样),也许给Node一个机会.

2.一旦掌握了HTML的工作原理,请阅读semantic markup.

3.为了更准确一点,HTML不应包含任何此类信息,尽管从技术上讲它可以包含其中的一些信息.这是90年代末/ 21世纪初的CSS前几天的延续,当时大量的尺寸,字体和颜色信息都存储在标记中.请帮个忙:将格式保留给CSS.

除了一些更高级的CSS规则,您可以使用它来获得非常基本的悬停效果和简单的动画.对于涉及计算,迭代,逻辑的任何事情,JavaScript仍然是必需的,基本上任何事情都是非平凡的.

Angular JS 开发Web应用程序

Angular JS 开发Web应用程序

1.SPA 应用程序:单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。


如:网页云音乐(http://music.163.com/)

2.Angular JS的一些属性特征:

1)MVC

2)模块化

3)自动化双向数据绑定

4)指令系统(非侵入式API) (没明白是什么鬼????)

3.如果想要使用NPM的方式安装Angular.js,必须先安装node.js.

步骤:去node.js官网https://nodejs.org/en/下载——》安装(安装完后电脑上就有一个npm的命令)——》在项目的根目录下,shift+右键——》open command window here(也可以通过Windows+R打开command 命令后切换到项目根目录的路径)——》输入:npm install angular——》enter——》在最下面看到路径的时候说明就已经安装结束了。

4. NPM:node package manager,是node的一个包管理工具

angular – 共享混合移动应用程序和桌面Web应用程序的代码

angular – 共享混合移动应用程序和桌面Web应用程序的代码

我想构建一个全新的应用程序,应该作为混合移动应用程序和桌面Web应用程序进行部署.

大多数情况下,两个应用程序的逻辑和用户界面非常相似.
除了一些差异:

>移动设备的屏幕尺寸优化(例如,移动设备中隐藏的侧面菜
>移动中的触摸手势(3DTouch)与桌面中的悬停功能
>触摸移动设备中某些元素的反馈
>移动中的页面导航与桌面中的路由导航

我想过将angular-material组件用于桌面,将Ionic组件和移动导航用于两者都建立在角度之上.

当然,我的目标是尽可能多地共享代码,逻辑以及UI容器组件.

因此,我尝试在为桌面UI,移动UI,共享UI和逻辑创建单独的Angular模块时考虑构建项目的好方法:

一种选择是为两个应用程序提供一个核心模块,导入逻辑和共享UI模块.然后在为每个平台构建时在特定平台UI模块之间切换.在此选项中,特定于平台的UI组件将具有相同的选择器和@Inputs,但在其呈现的UI中会有所不同.

第二个选项是为每个将导入逻辑模块和共享UI组件模块的平台应用程序提供单独的核心模块.

也许有人有这样做的经验,可以分享他对涵盖所有这些的最佳项目结构的看法?

或者我建议哪个项目结构更好?

解决方法

根据我的经验,有效的是以下内容

>使用单独的文件结构创建2个单独的“前端”项目
在单独的目录中,使用特定的“命令行工具”
框架(Angular CLI,Ionic CLI,NativeScript CLI).
>创建一个包含要共享的公共模块的公共项目
通过’前端’项目
>从代码库导入共享模块到’前端
结束’项目(例如在名为’shared’的目录下) – 确保
您将前端项目与相同的通用版本保持一致
‘共享’项目

真正的技巧是设置“共享”模块的边界,以便在不增加代码复杂性的情况下最大化重用(例如,通过在’共享’代码中检查环境 – 我避免使用环境变量来定义是否代码以Ionic或Angular运行,并根据该变量做出决定.

对我来说,经验法则是“前端”项目定义所有组件(即组件不共享).

组件具有非常浅的逻辑,通常类似于以下内容

>他们在构造函数中定义他们使用的服务
>在ngOnInit()方法中,他们订阅了Observables
服务方法返回的兴趣 – 订阅逻辑
填充包含视图中显示的数据的变量
>在ngOnDestroy()中,他们取消订阅订阅
>组件定义管理前端事件的方法 – 例如
方法通常在共享服务上调用方法

编码时会出现正确的设计.我的意思是,一旦你建立了基本结构(即’前端’项目和’共享’项目),你开始编码一个前端(例如浏览器的Angular).一些决策很容易采取(例如,查询后端的所有逻辑通常都是共享的).其他一些决定更棘手,而且越接近前端表面的逻辑越真实.一旦你看到组件中的逻辑变得越来越厚,那么你就开始想知道是否有值得分享的东西,因为对于另一个’前端’也许是常见的(让我们说Ionic).如果是这种情况,那么您重构,将代码移动到“共享”服务.

还要记住通过测试充分保护“共享”服务.

我希望它有所帮助

AngularJS Java EE Web应用程序的基本示例和最佳实践

AngularJS Java EE Web应用程序的基本示例和最佳实践

如果任何人在Java EE Web应用程序中使用AngularJS,那么我们将非常感谢您能否提供任何指针/示例。

什么是最佳实践,什么是理想的结构,设计等。
任何网络链接也将是有帮助的。

因为这是一个非常一般的问题,我会回答它。在jFall 2012上有一个演讲,演示了使用Java EE 6和AngularJS的一个非常基本的应用程序,可以在这里找到: https://github.com/teunh/jfall2012

我一直在一个学校项目,使用AngularJS作为前端 – JAX-RS作为休息接口和基本的后端逻辑在bean和数据库持久性与hibernate。我现在无法开源这个项目,因为它仍然是一个正在进行中的工作。

我的经验和我给你的信息是,如果你保持一个安静的接口,构建一个Java EE后端与AngularJS前端很容易。

angularjs – Angular2将大型应用程序组织成较小的应用程序

angularjs – Angular2将大型应用程序组织成较小的应用程序

要解决的问题

在工作中,我继承了(遗留的)非常大的Web应用程序(跨越多个Scrum团队和开发团队)的所有权.当前大型应用程序的一个常见痛点是,只要其中一个Scrum团队更新了他们各自的应用程序区域,该团队就必须部署整个应用程序.我们开始做的一件事就是让团队在大型应用程序之外创建新功能,然后在大型应用程序中放置一个页面,对新应用程序进行ajax调用,并简单地将HTML注入大型应用程序应用程序.这样,团队可以在进行更改时部署新的小型应用程序,而无需部署整个大型应用程序(跨越其他团队).

好消息

我们目前正在考虑重新编写/重新设计大型应用程序,从开发的角度来看,我的目标之一是将其组织到更小的应用程序/代码库中,这样每个团队都可以部署代码而无需部署大型应用程序跨越多个团队.我计划实现这一目标的一种方法是利用多种服务来获取数据.这样就会引入一层分离.

从客户端的角度来看,我倾向于使用的技术之一是Angular 2,特别是用于分离Angular 2提供的关注点(组件,模板,指令等).我知道我可以将Angular 2应用程序分解为功能,组件等,但是,我相信,最终所有这些仍然必须存在于一个应用程序/代码库中,所有这些都可以一起部署. Angular 2中是否有一种方法可以将大型门户/套件拆分为较小的应用程序,并让应用程序相互交互.例如,也许可以共享一个shell应用程序(用于布局和导航),门户/套件的每个区域都可以分解为更小的应用程序?

非常感谢任何关于从Angular 2角度处​​理/构建此方法的最佳方法的想法.此外,如果这是明确的,从Angular 2的角度来看是不可能的,这也是有用的信息.

提前致谢!

我会尝试从多个角度提供帮助.

>考虑将Angular组件用作具有“Angular Elements”的自定义元素 – 请查看:https://medium.com/vincent-ogloblinsky/export-angular-components-as-custom-elements-with-angular-elements-a2a0bfcd7f8a

如果此方法不符合您的需求,并且您只能只提供一个角度应用程序,请尝试:

>如果某些应用程序页面可以在不同的选项卡中打开并独立保留 – 请考虑将这个巨大的应用程序拆分为更小的模块化角度应用程序.用户不必注意到差异.如果要对所有选项卡使用相同的URL – 从反向代理服务应用程序.
>如果流程中没有外部选项卡,那么您可能无法将角度应用程序拆分为较小的应用程序,但您可以在模块化结构中构建应用程序,以便每个团队采用不同的应用程序上下文(单独的功能文件),并且一个团队将采用“共享”和“核心”实体.每个团队都可以拥有一个单独的分支机构,只有团队特权,只有FE负责人可以批准PR进入主服务器.
>我还没有尝试的另一个选项是将功能代码拆分为不同的存储库 – 但是这样你就必须投入一些预编译脚本,这些脚本可以在启动应用程序之前从每个存储库中提取代码.
>如果这里有一些服务器端逻辑 – 导出到不同的微服务.

>我看到你提到了一些HTML注入 – 我不确定你打算怎么做,但考虑使用模板引擎.

今天关于angularjs – Web应用程序的前端和后端误解angularjs前后端交互的介绍到此结束,谢谢您的阅读,有关Angular JS 开发Web应用程序、angular – 共享混合移动应用程序和桌面Web应用程序的代码、AngularJS Java EE Web应用程序的基本示例和最佳实践、angularjs – Angular2将大型应用程序组织成较小的应用程序等更多相关知识的信息可以在本站进行查询。

本文标签: