// Component: this.coursesTotal = this.course,length <div i18n>{coursesTotal, plural, =0 {No course in available.} =1 {One course is available.} other {A total of {{coursesTotal}} courses are available.} } </div>…

For example we have those code: <div class="course-category" [ngSwitch]="course.category"> <div class="category" *ngSwitchCase="'BEGINNER'">Beginner</div> <div class="category" *ngSwit…

To add translation to the application: <button (click)="onEditCourse()" i18n>Edit button</button> 'i18n' is for Angular CLI to extract all the string which need to be translated. Run: ng xi18n It will generate messages.xif, this file…

angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函数. factory(name,providerFunction); name:服务名称. providerFunction:创建服务的实例的函数. service(name,constructor); name:服务名称. constructor:一个将被实例化的构造函数. value(name,…

angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules:  Array 注入的模块(一个或多个). 使用代码: (function () { angular.module("firstModule", []) .service("firstService", function () { this._log = functi…

angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. --------------------------------------------------------------- angular.isDate 判断括号内的值是否是一个时间. 格式:angular.isDate(value); value:被判断是否为时间的值. -----------------------------------…

angular.uppercase 将指定的字符串转换成大写 格式:angular.uppercase(string); string:被转换成大写的字符串. 使用代码: var str = "ABCabc"; var upperCase = angular.uppercase(str);//ABCABC angular.lowercase 将指定的字符串转换成小写 格式:angular.lowercase(string); string:被转换成小写的字符串. 使用代码: var s…

angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(self,fn,args); self:object  对象: fn的上下文对象,在fn中可以用this调用 fn:function: 绑定的方法 args:传入fn的参数 使用代码: var obj = { name: "Any" }; var fn = function (Adj) { c…

angular.element 将DOM元素或者HTML字符串一包装成一个jQuery元素. 格式:angular.element(element); element:包装成jquery对象的html字符串或者dom元素 jqLite提供的方法: addClass() after() append() attr() bind() – 不支持命名空间,选择器和事件数据 children() – 不支持选择器 clone() contents() css() data() empty() eq()…

angular.equals 对比两个对象/值是否相等.支持值类型.正则表达式.数组和对象. 如果下列至少有一个是正确的,则将两个对象/值视为相等. 两个对象/值能通过===比较. 两个对象/值是同一类型/他们的属性一致并且通过angular.equals详细比较. 两者都是NaN. (在javascript中, NaN == NaN => false. 但是我们认为两个 NaN 是平等的) 两个值都代表相同的正则表达式 (在JavaScript里, /abc/ == /abc/ => fal…

angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. 格式:angular.identity() 使用代码: (function () { angular.module("Demo", []) .controller("testCtrl", testCtrl); function testCtrl() { var getResult = function (fn, val) { return (fn || angular.ident…

angular.forEach 调用迭代器函数取每一项目标的集合,它可以是一个对象或数组.迭代器函数与迭代器(value.key)一起调用,其中值是一个对象属性或数组元素的值,而数组元素是对象属性的关键或数组元素索引.为函数指定一个可选的上下文. 格式:angular.forEach(obj,iterator,[context]); obj:遍历的对象 iterator:迭代器 [content]: 对象为迭代器函数的上下文(this) 使用代码: var arr = [{ name: "A&q…

Make sure install the latest Angular v6 with Angular CLI. Checkout ght Github for the code. 1. Create a new application: ng new elementApp 2. Install @angular/elements package: ng add @angular/elements --project-name=<your_project_name> 3. Generate…

Each component has its own ChangeDetectorRef, and we can inject ChangeDetectorRef into constructor: export class ChildComponent implements OnInit { constructor( private cdr: ChangeDetectorRef ) For example if you have a huge list can be updated in re…

When we pass value to a component, normally we use @Input. <my-comp [courses]="(courses$ | async) as courses" ></my-comp> @Component({...}) export class MyComp implements OnInit { @Input() courses; ... } Angular will check whether an…

1. Installl latest @angular/cli: sudo npm i -g @angular/cli@next The version I used is:6.0.0-rc.10 2. Create a new application: ng new cdk-demo --routing 3. Install material and cdk packages: Here need to add @next, because by the time I tried the ap…

If we want to add global event handler, we can use 'EventManager' from '@angular/platform-broswer'. Now we have a modal component, we want to click 'Esc' key to close the modal. <au-modal class="auth-modal" *auModalOpenOnClick="[loginBut…

Previously we have tab-panel template defined like this: <ul class="tab-panel-buttons" *ngIf="tabs"> <li [ngClass]="{selected: tab.selected}" (click)="selectTab(tab)" *ngFor="let tab of tabs;">…

Create an app with routing config: ng new mynewapp --routing If you want to generate a new module with routing , you can also do: ng g m mynewModule --routing Define env variable: You can create a custom env file inside env folder. // environment.ch.…

When want to display different component based on some conditions: <div class='course-category' [ngSwitch]="course.category"> <div class="category" *ngSwitchCase="'BEGINNER'">Beginner</div> <div class=&qu…

在用到angular.extend的时候,正好碰到一个对象,是层层嵌套的Array, 结果发现只能extend第一层,查阅官文档,确实不支持deep copy: Note: Keep in mind that angular.extend does not support recursive merge (deep copy). 在stackoverflow找到一个方案,只是好像没什么用,看了一下他的写法,原来是在自行判断是否应该进入下一层递归,因为深拷贝的原始需求就是拷贝到最底层的每一个字段,…

在线预览 Sing App v3.3.0 (包含Angular 2.0版本实现) 现在,本模板完全支持Angular2.0版本啦. Sing Web App 是由专业前端工程师采用行业内流行的技术构建的一款全新的HTML后台管理模板.该模板拥有像素级完美的时尚设计和强大且通用的即用型编程功能.Sing Web App不同于常规的后台管理模板,Ta为您提供了一套直观的编程框架,帮助您快速开发Web应用程序,在框架级别保证了程序的运行速度和可维护性. 该模板提供六个版本:Bootstrap 3,Bo…

$modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入 resolve:定义一个成员并将他传递给$modal指…

原文: https://medium.com/@jorgecasar/how-to-use-web-components-with-angular-41412f0bced8 ------------------------------------------------------------- I already told you about Web Components and Frameworks and now we have to put it into practice so tha…

上一节我们走通了基本的SPA基础结构,这一节会更彻底的将后端的视图.路由.控制器全部移到前端.篇幅比较长,主要分页面改造.使用AngularUI两大部分以及一些优化路由.使用Angular的其他指令的学习.篇幅虽然长,但熟悉了就是这个套路,特别是第一部分.重点是理解Angular这种操作数据而不是操作Dom的编程方式. 一.移除服务端依赖 上一节中我们还保留了基于jade的layout.为此还保留一个Express的控制器.这一节我们全部在客户端(app_client)实现.先在app_clie…

在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方式(jade.路由都需要在服务端编译),我们将用Angular在客户端浏览器上跑起来.PS:在正常的开发流程上,我们可能不会在服务器端创建了一个网站,然后又用SPA重建它.但从学习的角度来说这还不错,这样掌握了两种构建方式. 上一节所有Angular相关的代码都在一个js里面,这不便管理和维护,这一…

这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似,但其实Angular定义是MVW框架,W代表(what ever works for you).意味着它可以是控制器或者视图模型,或者服务,就看你怎么定义的.这一节会介绍基本的Angular知识:然后改造我们之前做的页面:并且调用之前的定义的api来获取数据. Angular的数据绑定是指视图的改…

angular结合easyui这事其实并不是很合适,因为:angular的特点之一是双向绑定,页面元素与页面逻辑之间解耦:easyui是对页面元素进行封装,甚至一些组件是隐藏了原本的dom元素,初始化时创建新的元素来实现功能的.在某种程度上来说,angular和easyui在工作原理上是冲突的,当然,下面就是但是了,不然就不太好往下写了. 但是,easyui的验证控件validatebox的验证控件提示明显,UI效果比较友好,而且不会影响angular的正常工作,所以我对用这两个结合做验证非常喜…

一 Angular Angular使用了MVVC设计模式,MVVC在概念上是真正将页面与数据逻辑分离的模式,它把数据绑定工作放到一个JS里去实现,而这个JS文件的主要功能是完成数据的绑定,即把model绑定到UI的元素上. 1  下载地址 http://angularjs.org 2 学习教程 开发工具: HBuilder 学习教程: http://www.runoob.com/angularjs/angularjs-tutorial.html 二 IONIC安装 1 安装环境 ionic 最新…

Angular下载 各个版本的下载地址:https://code.angularjs.org/ 打开上述URL,页面如下图: 点击需要的版本,跳出如下页面: 点击红色框内容即可下载完整的压缩包. 还可以通过通过Npm包管理工具,或者Bower获取,这里暂不涉及. 简单例子开始Angular之旅 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&…