♥Angular学习♥

Angular学习之旅----创建项目第一次运行

npminstall-g@angular/cli全局安装最新的angular-cli脚手架在项目目录下cmdngnewangular01建立新的项目cdangular01之后yarninstall安装依赖ngserve--open在项目目录下运行nggcomponentcomponents/header来创建header组件ngOnInitangular的生命周期函数数据文本绑定{{}}绑定HTM
supercandy·2020-07-29 17:59

Angular学习笔记（一）

本文为原创文章，转载请标明出处目录架构模板与数据绑定生命周期1.架构模块Angular应用是模块化的，并且Angular有自己的模块系统，它被称为Angular模块或NgModules。Angular模块都是一个带有@NgModule装饰器的类。NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：declarations-声明本模块中拥有的视图类。Angu
Metaphors·2020-07-29 09:33

Angular学习笔记

Iframe动态绑定（关于$sce）varmyApp=angular.module("myApp",['ngSanitize']);functionunoteListController($scope,$sce){/**OtherCode*/$scope.url=$sce.trustAsResourceUrl(url);}从官方文档和源码中可以看出，$sce服务提供了很多方法，但它只是代理了$sc
某某运·2020-07-29 01:59

Angular学习随笔

最近在看angular4，随手记的一些angular的随笔。新上手或者准备学angular的可以用作参考，第一次写博客，笔记不算完整，若老司机发现有不足指出请指出。技术交流群：513590751Angular程序架构组件是Angular应用的基本构件块、可以把一个组件理解为一段带有业务逻辑和数据的html指令详细指令速查允许向html添加自定义行为模块用来将应用中不同的部分组成一个Angular框
weixin_34232363·2020-07-28 19:36

Angular学习笔记

angular是面向未来的前端开发框架，学习她理解思想比代码重要，体现的是跨越前后端、大成、优秀的编程思想。她是一个完善的工具链和开发链。写angular，你会感觉是在写java，更像写c#,面向对象和组件化的思想。我们是这样写Angular应用的：用Angular扩展语法编写HTML模板，用组件类管理这些模板，用服务添加应用逻辑，用模块打包发布组件与服务。angular是围绕组件化构建整个项目的
互联网编程·2020-07-28 07:40

angular学习总结十——动态创建组件并实现交互一

