Angular1.X | Angular4+
文章平均质量分 82
Angular 2,4,6,8,9极其以上框架
.NET跨平台
比较认真。编程就是算法和数据结构,算法和数据结构是编程的灵魂。
展开
-
Angular2的核心概念详解
2-1 组件及组件树8个核心概念组件 Components元数据 Metadata模板 Templates数据绑定 Data binding服务 Services指令 Directives依赖注入 Dependency Injection模块 Modules组件组件要素HTML、CSS、JavaScript全生命周期支持Constructor 构造器初始化OnChanges 第一次触发数据变化钩子OnInit 组件初始化(建议将和业务相关的初始化放到这里)OnChan转载 2021-01-14 15:32:33 · 368 阅读 · 0 评论 -
Angular学习(二)【组件】
组件前端中的组件是一堆为了实现同一业务逻辑的代码文件的组合,将相关文件都放到同一个目录中,就形成了一个独立性非常强的组件。Angular 中使用了Web Component 的标准来实现组件化。组件是 Angular 应用的最小的逻辑单元,模块则是在组件之上的一层抽象。组件以及其他部分,如指令、管道、服务、路由等都可以被包含到一个模块中,外部通过引用这个模块来使用一系列封装好的功能。可以把 Angular 应用想象成一棵树,模块是这棵树的树枝,组件是这棵树的叶子,每个 Angular 应用都必须要有转载 2021-01-14 15:16:16 · 817 阅读 · 0 评论 -
Angular学习(一)【Angular-CLI,简单解析】
认识 Angular-CLI开发 Angular 需要很多的工具,比如 Typescript 、 Webpack 、 Karma 等等,这些工具自己去配置会很麻烦,所以 Angular 官方推出了 Angular-CLI 。Angular-CLI 不仅仅是一个构建 Angular 的工具,而是一个集成了很多工具的平台。安装Angular-CLI 新版本已经更名为 @angular/clinpm install -g @angular/cli常用命令创建项目ng new my-project转载 2021-01-14 15:15:33 · 1783 阅读 · 0 评论 -
用angular来思考问题How do I “think in AngularJS” if I have a jQuery background?
【翻译】How do I “think in AngularJS” if I have a jQuery background?1. 不要先设计页面,然后再使用DOM操作来改变它的展现在jQuery中,你通常会设计一个页面,然后再给它动态效果。这是因为jQuery的设计就是为了扩充DOM并在这个简单的前提下疯狂的生长的。但是在AngularJS里,必须从头开始就在头脑中思考架构。必须从你想要...转载 2020-03-21 23:31:27 · 301 阅读 · 0 评论 -
Angular重要概念
Angular概念不能把Angular当作黑盒来使用,要充分了解它的内部结构。依赖注入1、 什么是依赖注入?2、依赖性注入框架Angular在angular中,我们只要记住依赖注入的三种角色:<font color=red size=4>使用者、服务(依赖对象)及注入器(Injector)</font>@Injectable是@Component的子...转载 2019-11-20 11:14:04 · 693 阅读 · 0 评论 -
Angular 4环境准备与Angular cli创建项目详解
本文介绍的是为Angular4.0准备环境和学会使用Angular cli来创建项目的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍:1.环境准备:1)在开始工作之前我们必须设置好开发环境, 如果你的机器上还没有安装Node.js和npm,请安装他们 (这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以了)npm install -g...转载 2018-09-01 20:47:00 · 467 阅读 · 0 评论 -
Angular CLI 终极指南
Angular CLI 是什么? Angular CLI 是一个命令行接口(Command Line Interface),用于实现自动化开发工作流程。它允许你做以下这些事情:创建一个新的 Angular 应用程序 运行带有 LiveReload 支持的开发服务器,以便在开发过程中预览应用程序 添加功能到现有的 Angular 应用程序 运行应用程序的单元测试 运行应用程序的端到端 ...转载 2018-09-01 20:38:23 · 302 阅读 · 0 评论 -
Angular引入第三方库
如果我们想在Angular中使用第三方的库,比如jquery或bootstrap等,该如果做呢?首先我们先来看看package.json这个文件,在目录介绍那篇博客中我们已经知道,package.json这个文件列出了项目所使用的第三方依赖包。我们在创建新项目的时候默认会给我们下载一些包,这些是Angular自带的,存放在node_modules目录中。这里写图片描述需要注意的是: ...转载 2018-08-29 21:09:48 · 2046 阅读 · 2 评论 -
Angular的启动过程
在上一篇的博客中,我们详细了解了新项目的项目结构。知道了main.ts是整个Angular项目的入口点,那么,Angular项目的启动过程是怎样的呢?那么我们就要搞清楚三个问题。 1.启动时加载了哪个页面。 2.启动时执行了哪些脚本 3.这些脚本都做了什么首先我们看一下angular-cli.json这个文件,上一篇博客说到这个文件是命令行工具的配置文件。我们先来看看里面的代码{...转载 2018-08-29 13:08:40 · 580 阅读 · 0 评论 -
AngularJS 4(七)【路由】
路由通过 URL 映射到对应的功能实现,也就是不同的 URL 会渲染对应的组件。URL 的切换实际就是组件之间的切换。简单的路由入门宿主页面 – index.html 大多数带路由的应用都要在 index.html 的 &lt;head&gt; 标签下先添加一个 &lt;base&gt;元素,来告诉路由器该如何合成导航用的URL。&lt;!doctype html&gt;...转载 2018-08-24 16:40:41 · 473 阅读 · 0 评论 -
AngularJS 4(六)【依赖注入】
依赖注入依赖注入是重要的程序设计模式。 Angular 有自己的依赖注入框架,离开了它,几乎没法构建 Angular 应用。 它使用得非常广泛,以至于几乎每个人都会把它简称为 DI。从服务开始来了解依赖注入创建字典服务 – ./src/app/service/dictionary.service.tsexport class DictionayService { l...转载 2018-08-24 16:39:24 · 403 阅读 · 0 评论 -
npm install -g 和npm install --save-dev的关系
1.npm install本地安装(1)将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 目录。(2)可以通过 require() 来引入本地安装的包。2.npm install -g全局安装(1) 将安装包放在 /usr/local 下或者你 node 的安装目录。(2)可以直接在命令行里使用。3.npm install --save(1)会把msbui转载 2018-09-01 21:10:08 · 19702 阅读 · 0 评论 -
Angular ng常用命令
1.启动应用服务器//命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用。ng serve //--open标志会打开浏览器,并访问 http://localhost:4200/ng serve --open//--port标志浏览器端口,并访问 http://localhost:4201/ng serve --port 4201 --open 2.创建列表组件ng generate component heroes //使用 Angular C转载 2018-09-02 10:58:29 · 2606 阅读 · 0 评论 -
如何从Angular 5 App升级到Angular 6
在这篇文章中,您将学习 如何更新或移植Angular 5应用程序(使用Angular 5.1或Angular 5.2版本)来使用Angular 6.0.0。以下是一些涵盖的要点:先决条件 将Angular 5移植到Angular 6.0.0应用的升级/更新步骤先决条件在开始迁移之前,需要完成以下工作:确保您的NodeJS版本是Node 8或更高版本。 确保你的代码使用Htt...转载 2018-09-02 22:46:37 · 1024 阅读 · 0 评论 -
Angular6项目运行到95%emitting LicenseWebpackPlugin不动卡住
将angular版本跟新到6.0.6,新建angular项目突然无法运行了,我新建项目步骤如下:ng new democd demong serve --open运行结果如下,程序一直卡在95%查看我的环境配置网上查找资料,有博主分析是npm版本太高,我赶紧用npm i -g npm@5.6.0把版本降下来,然额,情况还是一样。emmm。。网速的问题?过了大约半个小时情况我再试...转载 2018-09-11 22:20:08 · 1266 阅读 · 0 评论 -
MVC5使用Angular.Js实现Crud
CelularModel.csusing System.ComponentModel.DataAnnotations;namespace Angular.App.Data.EntityConfig{ public class CelularModel { public int Id { get; set; } [Required(Err...转载 2018-09-15 00:01:00 · 380 阅读 · 0 评论 -
AngularJS系列之select下拉选择第一个选项为空白的解决办法
今天给大家介绍一下AngularJS系列之select下拉选择第一个选项为空白的解决办法。相信大家也经常遇到这种情况吧:在使用AngularJS中的select组件开发的时候,莫名其妙的第一个选项就变成空白了,而且选中其中非空白的地方,第一个选项的空白位置又奇妙的消失了。今天就举几个例子给大家介绍一下种种情况的处理办法,下面首先给出一个具体例子介绍一下:&lt;!DOCTYPE html&g...转载 2018-12-30 16:31:17 · 615 阅读 · 0 评论 -
浅谈Angular的$q, defer, promise
1. $q$q是Angular的一种内置服务,它可以使你异步地执行函数,并且当函数执行完成时它允许你使用函数的返回值(或异常)。2. deferdefer的字面意思是延迟,$q.defer() 可以创建一个deferred实例(延迟对象实例)。deferred 实例旨在暴露派生的Promise 实例,以及被用来作为成功完成或未成功完成的信号API,以及当前任务的状态。这听起来好复杂...转载 2019-04-05 14:29:15 · 859 阅读 · 0 评论 -
angular4 整体架构
1.Angular程序架构:2.组件Component架构:必备元素:装饰器@Component():组件元数据装饰器,声明一个组件;模板Template:页面渲染,其实就是html文件,可以使用angular的指令与控制器进行数据绑定;控制器Controller:用来编写页面大部分业务逻辑;在代码中的呈现如下:可选的可注入对象:输入属性@inputs():接收外部传入数...转载 2019-08-25 22:51:29 · 343 阅读 · 0 评论 -
AngularJS 4(五)【管道】
管道用来转换数据渲染的格式,在 1.x 版本的时候称之为过滤器,在 4.x 称之为管道。使用格式:date_expression | date[:format[:timezone[:locale]]]大写转换&lt;div&gt; &lt;p ngNonBindable&gt;{{ 'Angular' | uppercase }}&lt;/p&gt; &lt转载 2018-08-24 16:37:21 · 533 阅读 · 0 评论 -
AngularJS 4(四)【HTTP 服务】
提供 HTTP 服务HttpModule并不是 Angular 的核心模块。 它是 Angular 用来进行 Web 访问的一种可选方式,并位于一个名叫 @angular/http 的独立附属模块中,并作为 Angular 的 npm 包之一而发布出来。注册 HTTP 服务我们的应用将会依赖于 Angular 的http服务,它本身又依赖于其它支持类服务。 来自@angular/h...转载 2018-08-24 16:36:33 · 637 阅读 · 0 评论 -
AngularJS 4(三)【指令】
1112转载 2018-08-24 16:34:27 · 549 阅读 · 0 评论 -
Windows+Android+Cordova+ionic环境搭建
一、ANT安装Apache Ant,是一个将软件编译、测试、部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发。 下载地址:http://ant.apache.org/bindownload.cgi解压,并放在非中文的目录下。(我的目录:E:/Program Files/Java/apache-ant-1.9.4) 配置环境变量: 变量名:ANT_HOME 值:既ANT转载 2018-04-13 15:11:00 · 359 阅读 · 0 评论 -
ionic之AngularJS扩展(二)【移动开发】
ionic之AngularJS扩展,内容包括: 内联模板 : script 路由机制 : 状态机 导航视图 : ion-nav-view 模板视图 : ion-view 导航栏 : ion-nav-bar 回退按钮 : ion-nav-back-button内联模板 : script可能你没有注意过,HTML中常用的scri转载 2018-02-07 17:04:59 · 446 阅读 · 0 评论 -
ionic之AngularJS扩展(一)【简介】
ionicionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生App应用: ionic主要包括三个部分:CSS框架 - 提供原生App质感的CSS样式模拟。ionic这部分的实现使用了ionicon转载 2018-02-07 17:03:53 · 534 阅读 · 0 评论 -
跟我读AngularJs的源代码
你要相信,再牛逼的框架他的本质也是javascript代码,只要你会js代码你就能看懂!别怂!AngularJs是一个很简单的框架(其设计思想很前卫,涉及领域很广,使得它表现出很难的特性,但是你要相信,你使用起来还是很简单的。)我这里分析的是AngularJS v1.5.7,官网最新版的是2.x(新版的2.x比1.x改进了很多很多,改天再细致分析一遍)我们来分析一下angular的核心文件(),打开转载 2018-03-27 10:17:54 · 3146 阅读 · 0 评论 -
深究AngularJS自定义服务详解(factory、service、provider)
前言3种创建自定义服务的方式。 Factory Service Provider大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想。所以我们得了解下分层的作用,如果你是前端人员不了解什么是分层,那么你最好问问你后台的小伙伴。 dao层:就是Model层,在后台时,这一层的作用,就要是写与数据库交互转载 2018-03-03 16:22:10 · 423 阅读 · 0 评论 -
Angular常用ng指令详解
我们依次从使用频率高到低来,重要性大小来说明各种指令。1、ng-repeat1.1 一般用法 "char in [{'alphabet': 'K'}, {'alphabet': 'A'}, {'alphabet': 'V'}, {'alphabet': 'L'}, {'alphabet': 'E'}, {'alphab转载 2018-02-07 17:25:10 · 3289 阅读 · 0 评论 -
AngularJs内置指令大全
http://blog.csdn.net/qq_35759390/article/details/654460491、ng-model这个大家都非常熟悉了,就是将表单控件和当前作用域的属性进行绑定。需要注意绑定的scope的范围(父scope与子scope)。ng-model主要绑定的元素包括input, select, textarea ng-model的元素都有ng-valid转载 2018-01-24 20:38:29 · 649 阅读 · 0 评论 -
Angular 4官方文档(二)【数据的展现】
通过把 Angular 组件的属性绑定到 HTML 模板的控件上,我们可以展示数据。本小节中,我们将会创建一个英雄列表组件。我们将展示英雄名字的列表,并根据条件来决定是否在列表下方展示一条信息。最终的 效果是这样的:在线例子 / 下载示例代码 演示了这一节所有的提到的代码片段和语法。1.用插值表达式展示组件的属性通过插值表达式来绑定属性名,是展示组件属性最简单的方式。使用双花括号的插值表达式{{m转载 2017-11-26 22:56:23 · 2150 阅读 · 0 评论 -
AngularJS、 Angular 2、Angular 4 的区别
序言随着Angular版本的频繁推出,有必要了解下AngularJS、 Angular 2、Angular 4 的区别。 字面上的区别(1)我们常说的 Angular 1 是指 AngularJS; 从Angular 2 开始已经改名了。不再带有JS,只是单纯的 Angular; (2)还有一个不可思议的版本变化: 从 Angular 2 直接跳跃到了 Angular 4 , 咋不见 ...转载 2018-08-26 10:23:12 · 959 阅读 · 0 评论 -
Angular2 VS Angular4 深度对比:特性、性能
在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。对于成熟的开发人员来说,有以上两种选择是一件很棒的事情;但是,对于处于学习阶段的新晋开发人员来说,可能有点不知如何选择。那么,本文将会对Angular2和Angular4进行深度...转载 2018-08-26 10:56:10 · 484 阅读 · 0 评论 -
AngularJS 4(二)【模版语法,组件】
模板语法(Template Syntax)import { Component } from '@angular/core';@Component({ selector: 'app-root', template: '&lt;h1&gt;{{title}}&lt;/h1&gt;',})export class AppComponent { title = 'Welcom...转载 2018-08-24 16:32:33 · 622 阅读 · 0 评论 -
AngularJS 4(一)【搭建环境】
搭建环境 - 基于 Angular CLI 新建项目Angular CLI 是一个命令行接口(Command Line Interface),用于实现自动化开发工作流程。它允许你做以下这些事情: - 创建一个新的 Angular 应用程序 - 运行带有 LiveReload 支持的开发服务器,以便在开发过程中预览应用程序 - 添加功能到现有的 Angular 应用程序 - 运行应用程序...转载 2018-08-24 16:29:02 · 391 阅读 · 0 评论 -
Angular项目目录结构详解
在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文件又有什么意义,文件中的代码又起到什么作用。首先看一下整体的目录结构: 这里写图片描述可以看到,命令行工具自动生成了很多文件和目录,我们来说说这些目录是干什么的首层目录:node_modules 第三方依赖包存放...转载 2018-08-28 23:07:45 · 2041 阅读 · 0 评论 -
Angular环境搭建
目前Angular的最新版本是Angular4.0,所以我们搭建的环境是4.0版本的。 Angular官方给我们提供了一个命令行工具就是Angular CLI,通过这个工具我们能很容易的创建Angular项目。后期对项目的管理及构建等都是使用这么命令行工具。1.安装nodejs 首先要安装nodejs,如果你的电脑已经装过了,最好确认是比较新的版本,否则可能会出问题。 没有安装的直接去n...转载 2018-08-28 22:24:28 · 1256 阅读 · 0 评论 -
分析Angular目录结构
分析Angular目录结构以及Angular Cli生成的基础代码e2e 端到端的测试目录,用来做自动测试得node_modules 第三方的依赖包src 源代码目录app 包含应用的组件和模块assets 用来存放静态资源文件environment 环境配置,支持多环境开发,比如开发环境和生产环境可以共用一套代码index.html 整个应用的根文件main.ts 整个应用的...转载 2018-08-28 21:54:40 · 363 阅读 · 0 评论 -
Angular4学习(初始文件目录结构解读)
整体文件结构 这里写图片描述应用的源代码目录 这里写图片描述 一级文件内容 E2e:端到端测试目录,做自动化测试 node_modules:项目依赖包 Src: 应用的源代码目录 其他 Angular-cli.json : angular命令行工具的配置文件 karma.conf.js: kamar自动化测试的集成器的执行器 Package.json :做angular开...转载 2018-08-31 15:59:23 · 1395 阅读 · 0 评论 -
Angualr4基础之组件生命周期
##组件生命周期//这个顺序是按照执行的先后排列的constructor:构造器函数,一般用于注入服务ngOnChanges:检测到输入数据变化,首次触发发生在ngOnInit前。注意对象的属性发生变化时监听不到ngOnInit:组件初始化,通常会设置一些初始值ngDoCheck:手动触发更新检查 ngAfterContentInit:内容初始化到组件之后ngAfter...转载 2018-08-26 11:08:16 · 279 阅读 · 0 评论 -
Angular2 组件生命周期
说明Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力。 2. 接口按照生命周期执行的先后顺序,Angular生命周期接口如下所示名称时机接口范围ngOnChanges当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。...转载 2018-08-26 11:03:01 · 392 阅读 · 0 评论