文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

国庆节前端技术栈充实计划（8）：我使用 AngularJS 和 ReactJS 的经验

最近，我开始参与一个 Angular 项目。我加入的时候这个项目已经完成了很大一部分了，所以不得不用 Angular，没有回头路。作为一个忠实的 React 开发者，我吐槽 Angular。...当我开始写第一行 Angular 代码的时候，我就真心诅咒它。这就是所谓的：如果你爱 React，那你就恨 Angular。 我不能自欺欺人，在一开始，我写 Angular 代码一点也不开心。...当我在表单中遇到一个由于 ngIf directive 创建一个新的子域而导致的问题时，我处理起来还是很费劲。...还有当我想要从一个准备发送给服务器的 JSON 中移除一些空白字段时，我发现 UI 中对应的数据也被一并移除了 —— 丫的双向绑定 ╮(╯▽╰)╭。...还有当我想要使用 ngShow 和 ngHide 来显示一个 HTML 块同时隐藏另一个 HTML 块时，在一瞬间，两者同时显示了。

2K30

Angular项目实践

今天主要和大家分享四个内容：第一，是为什么我们要选择 Angular；第二，是我们在使用 Angular 过程中总结的一些比较好的实践；第三，是怎样更好的组织项目结构；第四，是谈一下我对整合 Angular...总的来说就是希望有一个东西可以大大提高我们的生产力。 ? 下图是在 Angular 社区传得比较火的一张图，也在一定程度上体现了我们在使用这个框架过程中的感受。 ?...在我们定义的项目结构中，可以看到每一个文件夹下的模块文件都有自己的命名方式， Controller 文件的命名方式。...这样的话当你看到这个文件时就会知道它的用途，特别是当你团队人比较多时，会有很大帮助。 ES6 与 JSPM 之我见 下面简要分析一下我们在使用 Angular 的过程中遇到的几个问题。...首先，是由于我们没有使用文件依赖库，因此在 Index.html 会引用一堆 JS 文件。有人说为什么你们不用像 requirejs 这样的第三方模块加载呢？