ps:看了好多篇动态组件的博客，坑啊，只是放进去一个静态组件，并未加上Input，OutputappModuleimport{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{AppComponent}from'./app.component';import{FormsM
米斯特尔曾·2020-07-16 05:02

Angular请求报魔性400错误

、"}"这样的参数，需要对特殊字符进行转义，把"转成%22，把{转成%7b，把}转成%7d如果url中含有这些特殊字符，都需要进行转义，否则请求报400错误，这个问题还是花了一天时间都无法解决，最后加angular
best-徐·2020-07-14 20:41

angular学习进阶(十五)

resolve(解决守卫)保证了数据获取后在进行路由跳转,防止因为数据延迟而出现的空组件情况简单的理解成解决延迟守卫创建一个接口product/product.tsnggiproduct/product.tsexportinterfaceProduct{id:number;name:string;price:number}创建一个服务nggsproduct/productimport{Inject
房东家的猫·2020-07-13 13:00

Angular学习记录-显示与隐藏

Angular学习记录-显示与隐藏在学习之前，首先声明以下，暂时日后更新的AngularJS学习记录系列的文章，都将会是结合本人正在看的《AngularJS实战》书籍里的内容进行分享和个人观点及评价。
web_LamHo·2020-07-12 05:07

angular学习之路（一）开山篇

1、ng-app=""定义angularJS的使用范围；2、ng-init="变量=值;变量='值'"初始化变量的值，有多个变量时，中间用分号隔开；3、ng-model="变量"定义变量名；4、ng-bind="变量"绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。5.angularJS属性以ng-开头，但也可以data-ng-
mrhuanhuan·2020-07-11 13:44

angular学习（六）—— 依赖注入

转载请写明来源地址：http://blog.csdn.net/lastsweetop/article/details/53409171依赖注入依赖注入(DI)是一种处理组件如何获得依赖的软件设计模式，在Angular中，injector子系统负责创建组件，解决组件的依赖，并将它们提供给其他组件。使用依赖注入在Angular中DI是无处不在的，你可以用它来定义一个组件，也可以提供module实现ru
吴冬冬·2020-07-11 10:01

品优购 Angular学习

12345angulardemo-1差值表达式6789{{1+2}}10{{1>2}}111212345angulardemo2双向绑定67891011{{name}}121312345angulardemo3初始化指令6789{{name}}101112345angulardemo4控制器和$scope控制层通过$scope来控制数据678//定义模块9vardemo=angular.modul
diaopitian0181·2020-07-11 05:08

【Angular学习】Angular4 ng serve报错：ERROR in AppModule is not an NgModule解决方法

【错误信息图示】【错误原因】出现这个错误的原因是angular/cli自己依赖的那个版本和本地ts版本不一致的问题，ts版本过高会出现这个错误。【解决办法】第一步：卸载全局的tsnpmuninstall-gtypescript第二步：安装2.2.2版本的[email protected]第三步：查看ts版本是否安装成功tsc-v第四步：修改package.json文件中的
Hepburn Yang·2020-07-11 00:57

Angular学习笔记47：解决Echart报错：ERROR Error: Component series.line not exists. Load it first.等问题

早晨起来，打开项目的，发现原来项目中好用的Echart所有图表都不显示了。打开控制台发现，所有的报错了。报错信息如下：ERRORError:Componentseries.linenotexists.Loaditfirst.ERRORTypeError:Cannotreadproperty‘seriesTaskMap’ofnull.等信息。ERRORError:Componentseries.li
wujiayucn·2020-07-09 00:11

Angular学习笔记（三） --- 父子组件通信 @Input 与 @OutInput 详解 （ 上 ）

父组件向子组件传递数据首先我们创建一个simple-app项目，在项目中，再创建一个子组件ChildComponent。修改子组件的文件child.component.html子组件父组件的名称：{{parent?.name}}-child.component.tsimport{Component,OnChanges,Input}from'@angular/core';@Component({se
wangdan_2013·2020-07-08 12:39

Angular学习记录（会把遇到问题记录）

Angular学习之路安装安装AngularCLIcnpminstall-g@angular/cli创建第一个项目使用clingnewfirst-demo-ng等待大概3分钟安装完毕，编辑器打开看一看到如此目录使用
m18565890306·2020-07-07 16:47

Angular学习第四天

今天我们来做一下电商网站常见的购物车功能实现功能，购物车相信大家都熟悉显示商品列表商品添加进购物车购物车内没有商品时，显示去购物当购物车内没有商品时，显示去购物购物车内商品总件数和总价的计算及显示首先我们来看下实际运行效果2180072-eb25ddf150bd3966.png2180072-9dcf22670887d4c7.png页面相关样式（不做赘述）*{padding:0px;margin:
我是灰灰的小跟班·2020-07-07 13:10

angular学习（十三）——Component

转载请写明来源地址：http://blog.csdn.net/lastsweetop/article/details/56285838理解Components在angularjs中，Component是一种特殊的directive，它的配置更简单一些，非常适合组件化的app架构。使用web组件和使用Angular风格的app架构使得编写app更为简便。Component的优点：比普通directi
吴冬冬·2020-07-07 13:56

Angular学习心得（一）

1、MVX:数据、表现、逻辑分离；2、Angular以M（model数据）V（view视图/表现层）C（controller控制器/业务逻辑）为基础；降低程序员重复工作的劳动量。扩展了HTML功能，颠覆传统JS开发，可扩展。3、基本使用：ng-app=“”AngularJS掌管的范围4、双向绑定（ng-model可实现双向绑定）；依赖注入：参数由定义方决定。5、函数：参数由调用方决定。6、模版：｛
程序猿届的彭于晏·2020-07-02 16:53

angular学习004显示英雄列表

参考来源：https://www.angular.cn/tutorial/toh-pt21、创建模拟数据app\mock-heroes.tsimport{Hero}from'./hero';exportconstHEROES:Hero[]=[{id:11,name:'Mr.Nice'},{id:12,name:'Narco'},{id:13,name:'Bombasto'},{id:14,name
lich0609·2020-07-02 08:49

Angular学习笔记—创建一个angular项目

开始项目前，你需要先安装node和npm，然后执行npminstall-g@angular/cli安装AngularCLI。如何安装node.js和npmnpm使用介绍1.安装angular-cliAngular提供了一个命令行工具angular-cli,它能让用户通过命令行创建和管理项目。安装命令：[email protected]安装后可输入指令ng
aiganxie2129·2020-07-01 16:36

【Angular学习】Angular环境配置

【背景】最近参与了项目的前端开发，接触了Angular，首先了解的就是Angular的环境配置，鉴于以后应该会常常用，所以总结记录下~【内容】Angular环境搭建过程：1.下载安装nodejs：https://nodejs.org/en/（Angular2基于node.js，所以要先安装nodejs环境）打开nodejs官网，点击绿色Download按钮，它会根据系统信息选择对应版本（.msi文
Yolanda94·2020-07-01 15:24

【Angular学习】创建一个Angular项目

【背景】学习Angular的第二篇博客，掌握如何创建一个新的Angular项目。【内容】创建Angular项目的步骤：1、进入要创建项目的目录，在cmd命令框中输入：ngnew+项目名称（ps：最好使用英文）。2、在项目创建到绿色字体出现的时候，按CTRL+C，终止批处理操作。使用cmd命令：cd+创建的项目所在文件夹进入项目文件夹，再输入Angular命令：cnpminstall（因为使用ng命
Yolanda94·2020-07-01 01:22

Angular学习笔记69：Angular项目的单元测试 -- 对服务进行测试

对服务进行测试服务通常是单元测试中最简单的文件类型对于简单，没有其他依赖的服务对于一个没有其他依赖的服务，Mock一些数据，进行测试即可例如：对于一个公共数据处理的服务import{Injectable}from'@angular/core';import{Subject}from'rxjs';@Injectable({providedIn:'root'})exportclassPublicDat
wujiayucn·2020-06-29 19:51

Vue超详细知识讲解

Angular学习成本太高React代码可读性差Vue学习成本较低很容易上手传送门https://cn.vuejs.org/v2/guide/compa
一纸荒凉 * Armani·2020-06-29 11:51

angular生命周期

Angular学习笔记：生命周期钩子：angularJS声明周期钩子示意图.png共享模块共享模块作用：有些模块可能需要在多个模块中使用，在每个组件中定义会是的程序重复代码过多，不利于维护，出现这样的情况
crazy_xl·2020-06-29 07:12

Angular学习(一)：模板与数据绑定

HTML是Angular模板的语言。这一节学习如何通过数据绑定来动态设置DOM（文档对象模型）的值。一、绑定语法绑定的类型可以根据数据流的方向分成三类：从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。数据方向语法绑定类型单向(从视图到数据源){{}}、[target]="expression"、bind-target="expression"插值、（属性、样式、CSS类、Attri
weixin_33757609·2020-06-28 04:42

angular学习文档之一个小白的心路历程(一)

angular的安装首先，玩angular必须先装上Node.js（别告诉我你不知道这是啥@_@,需要8.x或者10.x版本），Angular、AngularCLI和Angular应用都依赖某些库提供的功能和特性。它们都是npm包。装Node.js的时候就已经默认安装npm客户端了。好，让我们来装AngularCLI,打开控制台输入下面的命令：这样就可以使用angular命令咯，创建自己的工作空间
陌上寒の·2020-06-27 14:03

angular学习文档之一个小白的心路历程(二)

angular组件的使用输入Angular命令创建一个组件（直接引用官方文档中的例子啦！）CLI创建一个新的文件夹src/app/heroes/,并生成了HerosComponent的三个文件。其中heroes.component.ts文件为HeroesComponet的类文件。在AngularCLI创建组件类时，同时也为组件类加上了@Component装饰器，用来给组件指定所需的元数据。CLI自
陌上寒の·2020-06-27 14:03

angular 响应式表单FormGroup和模型驱动表单[(ngModel)] —angular学习笔记4

文章目录响应式表单和模型驱动表单相同与不同之处响应式表单创建案例模板驱动表单创建案例表单底层原理（底层构造块）：响应式表单fromGroup与FormBuilder对比1.1.再在xx.ts部分用FormGroup定义表单：1.1或者再在xx.ts部分用FormBuilder定义表单：2.保存/更新/监听表单数据表单的验证方法内置Validators验证自定义验证函数a.在响应式表单中自定义验证器
大雨倾城·2020-06-25 15:46

angular学习笔记

angular程序架构一、搭建Angular开发环境安装nodejs,AngularCli,WebStorm先安装nodejs,安装完成后用命令来安装AngularClinpminstall-g@angular/cli使用AngularCli创建并运行Angular项目用ngnew命令来创建一个项目，比如项目名为demo,则输入命令ngnewdemo分析Angular目录结构及AngularCli
lzb30·2020-06-24 07:28

Angular学习记录8：路由

之前用过dva、umi等前端框架/库，对路由有一定的了解，所以学起来还好。1基础页面就是路由。TherearethreemaincomponentsthatweusetoconfigureroutinginAngular:RoutesdescribestheroutesourapplicationsupportsRouterOutletisa“placeholder”componentthatsh
lishichengyan·2020-06-24 06:05

angular学习（三）—— Controller

转载请写明来源地址：http://blog.csdn.net/lastsweetop/article/details/51190079Controller介绍在angular中，controller由javascript的构造函数定义，主要用于增强angular的scope。当controller通过ng-controllerdirective与DOM关联，angular将用指定的controll
吴冬冬·2020-06-24 02:55

angular学习（一）—— 概览

转载请写明来源地址：http://blog.csdn.net/lastsweetop/article/details/51162008文章简述这篇主要通过几个小例子把angular的常用组件简单介绍一下databinding下面是一个简单通过quantity和costs计算Total的示例Invoice:Quantity:Costs:Total:{{qty*cost|currency}}输出结果下
吴冬冬·2020-06-24 02:55

angular学习8-打包和部署

预编译(AOT)ngbuild--prod可以看到生成了一个dist文件夹，里面是打包后的静态资源文件。搭建本地简单服务器用来预览打包后的静态文件npminstallexpressconstexpress=require('express')constapp=express()//访问静态资源文件//中间件app.use(express.static('dist/my-angular-app'))
梁祖迅·2020-06-23 10:40

angular学习（1）

angular和vue的区别angular必须使用ts来完成，vue可以自主选择angular项目的大小比vue项目要来的大vue相对来说更灵活，angular的代码规范更加严格angular的上手难度比较高，对于新手不太友好angular的指令和方法都是绑定在$scope上的，而vue是new出来一个实例，所有方法和指令都绑在实例上，一个页面可以有多个vue实例，但是angular的对象只能有一
fcl_0514·2020-06-23 07:32

Angular学习问题笔记 (2020.6.17)

ContentChild装饰器参考：https://angular.cn/api/core/ContentChild配置内容查询的参数装饰器用于从内容DOM中获取与选择器匹配的第一个元素或指令。如果内容DOM发生了改变，并且有一个新的子元素与选择器匹配，那么属性将被更新。在调用ngAfterContentInit回调之前设置内容查询不检索其他组件模板中的元素或指令，因为组件的模板始终是其祖先的黑盒
栗子君*·2020-06-17 15:00

6、angular学习第五天（路由守卫）

1、路由守卫路由守卫的意义是为了在进入路由或者离开路由的时候，允许判断当前用户是否有权限或者有未完成的操作。用于控制路由的整个调用过程。类似于app开发中的导航前的判断。路由守卫的两种方式：提供两个路由守卫的接口canActivate->是否能够调用当前路由canDeactivate->是否可以离开当前路由路由守卫的使用：在app-routing.module.ts中配置路由守卫{path:'pr
LH_0811·2020-04-13 15:57

Angular学习笔记（二）对比AngularJs

这里只是把我的学习过程写出来，如果有写的不对的地方希望各位指出来，或者给我留言来纠正错误，相互学习，相互提高。QQ:260951742一、AngualrJs的优点模板功能强大比较完善的前端MVC框架引入了Java的一些概念二、AngularJs的问题性能（AngularJs为双向数据绑定，在Angular中默认为单向数据绑定）路由（AngularJs中路由有很多问题，Angular中路由模块为主要
Amundsen·2020-04-11 20:29

Angular学习（一）：快速开始

本系列文章默认都是基于Angular4.X，以后不再说明，除非特别标注Angular安装nodejs安装过程就不再啰嗦，傻瓜式安装。补充几点，安装好nodejs后，由于国内网络原因我们安装淘宝NPM镜像cnpmnpminstall-gcnpm--registry=https://registry.npm.taobao.org使用方法与npm一致，如果需要可以自己设置npm全局模块的存放路径以及ca
小程杂货铺·2020-04-10 01:02

【Angular学习笔记】英雄编辑器

Angular英雄编辑器学习文档：https://angular.cn/tutorial/toh-pt1@Component是个装饰器函数，用于为该组件指定Angular所需的元数据。ngOnInit()是一个生命周期钩子，Angular在创建完组件后很快就会调用ngOnInit()，这里是放置初始化逻辑的好地方。管道是格式化字符串、金额、日期和其他显示数据的好办法。Angular发布了一些内置管
栗子君*·2020-04-06 22:00

【Angular学习笔记】Angular基本原理 HttpClient

Angular入门开发指南，学习重点知识笔记。Angular基本原理HttpClient参考文档：https://angular.cn/guide/http为什么要写服务？在实战中，数据访问很少能一直这么简单。你通常要对数据做后处理、添加错误处理器，还可能加一些重试逻辑，以便应对网络抽风的情况。该组件很快就会因为这些数据方式的细节而变得杂乱不堪。组件变得难以理解、难以测试，并且这些数据访问逻辑无法
栗子君*·2020-04-06 20:00

Angular学习第七天

单纯的引用一段公共的html动态的更换要引用的html模板//控制器代码$scope.changeTpl=function(){$scope.headerUrl=$scope.headerUrl=="views/header.html"?"views/header2.html":"views/header.html";}$scope.headerUrl="views/header.html";//
我是灰灰的小跟班·2020-04-06 13:53

Angular学习第九天

$http服务是什么？$http就是JQuery中的$.ajax如何用？请求一个已存在的json文件news.json{"status":"1","message":"成功","data":[{"id":"556","title":"left_top秘密任务","image":"/resources/news/1479110226.png","content":"","url":"/challen
我是灰灰的小跟班·2020-04-05 12:51

Angular学习-$location

location是什么？location是一个关于当前网页地址的对象，从属于window之下，当然，window之下的对象在不引起歧义或者混淆的情况下，一般是可以省去window的。location本身是一个js对象，包含一些属性和方法。具体可以参考w3school。angularlocationangular中的location是一个service，写作$location。getter和sett
15235736666·2020-04-03 10:02

Angular学习笔记(13)—事件

在Web应用的组件是松耦合的情况下，比如需要用户验证然后处理授权，即时的通信不总是可行的，因为组件没有耦合在一起。例如，如果后端对一个请求返回了状态码401（表明一个未经授权的请求），我们期望Web应用不允许用户停留在当前视图，在这种情况下，我们希望应用把用户重定向到登录或者注册页面去。基于这个逻辑，我们不能从外部告诉控制器设置一个新地址。我们也希望这个功能能覆盖多个作用域，这样可以用相同的行为来
oWSQo·2020-04-02 09:12

angular学习笔记 - 知识点

介绍angularJs是第一版，angular是第二版以后的统称。angular不兼容angularJs。HttpClient（基于RxJS响应式编程）相比于其他框架，更适用于复杂应用。性能高，体积小。初始化官方文档，快速上手npminstall-g@angular/cli安装脚手架ngnewmy-app创建项目cdmy-app切换到项目ngserve--open启动项目文件目录结构tslint配
MickeyMcneil·2020-03-28 07:51

Angular学习第三天：用户地址管理

今天我们来做一下电商网站常见的地址管理实现功能显示地址列表设置默认地址删除某地址当用户没有地址时，显示没有地址首先我们来看下实际运行效果2180072-7ca0f33ba7d052e5.png页面相关样式*{padding:0px;margin:0px;font-family:Arial,'MicrosoftYaHei',Helvetica,'HiraginoSansGB';}html{font-
我是灰灰的小跟班·2020-03-25 19:30

angular学习（指令）

指令：是给原生的html标签添加一些新的属性，使得html标签可以实现某些功能解决闪烁：用ng-clock这个插值语法解决ng-module就要向到表单元素过滤器：对数据进行格式化，本质：就是一个方法或者函数管道符，|第一个input必须传入指令：内置指令/和自定义指令指定名称（app.directive{return{restrict:'EA'//记住template要爆过一个跟标签，否则标签并
舟渔行舟·2020-03-22 04:17

Angular学习（二）：项目结构

在上一节中已经新建了一个angular项目，来看一下这个项目里面包含了哪些文件。首先可以看到最外层有三个文件夹，e2e、node_modules、src，我们主要关心的src，所有的源码都是放在这里的，src目录文件如下：图1app目录里面放的是组件assets目录用来存放项目可能需要的图片等资源文件environments目录主要是环境配置(如生成还是测试环境)main.ts主要的入口文件ind
小程杂货铺·2020-03-21 16:15
上一页 1 2 3 4 5 6 7 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他