Artical --> BYPASSING PROVIDERS IN ANGULAR 2 Here trying to solve one problem: On the left hand side of tree, there are 4 green blocks and 1 blue block. Meaning that three green dataService will use 'OtherProvider' which in an instance of DataService…

Dependecies aren’t always objects created by classes or factory functions. Sometimes, all we really want is inject a simple value, which can be a primitive, or maybe just a configuration object. For these cases, we can use value providers and in this…

We can treat Angular Element as each standlone lib and compile each Angular element spreatly. Tool we are using to compile Angular element is 'ngx-build-plus': Install: npm i --save ngx-build-plus It modifies the angular.json to use ngx-build-plus to…

一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配置呢? 问题二:绑定的数据是如何被解析的呢?我们通过对$parse的分析,应该猜到绑定到模版的表达式最终会被传给$parse服务来处理,那么是谁将表达式从html字符串中给读取出来的呢? 二.$interpolate的功能 $interpolate是一个angular的内部服务,专门给$compil…

一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/">王大鹏</a>'绑定到angular的视图上,希望视图上显示的一个链接. 1.如果,我采用ng-bind="x",或者{{x}},我在视图看到的结果就是上面那个字符串,就说里面的都被转义了. 2.如果,我在用ng-bind-html,视图上什么都没有,并且会抛出一…

1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).success().error(); $http.jsonp(url,{params:{wd:'',cb:'JSON_CALLBACK'}}).success().error(); 注意jsonp中cb在angular中规定只能使用JSON_CALLBACK $watch(谁,做什么,false): 谁…

在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的angular的编辑顺序图的缩略版: ├─── angular.prefix //util.wrap函数加入的前缀代码 │ ├─── minErr.js //错误处理 ├─── Angular.js //主要定义angular的工具函数 ├─── loader.js //定义了setupModuleLo…

