When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular Elements is one of them. In this lesson we learn how to integrate an Angular Element into an AngularJS (v1.x) application. We will leverage some feature…

We can treat Angular Element as each standlone lib and compile each Angular element spreatly. Tool we are using to compile Angular element is 'ngx-build-plus': Install: npm i --save ngx-build-plus It modifies the angular.json to use ngx-build-plus to…

Angular Elements Angular Elements 就是打包成自定义元素的 Angular 组件.所谓自定义元素就是一套与具体框架无关的用于定义新 HTML 元素的 Web 标准. 自定义元素这项特性目前受到了 Chrome.Opera 和 Safari 的支持,在其它浏览器中也能通过腻子脚本(参见浏览器支持)加以支持. 自定义元素扩展了 HTML,它允许你定义一个由 JavaScript 代码创建和控制的标签. @angular/elements 包导出了一个 createCu…

Make sure install the latest Angular v6 with Angular CLI. Checkout ght Github for the code. 1. Create a new application: ng new elementApp 2. Install @angular/elements package: ng add @angular/elements --project-name=<your_project_name> 3. Generate…

This post is based on the NG-CONF talk, check the talk by yourself. 1. Dynamiclly add Angular Element into your application: Once you have angular element, then inside your new application, you can use 'docuemnt.createElement' to add it: 2. Lazy load…

In a real world scenario we obviously need to be able to communicate with an Angular Element embedded into our static HTML site. In this lesson we will learn how we can pass data into a Custom Element and how we can register to an Angular Element’s o…

Angular 6 正式发布 Angular 6 已经正式发布了!这个主要版本并不关注于底层的框架,更多地关注于工具链,以及使 Angular 在未来更容易快速推进. 作为发布的一部分,我们同步了主要的框架包  (@angular/core, @angular/common, @angular/compiler, etc),  Angular CLI, 以及 Angular Material + CDK.现在全部都是作为 6.0.0 发布.我们理清了它们之间的兼容性.小的更新的补丁将会基于项目的…

Angular 7 版本 这是跨整个平台的主要版本,更新包括核心框架,Angular Material和CLI. 如何更新到v7 可以访问update.angular.io以获取有关更新应用程序的详细信息和指导. 其中大多数应用只需要执行以下命令: ng update @angular/cli @angular/core CLI提示 现在,CLI将在运行常用命令时提示用户,ng new或者ng add @angular/material帮助您发现路由或SCSS支持等内置功能. CLI提示已添加到…

angular 自定义web组件: 首先创建一个名为myCustom的组件. 引入app.module: ... import {customComponent} from ' ./myCustom.component'; @NgModule({ declarations:[AppComponent,customComponent], entryComponents:[customComponent] .... }) export class AppModule{} 全局注册: app.comp…

Angular v6 新版本重点关注工具链以及工具链在 Angular 中的运行速度问题. Angular v6 是统一整体框架.Material 和 CLI 三大 Angular 组件的第一个版本,此次更新更多地关注于工具链上,以使其具有更好的可移植性. 此次更新信息如下: 更新依赖关系: @angular/core 现在依赖于: TypeScript 2.7 RxJS 6.0.0 tslib 1.9.0 @angular/platform-server 现在依赖于 Domino 2.0 特性…

上篇介绍了Util的开发环境,并让你把Demo运行起来.本文将介绍该Demo的前端Angular运行机制以及目录结构. 目录结构 在VS上打开Util Demo,会看见如下的目录结构. 现代前端通常采用VS Code开发,不过我们为了使用TagHelper,需要采用VS开发,这为你提供了更多的选择. 你可以将WebApi和Angular应用放在同一个项目中,就像现在看见的那样.也可以分别把WebApi和Angular应用放到不同项目中. 如果你已经习惯了VS Code开发,这同样没问题,不过你将…

