假如我们有一个shareModule来存放公用的组件(Component)、指令(Directive)、管道(Pipe)、服务（Service），为避免各个子模块引用shareModule时造成App中有多个一样的单一实例服务的问题。我们可以在shareModule中建立同意的App层级的服务。 ShareModule import { NgModule, ModuleWithProviders } from @angular/core; @NgModule({imports: [HttpModule,JsonpModule,...],declarations: [ShowItDirective,...],exports: [ShowItDir...
依赖注入创建服务需要用到Injectable，@Injectable() 装饰器把类标记为可供注入的服务，不过在使用该服务的 provider 配置好 Angular 的依赖注入器之前，Angular 实际上无法将其注入到任何位置。 provider告诉注入器如何创建该服务，可以通过设置元数据来配置注入器（3种方式）： 在服务本身的 @Injectable() 装饰器中。在 NgModule 的 @NgModule() 装饰器中。在组件的 @Component() 装饰器中。@Injectable() 装饰器具有一个名叫 p...
三大前端项目就剩angular没学了，在网上找了几个教程，这里总结一下，方便以后用到时查阅 创建项目首先安装cli工具 npm install -g @angular/cli创建一个空项目, 有两处要选择的，一个是路由，我这里是要路由的，还有一个开发css的语言，我这里选择scss，就不截图了，选完后会自动通过yarn安装依赖，稍等一会就好了 ng new pybbs-front-angular创建好了，运行 npm run start 或者 ng serve 启动服务，然后就可以在浏览器里打开 htt...
今天在使用ngx-translate做多语言的时候遇到了一个问题，需要在登录页面点击按钮，然后调用父组件中的一个方法。 一开始想到了@input和@output，然而由于并不是单纯的父子组件关系，而是包含路由的父子组件关系，所以并不能使用@input方法和@output方法。然后去搜索一下，发现stackoverflow上有答案，用的是service来进行传参，发现很好用，所以和大家分享一下。 首先，创建一个service. shared-service.tsimport { Injectable } f...
angular官方文档单例服务的说明单例模式就不要说了，懂点设计模式的都懂得，真有不明白的自行百度。（解释下angular的命名，angular就是angular2+，angular1叫angularjs，至于angular2，3，4，5，6只是angular的版本，通称angular，希望小伙伴不要叫错了）单例模式如何在angular的服务中使用呢，angular的官方文档中有这么一段话： 单例服务服务在每个注入器的范围内是单例的。 在任何一个注入器中，最多只会有同一个服务的一个实例...
如下所示： <div ng-app="module"><div ng-controller="ctrl1"><table border="1" width="600"><tr><td>网站名称</td><td>网址</td></tr><tr ng-repeat="v in data.webs"><td>{{v.name}}</td><td>{{v.url}}</td></tr></table></div><hr><div ng-controller="ctrl2"><table border="1" width="600"><tr><td>网站名称</td><td>网址</td></tr><tr ng-repeat="v in data.webs"><td>{{v.name}}</td><td>{{v.url}}</td></tr></table><h1>...
本篇文章介绍2种自定义服务的方式，一种是用factory，一种是用service 一、首先介绍使用factory来进行自定义服务 1.html<div ng-app="module" ng-controller="ctrl"><table border="1" width="600"><tr><td>网站名称</td><td>网址</td></tr><tr ng-repeat="v in data"><td>{{v.name}}</td><td>{{v.url}}</td></tr></table> </div> <script>var m = angular.module(module, []);//factory定义服务videoServerm.factory(videoServer,...
如下所示： <div ng-app="module" ng-controller="ctrl">{{data}}<hr><div ng-bind-html="data"></div><hr><div ng-bind-html="title | trustHtml"></div> </div> <script>var m = angular.module(module, []);/*$sce服务写成过滤器*/m.filter(trustHtml,[$sce,function($sce){return function(data){return $sce.trustAsHtml(data);}}])m.controller(ctrl, [$scope, $sce, function ($scope, $sce) {/*第一种：不用过滤器的方式*/...
刚遇到Angular4项目npm run build 后部署到服务器可以访问,但是刷新页面会出现404的错误!在网上搜了一下看到有些人写的解决办法还有错误在里面,一眼看就知道的错误,感觉这些人真的有毛病,决定写了博客,为什么那么不仔细,写错误的上去,祸害别人吗!! 解决angular2页面刷新后报404错误办法： 配置app.module.ts import {HashLocationStrategy , LocationStrategy} from @angular/common;@NgModule({declarations: [AppCmp],bootstrap:...
AngularJS作为一个非常实用的前端框架，我们知道在AngularJS中有自己的Model和Controler。 angularJS中所有的请求都是通过js定义的Controler来完成的，也就是我们完全脱离了后台， 将整个应用程序的压力交给了客户端来完成。但是在实际开发的时候我们难免需要访问后台或者 与数据库进行交互，这个时候我们就需要一个类似于JQAJAX的方法来进行数据访问。 在angularJS中提供了一种与远程Http服务器交互的服务，$http $http是angularJ...
如下所示： //$http函数的形参就是一个配置对象 $http({//method属性表示HTTP请求时的方式,它是一个字符串，值是POST、GET、JSONP、DELETE、PUT和HEAD其中之一method://url表示向服务器请求的地址，是一个相对或者绝对的字符串形式url://data属性是一个对象，该对象将作为消息体的一部分发送给服务端，常用于POST或PUT数据时使用；data://params属性是一个字符串对象，当发送HTTP请求时，如果是对象，将自动按json格式进行序列化，...
首先这里我简单写个例子来方便您的理解 var request = {post: function() {var errorCallback = {error: function(f) {this.fun = f;},fun: function(data) {}};successCallback = {success: function(f) {return this.fun = f, console.log(this.fun), errorCallback;},fun: function(data) {console.log(data)}};returnData = {wsscat: "hello"};//成功//var a = successCallback.fun(returnData);a = successCallback.fun;setTi...
第一步 准备好api接口地址， 例如 https://api.example.com/api/ 第二步 在根组件 app.components.ts 中引入 HttpClientModule 模块。 // app.components.ts import {HttpClientModule} from "@angular/common/http"; //引入HttpClientModule 模块 imports: [BrowserModule,AppRoutingModule,HttpClientModule //声明HTTP模块 ],第三步 在组件中使用HTTP模块向远程服务器请求数据 1.引入HTTP模块 // list.components.ts import { H...
在开发中,组件一般用来写视图有关的功能,服务则写一些其他的逻辑,诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作. 先解释两个概念: Providers(提供商):是个比较抽象的名词,我们把它想象为图纸更好理解一些,就比如我们想要生产汽车,就需要先有汽车的图纸,图纸上记录了生产工艺和材料尺寸之类,这样汽车才生产的出来.provider通常就是自己写的服务类.Injector(注入器):就是字面上的意思,将某一类事物注入到另一类事...
我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。 1、链式调用 $http服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象，具有success和error两个方法。 $http({ url:data.json, method:GET }).success(function(data,header,config,status){ //响应成功}).error(function(data,header,config,status)...