Angularjs2

angularjs2 ionic2 备忘

因为angular2中创建pipe之后,在app.module里面声明一下,全局可用,但是ionic2的每个page都是独立的module,要在page中直接使用pipe就不可行了,而且不能在page.module中再去import那个pipe,会报pipe再不同模块中引用的错误,因此,我们可以将pipe整个声明为一个module,在需要pipe的地方,将整个module引入。pipe.module的声明具体的pipe实现不贴出了,就是angular2的实现方式需要引用pipe的地方

angularjs2进阶教程6-http服务

还是angularjs2入门1-文件结构分析的源码,将app名称tutorial-step6-httpTheHttpModuleisnotacoreAngularmodule.called@angular/http需要在app.module.ts上加上import{HttpModule}from'@angular/http';还需要imports:[HttpModule,],我们伪造一个web服务

angularjs2进阶教程5-路由

还是angularjs2入门1-文件结构分析的源码,将app名称tutorial-step5-router添加列表视图,两种不同的方式来显示列表。详细介绍可以参考angularjs2进阶教程-项目介绍我们要添加Angular’sRouter。创建一个新的dashboardcomponent列表到路由中。把appcomponent改为应用程序处理导航定位,和显示英雄列表。

angularjs2进阶教程4-创建可重用的服务数据

还是angularjs2入门1-文件结构分析的源码,将app名称tutorial-step4-services1.创建服务hero.service.ts,能够公用获取英雄的数据将来,我们打算从远端服务器上获取英雄数据。我们写了一个带有初始化逻辑的ngOnInit方法,Angular会在适当的时候调用它。在这个例子中,我们通过调用getHeroes来完成初始化。多年的经验和惨痛的教训教育我们,应该把复杂的逻辑扔到构造函数外面去,特别是那些需要从服务器获取数据的逻辑更是如此。constructor构造器,声明

angularjs2进阶教程1-编辑英雄

还是angularjs2入门1-文件结构分析的源码,将app名称tutorial-step1-editor1.在组件app.component.ts中创建一个英雄类,有id和name两个参数在组件控制器中写入页面上上面的是单向绑定,可以改成双向绑定这个改变了input的值,的值也改变了

angularjs2进阶教程-项目介绍

我们将使用单向数据绑定只读数据。项目启动以Dashboard为首页,这个页面显示了许多有英雄气概的英雄。在这个页面上可以有两个视图Dashboard和Heroes,点击可以切换。在输入框中输入字母,可以自动补全点击这页面上的Magneta,路由跳转到英雄详情,我们可以在这个页面改变英雄的名字。点击Heroes,进入下面页面点击其中一个,下面出现了"ViewDetails"按钮可以修改后保存

angularjs2入门4-表单

还是angularjs2入门1-文件结构分析的源码,将app名称改成basic-step4-form1.创建模型类site.ts2.创建表单组件site-form.component.ts,diagnostic属性用于返回这个模型的JSON形式3.因为模板驱动的表单有它们自己的模块,所以我们得把FormsModule添加到本应用的imports数组中,这样我们才能使用表单4.使用ngModel进行双向数据绑定每一个input元素都有一个id属性,它被label元素的for属性用来把标签匹配到对应的inpu

angularjs2入门3-事件

还是angularjs2入门1-文件结构分析的源码,将app名称改成basic-step3-event1.点击事件2.keyup事件。Angular把事件对象存入$event变量中。组件的onKey()方法是用来从事件对象中提取出用户输入的,再将输入的值累加到values的属性。Box变量引用的就是元素本身,这意味着我们可以获得input元素的value值,并通过插值表达式把它显示在标签中。

angularjs2入门2-使用多个组件

还是angularjs2入门1-文件结构分析的源码,将app名称改成basic-step2-component上篇文章入门1讲到的是只有一个组件,多人团队合作的时候就不方便了,要多个人同时开发组件然后合在一起,就需要多个组件。接下来详细讲解一下怎么修改一下代码。