准备工具 Node.js Angular requires Node.js version 8.x or 10.x. 查看当前你的node版本可以在CMD中输入 node -v npm -v 开发工具强烈推荐 visual studio Code 安装 agular_cli npm i -g @angular/cli 新建工程 用CLI命令建立 ng7demo ng new projectName 这里前面我用ng7_demo的时候报错 应该是不能用下划线 这里夸奖下, 7加入了CLI prom…

Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s createEmbeddedView for more visual control of how you want to generate elements inside of your Angular 2 templates. import…

You have complete control over the elements you nest inside of your component instance by using selectors to access and rearrange them. Selecting allows you reconstruct the elements in whatever order you like so you can visual customize the content p…

You can place content inside of the instance of your component element then manage it inside of the component’s template using ng-content. This process is called reprojection, but you may be more familiar with the term “transclusion”. Home: <div>I a…

You can use Select and Option elements in combination with ng-for and ng-model to create mini-forms that change your data as you make a selection. /** * Created by wanzhen on 23.10.2015. */ import {Component, View, NgFor, FORM_DIRECTIVES} from 'angul…

This lesson covers Angular 2’s version of looping through data in your templates: ng-for. It’s conceptually the same as Angular 1’s ng-repeat, but you’ll find the syntax quite different as it aligns with #refs in Angular 2 and JavaScript “for of” loo…

We will learn how to make use of the ngStyle directive to directly add multiple style attributes to a DOM element as a style property. We’ll also learn how we can make these styles more dynamic through user input. import { Component } from '@angular/…

最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供基础功能.在用jQuery操作DOM的时候对Promise的使用欲不够强烈,最近学习node和Angular,需要用js写业务逻辑和数据操作代码的时候这种场景需求就出来了.一般来说事件适合在交互场景中运用,因为用户的行为本来就是分散的,而promise这样的流程控制适合在后台逻辑中处理业务. //j…

这一期中,我不会分析源码,只是翻译一下"https://docs.angularjs.org/api/ng/service/$compile",当然不是逐字逐句翻译,讲解指令应该如何编写,下一期再接着讲$compile的源码.我觉得,懂得如何使用angular可能对童鞋们更有用. 先说点废话:上一期更新的时间是11月25日,一停就是相隔两周多了.1.是由于公司的网站上线(给公司打个广告(美好学院)[http://www.meihaoxueyuan.com]),2.是由于家里发生了一些事…

我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$parse的源码打开一看,它的代码量有接近两千行.翻开angular的api文档,官方只给出了简短的解释"Converts Angular expression into a function(将一个angular的表达式转化为一个函数)",心中神兽奔腾----就这么点功能为什么要"…

一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维护它时,便一直在关注,看到其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.朝思暮想良久,决定深入学习angular,并写系列博客,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考. 首先我自己是一名学习者,会以学习者的角度来整理我的行文思路,故该系…

Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend HTML with custom attributes and elements (给HTML增加自定义属性和元素) Model(模型): the data shown to the user in the view and with which the user interacts (与用户交互…

在本篇博文中,我们将接触angular的验证.angular的验证是由form 指令和ngModel协调完成的.今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被form捕获的.或者是你希望在ngRepeat中使用动态表达式. 下面且让我们先来从angular源码中看起如下: 首先是ngModel: var ngModelDirective = function() { return { require: ['ngModel', '^?form'], con…

在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的angular的编辑顺序图的缩略版: ├─── angular.prefix //util.wrap函数加入的前缀代码 │ ├─── minErr.js //错误处理 ├─── Angular.js //主要定义angular的工具函数 ├─── loader.js //定义了setupModuleLo…

一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 return element; } var argIsString; if (isString(element)) { //情况2 element = trim(element); //先去掉两头的空格.制表等字符 argIsString = true; } if (!(this instanceof…

Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 一.什么是数据双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-control…

示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 7</title> <script type="text/javascript" src="js/angular.js"></script> </head> <body> <div ng-controller=&…

示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 6</title> <script type="text/javascript" src="js/angular.js"></script> </head> <body> <div ng-controller=&…

Select Dropdowns in Angular 2 a built with select and option elements. You use *ngFor to loop through your values and create options and use ngModel to keep track of the value as it changes. <form #formRef="ngForm"> <select name="l…