一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 return element; } var argIsString; if (isString(element)) { //情况2 element = trim(element); //先去掉两头的空格.制表等字符 argIsString = true; } if (!(this instanceof…

一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看来,阅读编译后的源码至少有两点不好. 1.编译已经将所有的代码合并在一起了,这会丢失掉作者模块设计的思想,不利于理解代码架构的精髓,甚至想理解代码都很难. 2.编译合并后的angular代码有2万多行,想要看完,早已望而生畏.相反阅读编译前的代码,可以一个模块一个模块的逐个击破. 但是编译前的源码中的确文件一…

angular的工具函数 在angular的API文档中,在最前面就是讲的就是angular的工具函数,下面列出来 angular.bind //用户将函数和对象绑定在一起,返回一个新的函数 angular.bootstrap //angular启动函数,一般不用,除了e2e测试 angular.copy //对象拷贝 angular.element //jQlite,作用类似于jQuery angular.equals //对象比较.用 == 对两个对象进行比较,除非他们是同一个对象的引用,否…

一.准备 angular的源码一份,我这里使用的是v1.4.7.源码的获取,请参考我另一篇博文:angular源码分析:angular源代码的获取与编译环境安装 二.什么是依赖注入 据我所知,依赖注入的概念最早使用时在java编程中.依赖注入和控制反转差不多是一个概念,是编程中一种重要的解耦手段.依赖注入不是目的,它是一系列工具和手段,最终的目的是帮助我们开发出松散耦合.可维护.可测试的代码和程序.这条原则的做法是大家熟知的面向接口,或者说是面向抽象编程.具体含义是:当某个角色(可能是一个对象实…

一.安装git客户端 1.windows环境推荐使用TortoiseGit. 官网地址:http://tortoisegit.org 下载地址:http://tortoisegit.org/download/ 安装过程:略 2.采用deb包的系统,如ubuntu sudo apt-get install git 3.采用yum的系统,如centos sudo yum install git 4.源码编译安装: wget https://github.com/git/git/archive/mas…

百度了好久 ,,,最后谷歌出来了.. 该错误可能来自于您将@ angular / material设置为6.0.0, 但所有其他Angular包都是5.x.您应该始终确保Material主要版本与Angular的主要版本匹配. 把package.json file里 "dependencies": { "@angular/core": "^5.2.0", "@angular/cdk": "^6.0.1",…

In our dynamic forms lessons we obviously didn’t account for all the various edge cases you might come across. Therefore if you need a more complex setup you might want to take a look at ngx-formly. Formly has been a very popular library even in Angu…

In this example, we are going to see how to use Pipe as providers inject into component. We have the pipe: import {Pipe, PipeTransform} from '@angular/core'; @Pipe({ name: 'filesize' }) export class FileSizePipe implements PipeTransform{ transform(va…

For example we have a component: class TodoList { private todos: Todo[] = []; add(todo: Todo) {} remove(todo: Todo) {} set(todo: Todo, index: number) {} get(index: number) {} getAll() {} } @Component({ // ... viewProviders: [TodoList] // ... }) class…

Being able to intercept HTTP requests is crucial in a real world application. Whether it is for error handling and logging or for injecting authentication tokens. While in Angular version 2 it intercepting HTTP requests was totally possible, implemen…

1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省很多时间,而且编写代码更加高效.工欲善其事,必先利其器. 支持AngularJS较好的编辑器有以下: Visual Studio Code code.visualstudio.com 特点:免费,支持Windows/Mac/Linux三大平台 Sublime Text3 https://www.su…

在angular中,$scope是一个关键的服务,可以被注入到controller中,注入其他服务却只能是$rootscope.scope是一个概念,是一个类,而$rootscope和被注入到controller中的一个具体的$scope都是一个个具体的对象.$rootscope之所以被称为"root"的原因就是他是所有scope的祖先,$rootscope是在angular启动流程中建立的(上上期讲过),而被注入到controller中的$scope则是在视图创建的时候通过父辈的$s…

Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s createEmbeddedView for more visual control of how you want to generate elements inside of your Angular 2 templates. import…

After the original order is set, you can still leverage methods on the Angular 2 ViewContainer to reorder the components. This is especially helpful when you want an event to trigger layout changes from your generated components. import { Component,…

You can place content inside of the instance of your component element then manage it inside of the component’s template using ng-content. This process is called reprojection, but you may be more familiar with the term “transclusion”. Home: <div>I a…

为什么我会准备写这个原创教程系列? 写下这个标题之后,看着屏幕上空白的内容区,不知从何下手,想说的似乎有很多,似乎又没啥说的.有时候就会陷入这种矛盾中,有时候就是这样,于是,我下定决心这一次一定要把这个系列完成. 博客园开了博客也有段时间了,中间有把其他地方写的博客搬家过来的,也有转自大神的,也写过一些文字.然而一直以来都没有一个完整的系统,虽然我心里一直想系统整理下,在这种情况下,我看到了一篇文章<你为什么不分享>.于是乎我本着一颗博爱的心来写下下面的每一个文字. 如果接下来的文字对你有些许…

今天突然接到电话, 问我他们的区别  虽然平时看了,但是没记住,凉凉是肯定的 总结一下: bootstrap不算是javascript框架,它只是一个前端的ui框架,然后有一些附带的js插件而已.angularjs是一个javascript的mvvm的框架,是为了开发有复杂业务逻辑的CRUD应用而生的 AngularJS是js框架,它定义了如何组织代码,引入了很多概念,如 service, scope, filter, directive等,它实现了双向绑定,只需要更改scope中的数据,视图会…

本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular TypeScript & Html Snippets Visual Studio Code TypeScript and Html snippets and code examples for Angular 2,4,5 & 6. All code snippets are based on and…

如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DOCTYPE html> <html> <head> <title>2.1模块</title> <meta charset="utf-8"> <script src="../angular.js"&g…

一句话: 现在不学Angular的结局,就和5年前不学JQuery一样! 谁学谁知道,早学早进阶! 1. JQuery vs Javascipt 问两个问题: 1) 你用过JQuery吗?当然! 2) 感觉JQuery相对于原生纯Javascript优势在哪里? 我的答案:JQuery更直接方便,兼容性好,代码少,好理解,快速开发,Bug少…… 2. Angular vs JQuery 参照JQuery vs Javascript 3. Angular的前途怎么样 假如今天是2008年,有人问J…

开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 如何安装node.js和npm npm使用介绍 1.安装angular-cli Angular提供了一个命令行工具angular-cli,它能让用户通过命令行创建和管理项目. 安装命令: npm install -g angular-cli@1.0.0-beta.28.3 安装后可输入指令ng version查看版本. 2.创建项目 ng new newApp /…

Angular Chart是基于Chart.js的angular组件,引入项目后直接操作数据即可. 引用方法:    分别将Chart.js.angular-chart.js.angular-chart.css等文件引入工程(angular工程)中(注意引入顺序). 在app.js中引入‘chart.js’. 创建你的demo的js和html并用路由绑定.   代码: 在demo.js中写入以下代码: //Line Chart $scope.labels = ["January", &…

Allow more than one child component of the same type. Allow child components to be placed within the views of other custom components. In previous post, we have seen how to use @ContentChild to asscomplish compound component implementation. It has so…