Angular
关注
分享
扫一扫
海蓝树
做个有思想的“猿”
展开
-
angularJs自定义服务
在AngularJS中，系统内置的服务都是以$开头，所以我们的自定义服务尽量避免以$开头。自定义服务的方式有如下几种：使用Module的provider方法 使用Module的factory方法 使用Module的service方法使用provider方法 app.provider('myProvider', function () { this.$get = funct...转载 2019-05-17 11:37:29 · 199 阅读 · 0 评论 -
如何在Nginx上发布Angular，以及解决路由问题
1、登录官网下载Nginx，直接解压即可。2、修改配置文件：{path}\conf\nginx.conf 在http{……}内，添加： server { listen 8888; server_name 127.0.0.1 localhost; location / { root X:/apps/path; index i...转载 2018-10-05 09:53:37 · 1096 阅读 · 0 评论 -
ng-content 中隐藏的内容
阅读 Angular 6/RxJS 最新教程，请访问前端修仙之路如果你尝试在 Angular 中编写可重复使用的组件，则可能会接触到内容投射的概念。然后你发现了 <ng-content>，并找到了一些关于它的文章，进而实现了所需的功能。接下来我们来通过一个简单的示例，一步步介绍 <ng-content> 所涉及的内容。Simple example在本文中我们...转载 2018-09-26 21:34:36 · 501 阅读 · 0 评论 -
angular4.0 路由守卫详解
在企业应用中权限、复杂页多路由数据处理、进入与离开路由数据处理这些是非常常见的需求。当希望用户离开一个正常编辑页时，要中断并提醒用户是否真的要离开时，如果在Angular中应该怎么做呢？其实Angular路由守卫属性可以帮我们做更多有意义的事，而且非常简单。Angular 的 Route 路由参数中除了熟悉的 path、component 外，还包括四种是否允许路由激活与离开的属性。...转载 2018-10-01 17:02:34 · 892 阅读 · 0 评论 -
在 Angular6 中使用 HTTP 请求服务端数据
第一步准备好api接口地址， 例如 https://api.example.com/api/第二步在根组件 app.module.ts 中引入 HttpClientModule 模块。// app.module.tsimport {HttpClientModule} from "@angular/common/http"; //引入HttpClientModule 模块i...转载 2018-10-01 13:30:07 · 1858 阅读 · 2 评论 -
Angular4-Http、Jsonp、rxjs请求
Http请求依赖注入import { HttpModule} from "@angular/http";页面引入Httpimport { Http} from "@angular/http";constructor(private http:Http) { }get请求 this.http.get(url).subscribe(function(data) ...转载 2018-10-01 10:22:50 · 466 阅读 · 0 评论 -
Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本.安装要安装Angular CLI你需要先安装node和npm，然后运行以下命令来安装最新的Angular CLI：注意：Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持。...转载 2018-09-25 08:26:14 · 224 阅读 · 0 评论 -
在 nginx 中部署 angular 应用
引用地址：https://blog.youkuaiyun.com/t894690230/article/details/78244861最近使用Angular做了第一个应用，但是网上的教程大多是教如何开发，部署相对较少，所以这里就简单记录一下如何在nginx中部署Angular应用。注：Angular应用可以编译成静态页面，然后部署在任何 web 服务器上，这里仅仅是选择nginx而已，同时编译后的文...转载 2018-09-24 14:49:59 · 1821 阅读 · 0 评论 -
Angular系列之变化检测(Change Detection)
概述简单来说变化检测就是Angular用来检测视图与模型之间绑定的值是否发生了改变，当检测到模型中绑定的值发生改变时，则同步到视图上，反之，当检测到视图上绑定的值发生改变时，则回调对应的绑定函数。什么情况下会引起变化检测？总结起来, 主要有如下几种情况可能也改变数据：用户输入操作，比如点击，提交等 请求服务端数据(XHR) 定时事件，比如setTimeout，setInte...转载 2018-09-16 16:11:39 · 5100 阅读 · 1 评论 -
原 angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
使用 NG ZORRO在上一篇文章中，我们已经安装了NG ZORRO，并在跟模块中引入了，在子模块中使用还需要再次引入。编辑layout模块中的header组件在layout.module.ts中引入NG ZORROimport { NgZorroAntdModule } from 'ng-zorro-antd'; imports: [ CommonModu...转载 2018-09-09 15:37:22 · 973 阅读 · 0 评论 -
Angular开发(十八)-路由的基本认识
一、学单词:angular路由中涉及到很多新单词词汇单词 说明 使用场景 Routes 配置路由，保存URL对应的组件，以及在哪个RouterOutlet中展现 RouterOutlet 在html中标记挂载路由的占位容器 Router 在ts文件中负责跳转路由操作 Router.navigate([“/xxx”]),Rout...转载 2018-09-28 10:54:59 · 217 阅读 · 0 评论 -
Angular2配置文件详解
初学接触Angular2的时候，通过ng new your-project-name 命令生成一个工程空壳，本文来介绍下每个文件的作用及含义。先来看看src的文件目录：文件详解File 文件 Purpose 用途 app/app.component.{ts,html,css,spec.ts} 使用HTML模板、CSS样式和单元测试定义AppC...转载 2018-10-14 16:13:51 · 531 阅读 · 0 评论 -
AngularJS $watch变量监视
在使用AngulaJS编写应用时，我们经常需要做的一件事情就是对模型中的变量进行监视，并对其发生的变化做出相应的回应。如：购物车小计。AngularJS为我们提供了一个非常方便的$watch方法，它可以帮助我们在每个scope中监视其中的变量。下面是一个非常简单的例子：Java代码$scope.name = 'zhangsan';$scope.count = 0;$sc...转载 2019-05-19 16:31:22 · 301 阅读 · 0 评论 -
Angular 2 Inject
Inject 装饰器的作用在 Angular 2 中，Inject 是参数装饰器，用来在类的构造函数中描述非 Type 类型的参数对象。Angular 2 中 Type 类型：// Type类型 - @angular/core/src/type.tsexport const Type = Function;export function isType(v: any): v is...转载 2019-03-17 11:26:06 · 720 阅读 · 0 评论 -
angular6 + ng-zorro鹿途后台管理系统（一）
用Angular6 + ng-zorro 完成一个完整的后台管理系统，鹿途后台管理系统，是我脱离工作自己的第一个作品，所以我可以任意妄为，随心所欲，我想做好它，坚持！系列文章不会从每行代码说起，只会对一些关键点进行分析说明，再配合源码就没有多大问题了。 版本说明 ng-zorro-antd 1.4.1+ angular 6+ node 10+开发工具Mac V...转载 2019-02-24 16:00:26 · 1373 阅读 · 1 评论 -
Angular5学习笔记 - 创建服务
一、创建服务ng generate service service-name #简写 ng g s component-nameng g s services/userService二、效果 三、开发服务修改\src\app\services\user-service.service.ts文件import { Injectable } from ‘@angular/...转载 2019-02-12 10:09:13 · 228 阅读 · 0 评论 -
Angular4.x 创建使用服务
一、Angualr CLI 创建服务二、创建服务命令ng g service my-new-service创建到指 定目录 下面ng g service services/storage三、app.module.ts 里面引入创建的服务1.app.module.ts 里面引入创建的服务import { StorageService } from './services/...转载 2019-02-12 10:05:56 · 180 阅读 · 0 评论 -
npm install出现"Unexpected end of JSON input while parsing near"错误解决方法
运行npm cache clean --force即可解决pm install出现”Unexpected end of JSON input while parsing near”错误。转载 2019-02-03 10:20:53 · 268 阅读 · 0 评论 -
angular2/4通过服务实现组件之间的通信EventEmitter
之前的文章讲过组件和组件之间的通信，使用@Output @Input,局限，如果组件嵌套层次比较深，那么就很麻烦了。之前文章地址：https://segmentfault.com/a/11...注意：现在的场景是这样的，界面是由N多个组件组成的，如果一个组件中修改了接口的内容，其他组件需要调接口刷新数据，那么就用到了EventEmitter1、创建服务，new一个EventEmitter...转载 2018-10-28 13:06:39 · 257 阅读 · 0 评论 -
angular2之打包
最近总有人问关于打包的= =有的越打越大= =……然后我只好重新测试打包截图了= =，发给大家，方便帮助需要打包的。项目都完整之后，接下来就是令人头疼的打包问题。第一步在项目根目录下运行ng build（为了方便大家对比，所以先运行此命令），如下：其次在运行ng build --prod --aot，截图如下：这里--prod参数后，angular-cli会把用不到的包都删掉，而-...转载 2018-10-09 13:36:55 · 948 阅读 · 0 评论 -
Angular配置文件之环境配置
假设有三个环境：开发环境（dev）、测试环境(test)、生产环境(prod)。当我们构建参数时会用到 --environment来指定应用执行环境。脚手架会根据指定的值加载对应的环境配置文件。如：ng build --env=dev 就是build开发环境的包。那么我们就从这里开始看看Angular项目里环境该怎么配置。首先要找到.angular-cli.json文件的environm...转载 2018-10-14 16:37:35 · 1921 阅读 · 0 评论 -
Angular2入门：TypeScript的类 - 定义、继承和作用域
一、定义和继承 二、public、private和protected转载 2018-09-09 09:35:49 · 786 阅读 · 0 评论 -
angular中的ng-class多条件判断的用法
转载： https://blog.youkuaiyun.com/m0_37885651/article/details/79819628<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title>转载 2018-08-25 15:21:20 · 3094 阅读 · 0 评论 -
Angular HTTP Client 快速入门
之前 激动人心的 Angular HttpClient 这篇文章已经介绍过 HttpClient ，今天看到 angular-university 博客中介绍 HttpClient 的文章，内容很详细，我就简单做了整理。有兴趣的话，建议直接阅读 HttpClientModule 应用导入新的 HTTP Moduleimport {HttpClientModule} from '@an...转载 2018-08-16 11:01:18 · 594 阅读 · 0 评论 -
angular4.0中路由传递参数、获取参数最nice的写法
转载地址：https://blog.youkuaiyun.com/sky_beyond/article/details/78282432研究ng4的官网，终于找到了我想要的方法。我想要的结果是用‘&’拼接参数传送，这样阅读上是最好的。否则很多‘/’的拼接，容易混淆参数和组件名称。一般我们页面跳转传递参数都是这样的格式：http://angular.io/api?uid=1&us...转载 2018-08-13 16:51:39 · 182 阅读 · 0 评论 -
在 nginx 中部署 angular 应用
转载地址：https://blog.youkuaiyun.com/t894690230/article/details/78244861最近使用Angular做了第一个应用，但是网上的教程大多是教如何开发，部署相对较少，所以这里就简单记录一下如何在nginx中部署Angular应用。注：Angular应用可以编译成静态页面，然后部署在任何 web 服务器上，这里仅仅是选择nginx而已，同时编译后的...转载 2018-08-11 10:41:30 · 381 阅读 · 0 评论 -
ANGULAR2 NGMODULE 模块详解
我们今天要学习的是Angular2的模块系统,一般情况下我们使用一个根模块去启动我们的应用,然后使用许多的功能模块去丰富我们的应用,扩展我们应用的功能.这些全部依靠我们的 NgModule 装饰器,接下来我们就来好好学习一下这个装饰器.当然在这个过程中你会遇到一些新的指令,概念等等;但是别慌,我们会在以后的文章中一个一个的详细讲解呢.在开始今天的练习之前,我们首先来熟悉一下 NgModule 的A...转载 2018-07-15 12:04:42 · 1367 阅读 · 0 评论 -
Angular2核心组件@Component
功能： 利用Angular的component创建一个class,并且在这个component中集中配置元数据（metadata）;如何使用？import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUr...转载 2018-07-15 10:37:47 · 856 阅读 · 0 评论 -
angular2之@Output() EventEmitter
Asrc/app/components/contains/contain1.tsimport { Component,Output ,EventEmitter} from '@angular/core';@Component({ selector: 'contain1', template: ` <div> <...转载 2018-07-24 16:09:16 · 1834 阅读 · 0 评论 -
VS Code 调试 Angular 和 TypeScript 的配置
一、安装插件在 Visual Studio Code 中打开扩展面板（快捷键 Ctrl+Shift+X），搜索安装 Debugger for chrome 插件）。二、配置启动参数在 Visual Studio Code 中快捷键 Ctrl+Shift+D 打开调试面板。点击右上角 “齿轮” 按钮，打开 launch.json 文件，添加如下配置：launch.json{ "version...转载 2018-07-10 14:21:40 · 585 阅读 · 0 评论 -
如何用VSCode直接调试Angular代码
就目前来说，从VS Code 1.14版本开始，就能够直接调试Angular代码。(1)首先就先对环境进行配置。将Chrome安装在默认位置，然后将Debugger for Chrome插件安装在VS Code将@angular/cli安装到全局空间npm install -g @angular/cli，当地用户需使用cnpm进行安装。使用@angular/cli新建一个项目ng new my-a...原创 2018-07-10 14:19:08 · 5576 阅读 · 1 评论 -
在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序
前言Visual Studio 2017已经发布了很久了。做为集成了Asp.Net Core 1.1的地表最强IDE工具，越来越受.NET系的开发人员追捧。随着Google Angular4的发布。我一直在想，怎么能够用这个地表最强IDE工具编写Angular4的Asp.Net Core项目。经过不懈的研究。终于的得到了一套很好的解决方案与大家分享。文章转载请著名出处：http://www.cnb...转载 2018-07-10 13:47:12 · 905 阅读 · 0 评论 -
Angular2+ ViewChild & ViewChildren解析
ViewChild ViewChild 是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在ngAfterViewInit钩子函数中，才能正确获取查询的元素。@ViewChild 通过模板变量名获取DOM元素import { Component, ElementRef, ViewChild, AfterViewIn...转载 2018-08-19 16:47:23 · 1822 阅读 · 0 评论 -
Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数
上一篇文章我们将Angular2的数据服务分离出来，学习了Angular2的依赖注入，这篇文章我们将要学习Angualr2的路由 为了编写样式方便，我们这篇文章开始引入第三方的css库materializecss,引入方法直接在index.html中普通引用就可以了 众所周知，Angular出现的目的就是解决web编程的一些限制，让我们编写的网页能像App一样运作，我们现在称之为单页...转载 2018-08-19 18:17:42 · 805 阅读 · 0 评论 -
ng-class的几种用法
方法1：ng-class="{true : 'setting-active',false : 'setting-quiet'}[setTypeBtn]"setting-active,setting-quiet 是css样式，setTypeBtn是判断条件 true或者false;方法2：1.当你的列表是ng-repeat出来的话，当点击某一个列的时候希望给他加上某个样式，&l...转载 2018-08-25 15:16:39 · 1075 阅读 · 0 评论 -
Angular 4.x NgClass 指令用法
引用地址 ：http://yunkus.com/angular-api-ngclass/用法语<some-element [ngClass]="'first second'">...</some-element> <some-element [ngClass]="['first', 'second']">...</some-elemen...转载 2018-08-25 15:03:54 · 2702 阅读 · 0 评论 -
Angular之特性模块 ( Feature Module )
项目结构一 创建特性模块，及其包含的组件、服务。ng g module artng g component art/musicng g component art/danceng g service art/performance 二 特性模块art.module.tsimport { NgModule } from '@angular/core';im...转载 2018-08-25 09:56:06 · 819 阅读 · 0 评论 -
Angular4.0 探索子路由和懒加载 loadChildren
参考文章：Angular4路由快速入门 http://www.jianshu.com/p/e72c79c6968eAngular2文档学习的知识点摘要——Angular模块（NgModule）http://lib.youkuaiyun.com/article/angularjs/59697?knId=641 随着需求的增加，项目的功能也渐渐复杂起来。这个时候，需要将项目模块化，将组件、指令和...转载 2018-08-21 15:43:00 · 15401 阅读 · 1 评论 -
初入angular4——实际项目搭建总结
前言接到一个pc端后台项目，还会加入两个安卓同事一起学习和做这个项目，需要带一下他们。 既ng1之后，我就没怎么有过其它后台框架的实际项目经验了，期间用的移动端框架也并非vue、angular系列、react，包括es6、webpack等也都并不熟悉。 公司一个其它后台项目使用了vue，偶尔我会维护一下但是总体来说对体系不熟悉。 一直比较喜欢angular，应该是有过ng1框架搭建的经验的原因...转载 2018-08-21 15:13:38 · 767 阅读 · 0 评论 -
angular共享模块的使用,含共享组件的使用
这里的共享模块的书写形式是看了大漠大神的nicefish后弄出来的，熟悉了angular2后再去看大神的项目感觉不一样了现在来说明一下怎么运用1. 先来看页面框架2.确定有两个懒加载路由，为两个父级目录加上导航条app.module.ts 路由加载 const routes: Routes = [ {path: ”, redirectTo: ‘setting’, pathM...转载 2018-08-24 10:00:27 · 6368 阅读 · 0 评论