Angular2.x
Angular版本
Angular1和Angular4分别是Angular的两个版本,也就是Angular1.x和Angular2.x(除了Angular1以外,其余都属于Angular2.x)。
1.Angular1.x ~ Angular2.x
2.Angular2.x有什么变化
1.x
安装Angular CLL
//自从node升级7.x以后,采用@方式进行安装
npm i -g @angular/cli
创建一个新的应用程序
ng new angular-tour-of-heroes
启动应用程序(ng参数使用,请访问这篇文章)
cd angular-tour-of-heroes
ng serve --open
AppComponent组件
app.component.ts - 用TypeScript编写的组件类代码。
app.component.html - 用HTML编写的组件模板。
app.component.css - 组件的私有CSS样式。
2.x
创建heroes组件
组件生成在src目录
ng generate component heroes
执行命令后,会在本app下,生成heroes目录,且目录里存在
heroes.component.html
heroes.component.css
heroes.component.ts
//heroes.component.html <p>
heroes works!
</p>
//heroes.component.css
//heroes.component.ts
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit { constructor() { } ngOnInit() {
} }
您始终Component
从Angular核心库中导入符号并使用注释组件类。@Component
@Component
是指定组件的Angular元数据的装饰器函数。
CLI生成了三个元数据属性:
selector
- 组件的CSS元素选择器templateUrl
- 组件模板文件的位置。styleUrls
- 组件的私有CSS样式的位置。
在CSS元素选择, 'app-heroes'
是相匹配的标识父组件模板内此组件的HTML元素的名称。
这ngOnInit
是一个生命周期钩子 Angular ngOnInit
在创建组件后立即调用。这是放置初始化逻辑的地方。
总是export
组件类,所以你可以import
在其他地方...像在AppModule
。
详情查询:
添加hero属性到HeroesComponent,然后再用html模板文件再显示出来。
显示HeroesComponent视图,必须添加到shell(AppComponent)模板中
3.x
创建一个heroes类
Hero
在文件src/app
夹中的文件中创建一个类。给它id
和name
属性。
export class Hero {
id: number;
name: string;
}
然后返回到HeroesComponent导入hero.ts
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero'; @Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
hero: Hero = {
id: 1,
name: 'Windstorm'
}; constructor() { } ngOnInit() {
} }
页面不再正确显示,因为您已将heroes从字符串更改为对象。
怎么显示heroes对象?
//heroes.component.html
<h2>{{ hero.name }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>
浏览器刷新,现在heroes的名字以大写字母显示。
uppercase
插值绑定中的单词(在管道运算符(|)之后)激活内置函数UppercasePipe
。
管道是格式化字符串,货币金额,日期和其他显示数据的好方法。你可以创建自己的。
5.x
编辑heroes
用户应该能够在<input>
文本框中编辑英雄名字。
该文本框应显示英雄的name
属性并更新该属性的用户类型。这意味着数据从组件类流出到屏幕,从屏幕返回到类。
要自动执行该数据流,请在<input>
表单元素和hero.name
属性之间设置双向数据绑定。
5.1-双向绑定
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name">
</label>
</div>
[(ngModel)]是Angular的双向数据绑定语法。
在这里它将hero.name
属性绑定到HTML文本框,以便数据可以在两个方向上流动:从hero.name
属性到文本框,从文本框回到hero.name
。
5.2-FromsModule
请注意,添加应用程序后停止工作。[(ngModel)]
要查看错误,请打开浏览器开发工具,然后在控制台中查找类似的消息
虽然ngModel
是有效的Angular指令,但它默认情况下不可用。
它属于可选项FormsModule
,您必须选择使用它。
AppModule
Angular需要知道应用程序的各个部分如何组合在一起以及应用程序需要哪些其他文件和库。这些信息被称为元数据
一些元数据位于您添加到组件类的装饰器中。其他关键元数据在装饰器中。@Component
@NgModule
最重要的装饰器注释顶级AppModule类。@NgModule
Angular CLI AppModule
在src/app/app.module.ts
创建项目时生成了一个类。这是你选择进入的地方FormsModule
。
导入FormsModule
打开AppModule
(app.module.ts
)并FormsModule
从@angular/forms
库中导入符号。
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
然后添加FormsModule
到元数据的数组中,其中包含应用程序需要的外部模块列表。@NgModule
imports
imports: [
BrowserModule,
FormsModule
],
//app.module.ts import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component'; @NgModule({
declarations: [
AppComponent,
HeroesComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
每个组件必须在一个 NgModule中声明。
你没有声明HeroesComponent
。那么为什么应用程序工作?
它的工作原因是Angular CLI HeroesComponent
在AppModule
它生成该组件时进行了声明。
打开src/app/app.module.ts
并HeroesComponent
在顶部附近找到导入。
import { HeroesComponent } from './heroes/heroes.component';
的HeroesComponent
是在中声明阵列。 @NgModule.declarations
declarations: [
AppComponent,
HeroesComponent
],
请注意,AppModule
声明这两个应用程序组件,AppComponent
和HeroesComponent
。
Angular2.x的更多相关文章
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- Angular2入门系列教程3-多个组件,主从关系
上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...
- Angular2入门系列教程2-项目初体验-编写自己的第一个组件
上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...
- Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境
一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...
- angular2系列教程(十一)路由嵌套、路由生命周期、matrix URL notation
今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:
随机推荐
- 【vc】高精度时间函数的使用
方法一: 函数定义如下: int UsSleep(int us);//返回实际的微秒延时时间 代码实现如下: //参数一表示 需要等待的时间 微秒为单位 int UsSleep(int us) { / ...
- Mac下Apache服务器的初步搭建
回送地址 127.0.0.1(localhost) ping 这个地址可以检测网卡是否正常 ping 本地地址如果不正常说明网线挂了 // 启动 sudo apachectl -k start ...
- 遇到的django问题
问题1: No migrations to apply 删除了migrations中0001_initial.py文件,重新执行 python manage.py makemigrations pyt ...
- 将中文库导入到ARM板子中以解决中文显示乱码的教程
1.将中文字符集导入到ARM板子中的/usr/fonts/目录下 在这里我们使用的字符集为:DroidSansFallback.ttf 下载地址为:https://pan.baidu.com/s/1e ...
- More Effective C++ - 章节一 : 基础议题
1. 仔细区分 pointers 和 references references和pointers的差别描述如下: pointer:当需要考虑"不指向任何对象"时,或者是考虑&qu ...
- mysql主从同步 change master to配置
CHANGE MASTER TO MASTER_HOST='10.0.0.52', MASTER_PORT=3308, MASTER_AUTO_POSITION=1, MASTER_USER='rep ...
- mysql 删除恢复
一.模拟误删除数据表的恢复 1 二进制日志功能启用 vim /etc/my.cnf [mysqld] log-bin 2 完全备份 mysqldump -A -F --master-data=2 - ...
- 爬虫简单之二---使用进程爬取起点中文网的六万多也页小说的名字,作者,等一些基本信息,并存入csv中
爬虫简单之二---使用进程爬取起点中文网的六万多也页小说的名字,作者,等一些基本信息,并存入csv中 准备使用的环境和库Python3.6 + requests + bs4 + csv + multi ...
- SpringMVC中controller的跳转
controller中的重定向 (1)不需要传递参数重定向 方式一:使用ModelAndView return new ModelAndView("redirect:/toLi ...
- Python 爬虫从入门到进阶之路(三)
之前的文章我们做了一个简单的例子爬取了百度首页的 html,本篇文章我们再来看一下 Get 和 Post 请求. 在说 Get 和 Post 请求之前,我们先来看一下 url 的编码和解码,我们在浏览 ...