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

Ng-Matero v15 正式发布

前言 Angular 按照既定的发版计划在 11 月中旬发布了 v15 版本。推迟了一个月（几乎每个版本都是这个节奏），Ng-Matero 也终于更新到了 v15。...我已经很久没有写关于 Ng-Matero 的发版文章了。上次介绍发版还是 v10 版本，竟然已经是两年前的事情了。在这两年的开源生涯中，主要精力都在 Material 的扩展组件库上面。...另外，侧边栏菜单按钮使用语义化标签进行了优化，关于按钮的选择可以参考 Angular Material 在 Button 文档中的说明： Angular Material 使用原生的 ...基于 MDC 的 Angular Material 组件 我觉得 v15 最大的变化不是 Angular，而是 Angular Material。...大部分组件都切换到了 MDC 风格，之前这些组件都是在 material-experimental 这个库中，现在转正了，而之前的组件都加上了 legacy- 前缀。

6.2K40

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

安装脚手架： npm install -g @angular/cli 复制代码 创建工作空间和初始应用 ng new my-app 复制代码 安装material UI npm install @angular...根模块提供了用来启动应用的引导机制。一个应用通常会包含很多功能模块。 组件 每个 Angular 应用都至少有一个组件，也就是根组件，它会把组件树和页面中的 DOM 连接起来。...class Storage {} ``` 复制代码 路由 Angular 的 Router 模块提供了一个服务，它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。...百度地图api及跨域问题解决 我们进入百度地图官网后，去控制台创建一个应用，此时会生成对应的应用ak，如下： 本地调试时将referer写成*即可，但是我们用ng的http或者fetch去请求api接口时仍会出现跨域...，这里我用来做存储第三方组件的位置，定义好之后在app.module.ts中引入： // material组件库 import { CustomMaterialModule } from '.

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

    Ng-Matero V9 正式发布！

    Angular V9 已经在二月份重磅发布，拖沓了一个月，Ng-Matero V9 也终于发布！其中大部分时间耗在了 Material Extensions 的组件开发上。...extensions 再谈 Angular Material 我在之前的文章中狠狠的吹了一波 Angular Material 的设计之美，然而事实是 Angular Material 在设计及实现方面确实非常优秀...但是在 Angular Material 中就不能如此自由随意，比如在 Angular Material 的表单中使用 ng-select。...我个人强烈建议将 Angular Material 作为基础库使用，样式方面可以根据喜好定制，实在无法接受 Material 的表单交互的话，也可以搭配 Bootstrap 亲自实现一个表单组件，或者直接引用其它组件库...扩展组件库 实话说 Angular Material 确实缺少一些比较常用的交互组件，在开发 Ng-Matero 的过程中，顺便开发了一套 Material Extensions 的组件库。

    1.5K20

    Angular Material 的设计之美

    这也是我刚开始不敢选择 Angular Material 的一个原因。...但是在编写 ng-matero 的过程中，随着对 Angular Material 的深入了解，我发现这种说法稍显狭隘甚至产生了一定的误导，所以我希望这篇文章可以让大家对 Angular Material...除了常用组件之外，Angular Material 还有一个组件开发包 CDK。在设计界有一句名言“少即是多”，苹果的产品就是最好的证明。...我最开始认为将所有样式全部写到 mixin 中并不是很优雅的做法，但是在编写 ng-matero 暗黑主题的时候，我发现不这样做是不行的。以下是 Angular Material 主题定制的方法。...表格 Angular Material 的表格是我见过最特殊的表格，结构简洁，通过定义动态列渲染数据，以下是一个官网例子： <table mat-table [dataSource]="dataSource

    5.7K30

    Angular vs React 最全面深入对比

    它的灵感来自Flux，但是有一些简化。Redux的关键思想在于，应用程序的整个状态由单个对象表示，该对象由名为reducers的函数进行突变。Reducers本身是纯功能，与组件分开实现。...Material design components 如果您热衷于设计Material，您会很高兴听到Angular有一个Material组件库。...关于更多的有关Angular相关类库和工具可以参考：the Awesome Angular list React Create React App Create-react-app 是一个CLI工具，用于快速创建新的...Material UI 还有一个可用于React的Material Design Component。与Angular的版本相比，这个版本比较成熟，可以使用更广泛的组件。...你的开发人员有多丰富，他们的背景是什么？ 是否有任何您想要使用的现成的组件库？ 如果您正在开展一个大型项目，并希望尽可能减少错误选择的风险，请考虑先创建一个demo用于验证产品概念。

    4.7K70

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

    当我开始写第一行 Angular 代码的时候，我就真心诅咒它。这就是所谓的：如果你爱 React，那你就恨 Angular。 我不能自欺欺人，在一开始，我写 Angular 代码一点也不开心。...当我在表单中遇到一个由于 ngIf directive 创建一个新的子域而导致的问题时，我处理起来还是很费劲。...另一个我无法吐槽的好东西是：内建的表单控制器，它为 input 字段提供了默认的格式化、解析和校验，而且还提供了一个很好的插件用来展示错误信息。...如果我们使用的是 React，那么至少让重构工程师写组件会是一个挑战，要么得让他学会写基本的 JSX，要么我就只能自己将他写的 HTML 复制粘贴到 JSX 中。...使用双向绑定为开发带来了便利，然而它也容易在长期维护的过程中由于修改部分代码而产生不可预期的 bug，尤其是那些在过去的几个月中没有再动过的代码。 那么，我从头开始创建 app 的首选方案是什么呢？

    1.7K30

    实例属性和类属性的理解

    ，没有修改类属性 # print(Test.name) # print(a.name) # 这里的情况是我在实例中访问一个属性，但是我实例中没有，我就试图去创建我的类中寻找有没有这个属性。...# 找到了，就有，没找到，就抛出异常。(这里说明了实例对象能够访问类的属性！反之，类对象不能访问实例属性！)...# 而当我试图用实例去修改一个在类中不可变的属性的时候，我实际上并没有修改，而是在我的实例中创建了这个属性。 # 而当我再次访问这个属性的时候，我实例中有，就不用去类中寻找了。...(object): # name = 'scolia' # # a = Test() # a.abc = 123 # print(dir(Test)) # abc 自动在实例属性中创建了....append(123) # 通过实例修改类中的列表 # print(Test.list1) # print(a.list1) # 也可以任性地为某个实例添加方法，python 支持动态添加属性

    82130

    听我说说我的博客: 月访问量过万的个人IT博客的技术史

    接着，在我遇到了Backbone后，响应了下Martin Folwer的编辑-发布分离模式。用Node.js与RESTify直接读取博客的数据库做了一个REST API。...Backbone就负责了相应的Detail页和List页的处理。 尽管这样做的方式可以让用户访问的速度更快，但是我相信没有一个用户会一次性的把技术博客看完。...而且我博客流量的主要来源是Google和百度。 然后，我试着用Angular去写一些比较特殊的页面，如全部文章。但是重写的过程并不是很顺畅，这意味着我需要重新考虑页面的渲染方式。...最后，出现了Material Design Lite，也就是现在这个丑丑的页面，还不兼容新IE（微信浏览器）。 作为一个技术博客，它也用到了HighLight.js的语法加亮。...随后，我意识到了我需要将我的博客推送给读者，但是需要一个渠道。 微信公众平台 借助于Wechat-Python-SDK，花了一个下午做了一个基础的公众平台。

    1.8K100

    2020 年你应该知道的 React 库

    当我从 Angular 切换到 React，我绝对经历了它作为 React 的优势。 只有通过 React，您才能使用函数组件和 props 构建组件驱动的用户界面。...React 中动态地添加样式，但是一个外部的 CSS 文件可以拥有 React 应用程序的所有剩余样式。...虽然样式指南只给出建议，但是 linter 在应用程序中强制执行这个建议。例如，你可以要求遵循流行的 Airbnb 样式指南，你的 IED/编辑器会告诉你每一个错误。...Javascript 为处理数组、对象、数字、对象和字符串提供了大量内置功能。...我以前用过 Sketch，但最近转到了 Figma。尽管我两者都喜欢，但我现在并不后悔使用 Figma。另一个流行的工具是 Framer。

    17K40

    浅谈 Checkbox Group 的双向数据绑定

    在实际工作中发现很多组件库关于 checkbox-group 的双向绑定一直很别扭，或者说多多少少都有一些瑕疵。 开始本文之前，我们先假定有如下需求： ? 数据列表和输出值都是对象数组。...能否只用一个双向绑定就完成数据的输入输出，而不是在得到绑定的数据之后再使用数组的 filter、map 这些方法去过滤和筛选。...另外，React 版和 Angular 版的输出值类型也是固定的，其中 React 版输出的是一个关于 value 的字符串数组，Angular 版是则是一个双向绑定 checked 的原数组（个人觉得...Angular 版的绑定比 React 版的要灵活，至少从原数组取值更容易一点）。...还是以上面的 cars 数组为例，如果后端同事告诉我们想要一个完整的对象数组，比如下面这样： selectedCars = [ { id: 2, name: 'Chevrolet' } ]; 那我们就必须再遍历一次

    2.4K10

    React vs Angular，到底那个更好用

    Angular 框架允许开发人员创建动态的单页面 Web 应用（Single-Page Web Applications，SPA）。...在 Web 开发中，基于组件的体系结构通常被认为比使用其他结构更易于维护。 它通过创建单独的组件来加速开发的进程，并使得开发人员能够缩短产品上线的时间，也能调整和扩展应用。...它既紧凑，又能够识别输入中的错误。 TypeScript 的其他优点还包括：更好的导航与自动完成功能，更快的代码重构。...虽然虚拟的 DOM 被认为比真正的 DOM 操作起来更为快捷，但是在 Angular 中，由于需要进行变更检测，因此这两种方法在性能方面实际上是相当的。...⑤预构建的 UI 设计元素：Angular Material vs 社区支持的组件 Angular：随着材料设计（Material Design）语言在 Web 应用中流行，更多的工程师受益于其开箱即用的材料工具集

    6.9K60

    Angular Schematics 三部曲之 Add

    前言 因工作繁忙，差不多有三个月没有写过技术文章了，自八月份第一次编写 schematics 以来，我一直打算分享关于 schematics 的编写技巧，无奈还是拖到了年底。...Add 的用途 在我目前见过的项目中，ng add 主要有两个用途： 初始化组件库（比如 angular material，ng-zorro，ngx-bootstrap） 初始化项目模板（比如 ng-alain.../node_modules/.bin/tsc -p tsconfig.json" }, } 使用 Angular CLI 来创建项目的话一般来说就是第一种情况，比如创建一个库或者创建一个 schematics...因为 schemaics 目录也是一个项目目录，所以你可以在 schematics 的 package.json 中定义拷贝命令，和官网教程是一样的，但是更恰当的方式应该是将复制命令写在根目录的 package.json...假设我们已经在项目的根目录创建了一个测试项目。npm link 其实就是将打包目录的快捷方式拷贝到 node_modules 中。

    1.7K10

    Ng-Matero：基于 Angular Material 搭建的中后台管理框架

    很多人都说 Material 是一个面向 C 端的框架，其实在使用其它框架做管理系统的时候，我发现 Material 的组件基本已经够用了，其它不足的地方可以配合一些优秀的第三方库。...经过一个多月的设计与思考，我开发了这款基于 Angular Material 的中后台管理框架，初期架构设计已经完成，在接下来的版本中会提供 schematics 支持及 vscode snippet...同时，为了弥补 Material 的不足以及更好的发挥框架的优势，我创建了另外一个项目以扩展 Material 的组件库。 因为目前还没有完善的文档，所以本篇文章会简单介绍一下框架的使用。...但是关于列间距问题稍微有点坑，虽然 flex-layout 增加了 fxLayoutGap="16px grid" 这样看似完美的方案，但是还是不太好用，除非每一个元素块都包含在 fxFlex 中。... 配置布局 通过在 settings 服务中传入配置对象可以配置页面的布局，比如 // 配置选项接口 export interface Defaults { showHeader

    3.4K20

    React 教程：React 快速上手指南

    前面我提到了 Babel，这是一个工具，可以帮助我们预览那些尚未在 JavaScript 中（更确切地说是在浏览器中）支持的东西，或者以某种方式对 JavaScript 进行扩展（或者类似于 TypeScript...我想创建一个新的单面应用，但我不想额外去找这种支持库。 我认为这大概是 Angular 值得选择的唯一原因。 我不是大公司。但是希望尽可能独立，应该选择哪个？...从 16.6 + 开始，在函数组件中也可以用类似的东西 —— 全靠 React.memo 这个更高阶的组件，在默认情况下表现得像 PureComponent（浅层比较），在你进行自定义的 props 比较时它还需要第二个参数...一般来说如果你能用函数组件（假设你不需要类功能）那么就用它。不过从 16.7.0 开始，由于生命周期方法，只能用类组件。但是我认为函数组件更透明，更容易推理和理解。 React 生命周期方法 ?...应返回一个对象值，该值将会更新可用于处理错误的状态（通过显示内容）。 由于它是静态的，因此无法访问组件实例本身。

    1.6K30

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

    对我而言，最好使用更智能的编辑器vim，因为它会为代码中的任何错误提供额外的补充，因为TypeScript是强类型的。...但是，我们*ngFor在CardList组件中等待对象数组，不能观察这些数组。...所以我们可以订阅这个可观察对象并将它分配给一个静态的卡片数组，但是有一个更好的选择： list [cards]="cards$ | async">list> 异步管道实际上是...两者都是不可变的，但第二个是基于第一个的，所以State我们创建一个新的State对象，而不是在我们的变异值上。...但是在相同的代码中，我们看到了另一个效果，它ServerFailure使用装饰器参数处理动作dispatch: false。这是什么意思？

    46.2K10

    吐槽一下 Vue3 的语法设计

    比如下面这个例子，我将一个列表作为响应性数据定义在 reactive 中 let data = reactive([]) 但是我万万没想到的是，这样使用是有问题的。...就是当我试图使用静态参数类型传递一个静态对象时，你猜怎么着？传不了！ 我只能改成动态的绑定写法，才能正常传递。...这里为啥误导性很强呢，因为在我看来，虽然我声明的是一个对象，但是他就是一个静态的数据，也不是一个响应式数据 // 我觉得这是一个静态数据 const a = { message: 'hello' }...没办法，虽然我已经知道怎么用了，但是我到现在也不太确定官方文档说的动态属性表达的准确定义是啥。...我认为的常规逻辑无非就是在父组件中，一个 key=value 的方式传递下去，然后在子组件中通过识别 key 来获得这个 value，但是 Vue 又设计了一个新的思路，重新用了一个宏来处理这个事情 <

    36910

    理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

    在 Rx--隐藏在Angular 2.x中利剑 一文中我们已经初步的了解了 Rx 和 Rx 在 Angular 的应用。 今天我们一起通过一个具体的例子来理解响应式编程设计的思路。...但是到这里，你会发现我们还没有定义两个原始数据流呢，别急，留到后面是为了引出 Angular 对于 Rx 的良好支持。...我们这里使用了响应式表单，也非常简单，就是一个 form 里面 3 个控件，这里我采用了官方的 Material 控件，如果你觉得不爽，可以直接用基础的 HTML 控件搭配样式即可。...按常规套路来讲，我们得声明 Subscription 对象，因为 Observable 是一直监听的，即使页面销毁，它也还在，这会造成内存泄漏。...Angular 4 中的 NgIf 的改进 Angular 4 中的 ngIf 现在可以携带 else 了，如果你曾经使用过 Angular 就知道，原来我们是得写两个 ngIf 来完成类似的功能的。

    5.9K10

    Angular 项目中 assetsicons 文件夹的作用详解

    在 Angular 项目中，/assets/icons 文件夹扮演了一个重要的角色，通常用于存储静态资源，尤其是图标文件。...这些图标可以是多种格式的，例如 SVG 文件、PNG 文件、ICO 文件等。下面，我将一步步分析 /assets/icons 文件夹的作用，并且阐述图标在 Angular 项目中的使用场景。1....例如，可以创建一个 IconComponent，它接受一个图标名称作为输入属性，基于这个输入属性动态加载图标：import { Component, Input } from '@angular/core...与 Angular Material 的集成在实际项目中，Angular 常常与 Angular Material 框架结合使用。...Angular Material 提供了一种方式，将自定义的 SVG 图标集成到 MatIcon 组件中。

    19510
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券