搜索到
8
篇与
的结果
-
Angular2使用中的一下注意事项与问题 Angular2使用中的一下注意事项与问题 在angular2项目中 compass的使用 在头部引入 @import "~compass-mixins/lib/compass/css3"; 而不是 @import "compass/css3"; ng2-file-upload预览的实现 第一种使用 platform-brower import {DomSanitizer, SafeUrl} from "@angular/platform-browser"; 这种方式有极限，浏览器支持比较少 第二种使用 编写一个指令 import { Directive, ElementRef, Input, OnChanges, Renderer } from '@angular/core'; @Directive({ selector: 'img[imgPreview]' }) export class ImagePreviewDirective implements OnChanges { @Input() image: any; constructor(private el: ElementRef, private renderer: Renderer) {} ngOnChanges(changes: SimpleChanges) { const reader = new FileReader(); const el = this.el; reader.onloadend = function (e) { el.nativeElement.src = reader.result; }; if (this.image) { return reader.readAsDataURL(this.image); } } } Angular2 使用websocket sockjs和stomp碰到 Cannot resolve module 'net' https://github.com/jmesnil/stomp-websocket/issues/119 我的处理方式安装net模块 stomp必须依赖于sockjs运行，否则程序无法运行 centos下ng-client无法npm install的问题angular2-image-popup@1.1.2 postinstall /opt/soft/ngclient/node_modules/angular2- angular2-image-popup@1.1.2 postinstall /opt/soft/ngclient/node_modules/angular2-image-popup \> typings install /opt/soft/ngclient/node_modules/configstore/index.js:48 throw err; ^ Error: EACCES: permission denied, open '/root/.config/configstore/typings.json' You don't have access to this file. at Object.fs.openSync (fs.js:652:18) at Object.fs.readFileSync (fs.js:553:33) at Configstore.get all [as all] (/opt/soft/ngclient/node_modules/configstore/index.js:29:25) at new Configstore (/opt/soft/ngclient/node_modules/configstore/index.js:25:46) at Object.<anonymous> (/opt/soft/ngclient/node_modules/typings-core/dist/utils/store.js:5:19) at Module._compile (module.js:573:30) at Object.Module._extensions..js (module.js:584:10) at Module.load (module.js:507:32) at tryModuleLoad (module.js:470:12) at Function.Module._load (module.js:462:3) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) https://github.com/yeoman/yeoman.github.io/issues/282 解决的方法： 执行： chmod g+rwx /root /root/.config /root/.config/configstore ng-client在centos npm install无法安装 message EACCES: permission denied, open '/opt/yjmicro-saas-ngclient/node_modules/angular2-image-popup/typings/index.d.ts' typings ERR! typings ERR! cwd /opt/yjmicro-saas-ngclient/node_modules/angular2-image-popup typings ERR! system Linux 3.10.0-123.el7.x86_64 typings ERR! command "/usr/local/src/node/bin/node" "/opt/yjmicro-saas-ngclient/node_modules/.bin/typings" "install" typings ERR! node -v v8.9.1 typings ERR! typings -v 2.1.1 typings ERR! code EACCES typings ERR! typings ERR! If you need help, you may report this error at: typings ERR! <https://github.com/typings/typings/issues> npm WARN bootstrap@4.0.0-beta requires a peer of popper.js@^1.11.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: angular2-image-popup@1.1.2 (node_modules/angular2-image-popup): npm WARN optional SKIPPING OPTIONAL DEPENDENCY: angular2-image-popup@1.1.2 postinstall: `typings install` npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1 解决： npm config set unsafe-perm=true 参考 ：https://github.com/Microsoft/WSL/issues/14 -
部署angular2-start碰到的问题 部署angular2-Strat碰到的问题 基本都是墙的问题：下载不了- node-sass无法下载 通过node -p "[process.platform, process.arch, process.versions.modules].join('-')"查看系统对应的版本 https://github.com/sass/node-sass/releases 在官方下载对应的版本 selenium-server-standalone-2.53.1 下载问题 https://github.com/mozilla/geckodriver/releases/download/v0.11.1/geckodriver-v0.11.1-win64.zip 下载问题存放到提示错误的目录内 https://github-cloud.s3.amazonaws.com/releases/25354393/63b38414-8ee8-11e6-86d9-7cd52823928c.zip?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAISTNZFOVBIJMK3TQ%2F20170210%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20170210T081906Z&X-Amz-Expires=300&X-Amz-Signature=2285da35b200def61e6ee64102902a84c72fbb57a00f989b74ee3b69ce322a58&X-Amz-SignedHeaders=host&actor_id=5735392&response-content-disposition=attachment%3B%20filename%3Dgeckodriver-v0.11.1-win64.zip&response-content-type=application%2Foctet-stream 下载完重命名为对应的版本号如： chromedriver_2.26win32.zip 并解压和重命名解压文件chromedriver_2.26.exe
-
AngularJS中的Provider们：Service和Factory等的区别 AngularJS中的Provider们：Service和Factory等的区别 引言 看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory()、service()、provider())到底有啥区别，啥时候该用啥，之前一直傻傻分不清楚，现在来总结一下。 下文中的术语说明： 供应商 ==> 泛指provider 服务 ==> 泛指service provider ==> provider()方法创建的东东 service ==> service()方法创建的东东 先说说供应商（$provide） $provide服务负责告诉Angular如何创造一个新的可注入的东西：即服务。服务会被叫做供应商的东西来定义，你可以使用$provide来创建一个供应商。你需要使用$provide中的provider()方法来定义一个供应商，同时你也可以通过要求$provide被注入到一个应用的config函数中来获得$provide服务。 简单来说： $provide是一个服务，在Auto模块中 这个服务下面有好多方法，是用来定义供应商 而供应商是用来提供服务的，被注入来注入去的东西就是供应商们提供的服务 例子： myMod.config(function($provide) { $provide.provider('greeting', function() { this.$get = function() { return function(name) { alert("Hello, " + name); }; }; }); }); 定义供应商的方法们 AngularJS用$provide去定义一个供应商，这个$provide有5个用来创建供应商的方法： constant value service factory provider decorator (这个有点特殊) Constant 定义常量用的，这货定义的值当然就不能被改变，它可以被注入到任何地方，但是不能被装饰器(decorator)装饰。 var app = angular.module('app', []); app.config(function ($provide) { $provide.constant('movieTitle', 'The Matrix'); }); app.controller('ctrl', function (movieTitle) { expect(movieTitle).toEqual('The Matrix'); }); 语法糖： app.constant('movieTitle', 'The Matrix'); Value 这货可以是string、number甚至function，它和constant的不同之处在于，它可以被修改，不能被注入到config中，但是它可以被decorator装饰。 var app = angular.module('app', []); app.config(function ($provide) { $provide.value('movieTitle', 'The Matrix') }); app.controller('ctrl', function (movieTitle) { expect(movieTitle).toEqual('The Matrix'); }) 语法糖： app.value('movieTitle', 'The Matrix'); Service 它是一个可注入的构造器，在AngularJS中它是单例的，用它在Controller中通信或者共享数据都很合适。 var app = angular.module('app' ,[]); app.config(function ($provide) { $provide.service('movie', function () { this.title = 'The Matrix'; }); }); app.controller('ctrl', function (movie) { expect(movie.title).toEqual('The Matrix'); }); 语法糖： app.service('movie', function () { this.title = 'The Matrix'; }); 在service里面可以不用返回东西，因为AngularJS会调用new关键字来创建对象。但是返回一个自定义对象好像也不会出错。 Factory 它是一个可注入的function，它和service的区别就是：factory是普通function，而service是一个构造器(constructor)，这样Angular在调用service时会用new关键字，而调用factory时只是调用普通的function，所以factory可以返回任何东西，而service可以不返回(可查阅new关键字的作用)。 var app = angular.module('app', []); app.config(function ($provide) { $provide.factory('movie', function () { return { title: 'The Matrix' } }); }); app.controller('ctrl', function (movie) { expect(movie.title).toEqual('The Matrix'); }); 语法糖： app.factory('movie', function () { return { title: 'The Matrix' } }); factory可以返回任何东西，它实际上是一个只有$get方法的provider。 示例： angular.module('myApp.services') .factory('User', function($http) { // injectables go here var backendUrl = "http://localhost:3000"; var service = { // our factory definition user: {}, setName: function(newName) { service.user['name'] = newName; }, setEmail: function(newEmail) { service.user['email'] = newEmail; }, save: function() { return $http.post(backendUrl + '/users', { user: service.user }); } }; return service; }); Provider provider是他们的老大，上面的几乎(除了constant)都是provider的封装，provider必须有一个$get方法，当然也可以说provider是一个可配置的factory。 var app = angular.module('app', []); app.provider('movie', function () { var version; return { setVersion: function (value) { version = value; }, $get: function () { return { title: 'The Matrix' + ' ' + version } } } }); app.config(function (movieProvider) { movieProvider.setVersion('Reloaded'); }); app.controller('ctrl', function (movie) { expect(movie.title).toEqual('The Matrix Reloaded'); }); 注意这里config方法注入的是movieProvider，上面定义了一个供应商叫movie，但是注入到config中不能直接写movie，因为前文讲了注入的那个东西就是服务，是供应商提供出来的，而config中又只能注入供应商（两个例外是$provide和$injector），所以用驼峰命名法写成movieProvider，Angular就会帮你注入它的供应商。 Decorator 这个比较特殊，它不是provider，它是用来装饰其他provider的，而前面也说过，他不能装饰Constant，因为实际上Constant不是通过provider()方法创建的。 var app = angular.module('app', []); app.value('movieTitle', 'The Matrix'); app.config(function ($provide) { $provide.decorator('movieTitle', function ($delegate) { return $delegate + ' - starring Keanu Reeves'; }); }); app.controller('myController', function (movieTitle) { expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves'); }); 总结 所有的供应商都只被实例化一次，也就说他们都是单例的 除了constant，所有的供应商都可以被装饰器(decorator)装饰 value就是一个简单的可注入的值 service是一个可注入的构造器 factory是一个可注入的方法 decorator可以修改或封装其他的供应商，当然除了constant provider是一个可配置的factory 个人理解 scope等于什么，html将展现什么，这包括操作的一些交互状态，比如显示隐藏列表，如果scope（其中的判断值）等于false，列表隐藏，相反列表显示。 选择指南 当需要一个简单的可注入值，使用value 当需要在配置阶段访问的值，使用constant 当需要在多个控制器间共享数据和方法，使用service 当需要更灵活的功能，可以返回不同类型的值或函数，使用factory 当需要在配置阶段进行配置，使用provider 当需要修改或扩展现有服务的行为，使用decorator
-
AngularJS angular.identity 和 angular.noop AngularJS angular.identity 和 angular.noop angular.identity 函数返回本身的第一个参数。这个函数一般用于函数风格。 格式： angular.identity() 示例代码： (function () { angular.module("Demo", []) .controller("testCtrl", testCtrl); function testCtrl() { var getResult = function (fn, val) { return (fn || angular.identity)(val); }; var result = getResult(function (n) { return n * 2; }, 3); // result = 6 var null_result = getResult(null, 3);// null_result = 3 var undefined_result = getResult(undefined, 3);// undefined_result = 3 }; }()) angular.noop 一个不执行任何操作的空函数。这个函数一般用于函数风格。 格式： angular.noop(); 示例代码： (function () { angular.module("Demo", []) .controller("testCtrl", testCtrl); function testCtrl() { var _console = function (v) { return v * 2; }; var getResult = function (fn, val) { return (fn || angular.noop)(val); }; var firstResult = getResult(_console, 3);//6 var secondResult = getResult(null, 3);//undefined var thirdResult = getResult(undefined, 3);// undefined }; }()) 总结 这两个API的用途有点特殊。总的来说，这两个方法都是用来编写函数时使用的，根据上面示例代码及运行结果可以看出，它们的作用是用来防止函数传入的参数是null或undefined或其他不能操作的对象。 如果不使用这两个函数，当你在函数调用时传入null/undefined/或者其他不能执行的对象，控制台会直接报错。 angular.identity：当传入null/undefined时，返回传入的第二个参数值 angular.noop：当传入null/undefined时，返回undefined
-
Angular.js中指令compile与link原理剖析 AngularJS中的Compile与Link 在AngularJS中，当我们设置了link选项时，实际上是创建了一个postLink()链接函数，以便compile()函数可以定义这个链接函数。 编译(compile)和链接(link)的职责 编译(compile) 函数负责对模板DOM进行转换。 链接(link) 函数负责将作用域(Scope)和DOM进行链接。 Compile与Link的区别 Compile函数 对指令的模板进行转换。 Link函数 在模型(Model)和视图(View)之间建立关联，并包括在元素上注册事件监听。 作用域(Scope)在链接阶段才会被绑定到元素上，因此在compile阶段操作scope会报错。 对于同一个指令的多个实例，compile只会执行一次；而link对于指令的每个实例都会执行一次。 在一般情况下，我们只需要编写link函数即可。 如果你自定义了compile函数，那么自定义的link函数将会无效，因为compile函数应该返回一个link函数供后续处理。 示例代码 // require 'SomeController' link: function(scope, element, attrs, SomeController) { // 在这里操作DOM，可以访问required指定的控制器 }