1.5K70
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    前端下半场：构建跨框架的 UI 库

    在我的新 Markdown 编辑器 Phodit 中，我有意无意地去拆分出一个个的小组件，每个小的组件使用不同的技术构建，React、Angular、Stencil.js、原生 JavaScript 等等...铺垫：React 中引入 Angular 组件 为了在我的编辑器中使用 Angular，我用 Angular 编写了一个重命名功能。...而为了使用它，我得再次使用一次 customEvent，而在这个微前端架构的系统中，其事件通讯机制已经相当的复杂。在这部分的代码进一步恶化之前，我得尝试有没有别的方式。...于是，我想到了之前在其它组件中使用的 Web Components 技术，而 Angular 6 正好可以支持。...，我遇到了一个问题，我使用 Angular 构建的这个组件，大概是有 257kb。

    1.7K10

    Angular（06）- 为什么数据变化，绑定的视图就会自动更新了？

    以下是我的个人理解，仅供参考： 在还是 jQuery 的时代，当在 js 中改变了某个变量的数据，而这个变量是需要在 Html 中显示出来的。...所以，回想一下，你在使用三大框架时，是不是每个框架基本都有一些注意事项，或者说它的规定？ 比如说： react 要求修改 state 局部变量时，得通过 this.setState(...)...对于 vue 来说，虽然我们更新数据时是直接对变量进行赋值操作，但实际上，声明在 data 中的这些变量，都会被转换成存取器属性，也就是 set 和 get。...好像使用 Angular 过程中，并没有需要遵循什么规定。 这是因为，Angular 的实现原理并不类似于 react 和 vue。...这也是为什么在 Angular 项目中，经常会看到一些 settimeout(..., 0) 这样的操作。 以上，个人的理解，如有错误，欢迎指点一下。

    2.3K10

    Angular 应用是怎么工作的？

    在上面的文件内容中，我们知道使用了那种 UI 框架，使用了什么 builder 去构建应用，index 页面路径，polyfills 路径等。...Note：在接到新任务时候，开始一个新的 Angular 应用之前，我都会先看 angular.json 和 package.json 文件。我会通过这两个文件了解应用的初始信息。...因此，bootstrapping 就像是一种装置或说一种加载的技术，启动 Angular 应用。当我们加载组件或者模块的时候，它将被渲染。 现在，我们找到了应用入口。...platformBrowserDynamic().bootstrapModule(AppModule) 也许你注意到了，上面的方法中还传递了参数 AppModule。真正的应用代码！...在 @NgModule 装饰器中，我们有一个引导 bootstrap 数组，表明加载 AppComponent。

    2.2K30

    25个超有用的 AngularJS Web 开发工具

    下面我要说的就是25个超有用的AngularJS工具，web开发人员千万不可错过哦。...1）AngulaJS最佳测试工具——Protractor Protractor支持AngularJS应用程序，是一款终端到终端的测试框架。Protractor在真正的浏览器中运行测试。...官方网站：http://vesparny.github.io/angular-kickstart/#/ 17）ng book 当我们在构建大型的Angular应用程序时，总是难以避免经常性地碰到那些看似难以发现和解决令人头疼无比的问题...这也是为什么我们只使用jQuery，而无需它的任何插件。每个部件之后都可以被自制成完美地插入到AngularJS应用程序中。 ?...Videogular用AngularJS开发，在用于项目时，你必将会被它的魅力所倾倒。 ? 官方网站：http://www.videogular.com/ 25）NG Table ?

    4.9K50

    使用 Github Actions 自动部署 Angular 应用到 Github Pages

    CLI 直接生成，如有需要，可以点击此链接进行跳转查看（电梯直达），这里就不演示创建的过程了 按照正常的前端项目发布流程，当我们需要发布时，需要使用 npm 命令来完成项目的打包。...deploy --base-href=/ingos-admin/ 在之前学习 angular 中路由时有提到，在 angular 应用中，框架会将 index.html 文件中的 base 标签的 href...环境，我们可以使用 github 官方的 action 来简化我们的脚本，因为我们在每次构建时都需要执行 npm install 命令来还原项目所需的各种依赖，因此这里在执行 install 命令之前...，我们可以通过官方的 actions/cache@v2 来缓存项目依赖，以加快构建的过程 这里在还原依赖时，使用到了 npm ci 而不是 npm install，从命令的名称就可以看出，ci 主要是在各种自动化环境构建时使用...当我们添加了环境变量之后，还需要对我们的实际执行的 npm 命令脚本进行一个调整 在本地执行发布命令时，本地的 git 配置中已经包含了相关的账户信息，而当在 workflow 中执行时因为处于一个匿名的状态

    1.9K10

    Angular JS + Express JS入门搭建网站

    由此在项目不忙的时候，自己于是有时间和兴趣学习一下Angular JS与Express JS。 　　同时自己实现了一个最简单的Angular JS + Express JS的网站示例。 一....那name的值从何而来？就是要在对应的控制器中给name赋值，从来用户访问index.html页面时可看到name真实的值。 　　　　...建议使用另外一种方式，就是用Angular JS的另一个Module ng-route，做路由控制，针对不同的路径，在同一个文件中定义好各自的控制器。...Express JS 　　在示例的前端中，我们使用Angular JS框架开发了Html页面以及对应的JS文件。但网站的后台就要用其他技术了。...我还是参照，自己建立一个最简单的Express JS项目。

    5.8K60

    AngularJS2+调用原有的js脚本(AngularJS脚本跟本地原有脚本之间的关系)

    到了Angular2一直到现在的版本5，一点改进没有，还要编译，还要部署，原有的JS脚本也不能用了。”...我试着来回答一下： 首先，在AngularJS2框架之中实际使用的是ES6,全称ECMAScript6，是Javascript的下一个版本。...当然不是，你肯定早看到了，大量的第三方模块和代码库，通过NPM的管理，共存于这个架构中，彼此友好的相处。你原有的工作，完全可以用同样的方式来工作。...然后在app.component.ts中增加声明和调用的部分： import { Component } from '@angular/core'; declare var webGlObject:...当然你可能会说，不不不，我就是在浏览器运行，不考虑别的。OK,我也不较劲，你当我没说，你完全可以就这么用。

    2.1K60

    Angular2学习记录-给后端程序员的经验分享

    1.前言 前几天刚下定决心把毕业设计改造下,因为毕业设计算是我学习的基石,学习到的东西都尽可能的在这个平台上施展,锻炼自己.改造为前后端分离,前端使用angular2,后端只提供接口.便于以后的维护.那么就要学习...这里就要说下个人观点了,安利一波:我认为每个程序员都应该有自己的一个项目,一个可以让你学习的东西能施展到上面的项目,可能该项目一开始很简单,但是随着你不断的学习,不断的把新知识运用进去,这个项目就会伴随着你的成长而丰富起来...使用TypeScript作为开发语言,对于Java和C#程序员可以快速上手,还有就是我比较喜欢强类型语言,每个变量各司其职,由其的类型来限定,开发人员也很明确知道变量的作用. google和Microsoft...,self并不受angular管理,导致刷新的变量是self中的isBackColor. 3.2http参数传递 按照下面代码传参数应该是没有问题的,但是我遇到了url被编码问题,例如输入`1111@qq.com...['id'],另外可以使用订阅模式queryParamMap.subscribe(),路由参数更新时自动通知 3.5组件通信 父->子:子组件使用input装饰器,接受父组件的属性,并且可使用ngOnChanges

    4.5K20

    浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    废话就不多说了，直接到正题吧，浅谈一下我自己理解的几种单页面架构： 1、requirejs+angular+angular-route（+zepto） 　　最后这个zepto可有可无，主要是给团队中实在用不爽...的写法，这里由于使用requirejs管理全部模块，所以index.html中不需要引入angular等，只是设置了一个带ng-view属性的div，用于充当整个App的视图区域。...data-baseurl是额外加入的属性，主要好处是可以轻松在html（0缓存）中对js的url进行修改。 data-main就是requirejs的标准写法了，跳过不说。...$template 首先，先修改一下angular-route的源代码，这个源代码非常精简，不用太纠结，狠狠的去修改就好了。 另外，想问我为什么知道或者想到在这修改？...不过，这里controller的函数写法可能会因为压缩混淆时丢失了原来的参数名，所以，我们也可以采用显式注入的方式： //也可以使用这样的显式注入方式，angular执行controller函数前，会先读取

    4K20

    脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质

    这些工具让前端开发者可以更从容的开发大型前端项目。 前端开发框架提升了前端工程师的生产效率 这方面主要是Angular、React、Vue和Svelte等开发框架产生的价值。...比如：我们修改一个变量的值，并把这个值更新到Dom中， 在不使用前端框架时，我们一般会写这样的代码 let count = 0 count + = 1; let dom = document.getElementById...当我们的页面变卡、页面占用的内存逐渐上升最后OOM时， 我们有考虑过，如果不用这些框架，是不是这类问题更容易被发现，更容易被控制呢？...要写一个工具才才能提升我们使用这个方案的开发体验， 比如把template、css样式和代码文件封装到一个单独的组件中 搞定这个工具没那么容易，而且搞不好又回到了老路上，等于自己开发了一个前端框架，...注意：这个组件中没有使用任何React对象的方法，也得导入React对象，而且必须叫React对象，不然esbuild不认。

    47440

    一个Angular 5教程：一步一步指导实现你的第一个Angular 5应用程序

    它还监视项目源中的每个更改并重新编译所有更改，之后它会要求浏览器重新加载打开的页面。因此，通过使用Angular CLI，我们已经在开发环境中工作，无需编写配置或实际执行任何操作。...如果您对我们为什么这么做感到好奇，可以在Angular的文档中阅读它。...我们在我们的组件中订阅我们的观察器。它们被用在我们应用程序的不同部分，所以它们可能会一路销毁 - 例如，当我们在路由中使用组件作为页面时（我们将在本指南后面讨论路由）。...您可以在项目的所有部分使用该文件中的值，并environment.ts在Angular CLI负责提供来自相应项目的内容时将其包含在内environment.your-environment.ts。...我们在这里也看到了新的语法loadChildren，当我们询问 路由时，路由器会告诉路由器CardsModule在./cards.module文件中的延迟加载cards。我们在新.

    48.5K10

    使用Angular8和百度地图api开发《旅游清单》

    UI的使用 项目简介 《旅游清单》项目的背景主要是为了让笔者更好的掌握angular8，因为之前做的项目主要是使用vue和react，作为一名合格的coder，必须博学而专一，也是因为笔者早年大学时期想要做的一个想法...项目的首页展示的是已去过的旅游地点和路线，地图路线是通过调用百度地图api实现的，当然提供这样的api很多，大家可以根据自己的喜好去使用。其次我们可以在首页添加未来的旅游规划和预算，方便后面使用。...class Storage {} ``` 复制代码 路由 Angular 的 Router 模块提供了一个服务，它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。...，这里我用来做存储第三方组件的位置，定义好之后在app.module.ts中引入： // material组件库 import { CustomMaterialModule } from '....angular8的实战入门项目，涉及到部分高级技巧以及百度地图，jsonp跨域的知识，大家有不懂的可以相互交流，我也会定期分享一些企业中常用的核心技术。

    7.2K30

    发布 Angular 应用至生产环境

    两年前， 写过一篇使用 rollup 来为生产环境编译 Angular 2 应用的文章， 因为当时还没有 angular-cli 项目。...而如今 Angular 已经到了 7.x 版本， 对应的工具也是非常的完善， 也就不在使用 rollup 来处理 angular 项目。...angular-cli 用起来虽然方便， 但是针对生产环境编译的话， 还是有一些地方要注意的， 接下来就介绍我在项目部署时的一些做法。...使用 nginx 作为服务器 为什么使用 nginx 作为前端服务器呢？...，这样在客户端请求 .js 文件时， nginx 会先检查一下是否存在对应的 .js.gz文件， 如果存在的话， 就直接返回 .js.gz 文件的内容， 从而省去了在服务端进行压缩的过程， 节省服务器的资源

    1.4K50

    Angular 从入坑到挖坑 - Router 路由使用入门指北

    四、Step by Step 4.1、基础概念 4.1.1、base url 在 Angular 应用中，框架会自动将 index.html 文件中的 base url 配置作为组件、模板和模块文件的基础路径地址...默认的情况下 app 文件夹是整个应用的根目录，所以我们直接使用 index.html 中使用默认的 即可 在 Angular 项目中，系统的路由需要我们将一个 url 地址映射到一个展示的组件，因此需要手动的去设置 url 与组件之间的映射关系 因为我们在使用 Angular CLI 创建项目时，选择了添加路由模组...4.2、路由间的参数传递 在进行路由跳转时，很常见的一种使用情况是我们需要将某些数据作为参数传递到下一个页面中，例如从列表中选择点击某一行数据，跳转到对应的详情页面 常见的参数传递有如下的两种方式 4.2.1...在 Angular 中，需要在组件类中依赖注入 ActivatedRoute 来获取传递的参数信息 这里的 queryParamMap 是一个 Observable 对象，所以这里需要使用 subscribe

    5.8K50

    Nginx安装部署之反向代理配置与负载均衡

    Nginx 部署、反向代理配置、负载均衡 最近我们的angular项目部署，我们采用的的是Nginx，下面对Nginx做一个简单的介绍。...为什么选择Nginx 轻：相比于Apache，同样的web服务器占用的资源少 多线程模式：Nginx拥有多个worker进程，处理请求时是异步非阻塞的 社区活跃 可以做反向代理 支持7层负载均衡。...Nginx 下面是我们真正使用的Linux 下 搭建Nginx，演示时我使用的WM Ware创建的虚拟机。...说明Angular 项目的打包，并部署到虚拟机的Nginx 在本地找了一个angular项目目录下 ng-build,会生一个dist文件夹 键入如下命令：nginx -t nginx -t #查看配置文件路径...，在虚拟机的服务器上提示404 注：这里说明一点，就是即便发生了法相贷，但是network中的显示还是我的虚拟机的ip，所以不能当做是否发生反向代理的标注 重新载入Nginx配置 nginx -s reload

    1.1K10

    基于requirejs和angular搭建spa应用1、常规实现2、引入Requirejs

    接上篇，angular 实战部分，angular比较适合spa项目，这里不借助任何seed和构建工具，直接从零搭建，基本的angular项目结构大致包含如下几个部分： 　　1）app.js 入口 　　...Requirejs中，简单的说一个文件一个模块，即是单文件模块，所以对模块的加载其实本质上是对文件的加载。 　　假设读者已经了解requirejs的基本使用方式。 　　...上一节中，讲到了提了一下controller的注册方式，其中说到了动态注册，当然除了controller之外，还有service、directive等都可以实现动态注册，这也是我们实现按需加载的基础，现在对我们的项目做一下修改...; 8 } 9 }) 最后修改修改index.html中脚本引入方式，以及去掉ng-app指令启动方式，angular应用启动已在main.js中通过domready后使用脚本启动。 最终运行效果如下，可以看到只有在点击了对应的菜单时

    1.9K30

    我曾用 Angular 重写了 jQuery 应用，如今却被 React 逼疯了

    在我的第一份工作中，我正好参与了一项将一个庞大且难以管理的 jQuery 应用重写为 Angular 应用的工作。不管是过程还是最终结果都相当好。...加入 React 开发 后来，我确实有机会学习 React，甚至在一两个项目中专业地使用它了。 我仍然记得第一眼看到它时的新鲜感。...就在我以为我退出了的时候… 就在我自以为已经退出了的时候，我最近又回到了 React。 当然，这只是一个业余项目，所以我没有把它当一个严肃的生产应用来对待。...这个问题通过使用 React 钩子将状态“侧载（sideloading）”到组件中得到了解决。对此，我还没有听到有人抱怨过，但你们是认真的吗？你们是在说任何组件都可以使用任何部分的应用状态吗？...不可避免地，当你确实需要在服务器端渲染的“应用”中添加一些脚本逻辑时，明智的做法也许是只在最必要的地方添加，越少越好。 关于这一点，我认为“交互岛”这个名字不错。

    24500
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券