文档章节

angular2.0,angular4.0入门教程

misterChangRay
 misterChangRay
发布于 2017/04/21 14:48
字数 4402
阅读 710
收藏 6

##angular4.0 入门教程

开源社区上传图片好恼火,建议到我的github上查看原文 点此查看原文

在没有发布angular3.0的情况下,angular4.0发布了,昨天查文档的时候看到官方这段字。 懵逼表情 当时我的表情是这样的。 懵逼表情

网上查了下,原来是因为angular.router(路由)已经到4.0而angular.js的版本才2.X。为了不让开发者在开发在下载后发现2.X的包里有个4.X的路由(router)而引起误会。于是就干脆直接发布了个4.0的整合包,其实内部除了路由(router)升级几乎没什么变化。

网上看了不少angular2的教程,不过个人觉得都写的不太仔细,所以想写个仔细点的,主要是适合我们这种菜鸟入门,呼呼~~~~

首先科普点观念先,为学习angular2的人做基础准备(心里准备):

  • angular2和angular1差异很大,这点要做好心里准备
  • angular2是拥抱es6的,并且推荐的开发语法是typescript。而现在浏览器对es6的支持情况普遍不太好,所以实际开发时需要中间件来把es6的代码转到es5。
  • angular2是模块化的,各个组件是独立的。而每个模块是一个或多个组件的组合 结果演示

上面已经说了,angular官方建议使用typescript进行开发。当然使用js也能开发,不过语法怪异且繁琐。所以我们还是使用typescript开发(跟着官方混准没错)。

在项目之前再复习下上面的观点,目前angular的设计是基于模块(module),然后一个模块可以包含很多组件(component)。每个组件完成自己独立的功能。这样一组装就ok了。好了废话说到这,come on。

##先做一个helloworld

首先我们得建立一个learnangular2文件夹来存我们的项目。

接下来使用npm来安装我们需要的组件,主要需要以下组件(按照下面的顺序依次敲命令就行了):

npm init
npm install @angular/core --save
npm install @angular/common --save
npm install @angular/compiler --save
npm install @angular/router --save
npm install @angular/platform-browser --save
npm install @angular/platform-browser-dynamic --save
npm install @angular/platform-browser-dynamic --save
npm install rxjs --save
npm install systemjs --save
npm install zone.js --save
npm install core-js --save
npm install typescript --save

命令敲完了,让我简单BB下上面的命令:

npm init  //这个不用解释了吧,初始化一个nodejs的包管理器,一路next 默认配置就好
npm install @angular/core --save   //这个是必备的,从文件名也能看出来是核心模块
npm install @angular/common --save  //这个是组件模块,上面也介绍了,angular是模块化的,模块里又包含组件,这个就是用来提供定义组件的模块
npm install @angular/compiler --save  //编译器,angular组件使用的
npm install @angular/router --save  //路由模块,提供给组件里使用的
npm install @angular/platform-browser --save  //用于给浏览器提供渲染等一些服务的模块,这里是静态渲染AOT
npm install @angular/platform-browser-dynamic --save //用于给浏览器提供渲染等一些服务的模块,这里是动态渲染JIT,不过它依赖与上面那个AOT模块
npm install zone.js --save  //感觉像js的aop实现,angular/core中被引用
npm install rxjs --save   //js观察者模式的实现,angular/core中被引用
npm install systemjs --save  //SystemJS是一个通用的动态模块加载器,这里用来加载es6模块
npm install core-js --save  //一个补丁包(polyfill)用来让不支持es6的浏览器支持es6, 其实就是把es6代码转为es5
npm install typescript --save   //typescript编译器,用于把typescript转换为es6代码

好了,上面就是angular的开发中几乎是必须要使用的工具了。可是你安装完后并不能直接着手开发,因为这些组件工作起来还得需要配置,主要需要配置的是typescript和system.js,暂时不解释下面配置项的含义,直接列出配置文件:

//filename: tsconfig.json
//typescript默认配置文件,在使用tsc命令编译*.ts文件时,将会自动使用运行命令目录下的tsconfig.json配置文件
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}
//filename: system.config.js
//sytemjs的配置文件,配置systemjs加载时候的属性
System.config({
	paths: {
		'npm:':'/node_modules/',
		'dist:':'/dist/src/'
	},
	map : {
		'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
		'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
		'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
		'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
		'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
		'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
		'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
		'rxjs':'npm:rxjs'
	},
    packages: {
     'src': {
	    defaultExtension: 'js'
     },
     'dist': {
	    defaultExtension: 'js'
     },
     'node_modules': {
	    defaultExtension: 'js'
     }
    }
});

ok,配置文件已经被我们搞定了,终于可以开始编码了。 首先我们得添加主页文件,文件代码如下: index.html,主页中应该要引入corejs, zonejs, systemjs, system.config.js

<!-- filename: index.html -->
<!DOCTYPE html>
<html>
<head>
	<base href="/" />
	<title>learnAngular</title>
</head>
<body>
	<hello-world></hello-world>
<hello-world></hello-world>
</body>
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="system.config.js"></script>
    <script>
      System.import('dist/bootstrap.js').catch(function(err){ console.error(err); });
    </script>
</html>

看的清楚点的同学可能会发现,这个页面除了引用框架包外还引入了两个文件,第一个是system.config.js,这是systemjs的配置文件。 第二个是了bootstrap.js,而目前这个文件还不存在,所以我们得添加这个js。不过别忘了我们开发语言是typescript而不是jsvascrip 所以这里添加的应该是bootstrap.ts, 编译后才会是bootstrap.js

//filename: bootstrap.ts
//这里是通过system.config.js中的map中定义的@angular/platform-browser-dynamic的值是@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
//这里可以看到这个dist:这个东西是在system.config.js中paths里面定义的,结合定义的组合起来就是/dist/main.module,再加上我们在packages中定义了在dist文件夹下默认后缀为.js所以就找到文件了
import { MainModule } from 'dist:main.module';

platformBrowserDynamic().bootstrapModule(MainModule);

这个文件是用来启动angular主模块的。 源码中可以看到bootstrap.ts中引入了其他的JS,但是我们页面中也没加载。那么引入的js是怎么自动加载的呢?就是通过systemjs这个模块加载器去加载啦。

接下来我们在根目录下创建一个src目录,用来保存我们开发的源码 先添加bootstrap中的主模块,(再说一遍angular是基于模块的哟)

//filename: main.module.ts
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from 'dist:app.component';

@NgModule({
  //主模块需要依赖的模块列表
  imports:      [ BrowserModule ],
  //主模块需要使用的component, angular中组件和模块就是在这里进行关联的
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  //主模块启动后第一个启动的组件
  bootstrap:    [ AppComponent ]
})
export class MainModule { }

好的,主模块写完了,可以看到主模块中在declarations配置项中引用了AppComponent

最后再添加AppComponent组件,在angular中,具体的业务逻辑是写在组件中的

//filename: app.component.ts
import { Component } from '@angular/core';
//定义了一个组件,在主页的body中使用<hello-world></hello-world>进行访问
@Component({
  selector: 'hello-world',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

最后,我们再在根目录下添加一个dist文件夹,用来保存编译后的文件

好了,当文件添加完毕后,我们的目录看起来应该像这样: 目录清单 没问题的话,我们在根目录(learnangular2)中使用 tsc --rootDir . --outDir dist 把当前目录下的所有ts编译到dist目录下 命令来编译目录下的所有ts文件(这里子目录也会被编译哟)。 注意:如果在编译过程中有类始于 Cannot find module ....之类的错误,可以先选择无视。

编译完成后使用浏览器打开(请注意这里打开应该使用网页服务器而不是右键打开)。打开后看起来应该是这样的。 结果演示 一个hello angular就被搭建起来了,是不是很简单?

##再说说路由的事

angular2中升级了很多angular1的东西,比如内置路由可以嵌套了,模块可以懒加载了。 我们先把我们的项目简单修改下,为我们的项目增加登陆组件,在打开页面时,让用户第先登录。

不过在这之前,得给大家介绍几个知识点方便后面的理解: 1.Templates angular中的template,基本上它和html还是没什么差距,不过去掉了script标签,因为这个标签在模版中是不安全的。另外,一些语义化标签在模版中也是不推荐使用的,比如html,body,base,meta。等标签。 模版插值和angular1相同,在模版中使用双花括号{{表达式}},如:

	<h3>
 	{{title}}
 	<img src="{{heroImageUrl}}" style="height:30px">
	</h3>

2.annotation angular2 中的依赖配置现在全部依赖于注解,比如刚开始的@componnent注解,@ngModule注解,这些元信息表述了angular将会如何处理这个类,关于注解在官方文档是这样描述的: 结果演示 不过得给大家说明除了上面一系列的注解angular会自动注入外,标明@injectable()这个注解的类也会自动注入: 结果演示 可以这么说,上面的@component, @ngModule 等注解是 @injectable 的子类

OK, 现在我们在根目录再增加一个子目录,longin.component,这里放登录相关的组件,既然是组件,我们则需要下面几个文件: login.component.ts //登录组件定义 login.html //登录页面 login.service.ts //登录使用的service

老规矩,我们贴上这几个文件的代码:

//filename: login.component.ts

import { Component } from '@angular/core';
import { LoginService } from 'dist:login/login.service';

@Component({
  templateUrl: '/src/login.component/login.html', //声明登录模版路径
  providers:  [ LoginService ]	//声明需要提供的类
})
export class LoginComponent {
	//在构造器中声明我们需要注入的类
	 constructor(service: LoginService) {
		this.service = service;
	 }
	public login = function(username, password) {
		if(this.service.login(username, password)) {
			alert('成功')
		} else {
			alert('登录错误')
		}
	}
}

上面的组件中,引入了LoginService, 在构造函数中,我们申明了一个service: LoginService参数,它告诉angular,在初始化的时候给我提供一个LoginService的实例,我们又把实例赋值给this.service方便以后访问

//filename: login.html

<div> 注意input中的#un写法,这表示声明input元素的一个引用变量(可以认为就是个dom元素的引用变量),可以在这个模版中任意地方使用,比如提交按钮中,我们使用了 un.value 这些写法来获得他们的值, 还有登录按钮事件的写法(click),和标准写法on-click没有任何区别
<div>
<div>
	<div><label>username:</label><input #un type="input" name="username"></div>
	<div><label>password:</label><input #pd type="input" name="username"></div>
	<div><input type="button" name="login" (click)="login(un.value, pd.value)" value="提交"></div>
</div>
//filename: login.service.ts

import { Injectable } from '@angular/core';

//angular会对此注解提供注入,也就是如果你这个service需要其他的东西,有这个标记的话angular就会自动注入进来啦
@Injectable()
export class LoginService {
  public login(username:string, password:string):boolean   {
  	console.log('login:' + username + password);
  	if('mrzhang' === username && '123456' == password){
  		return true;
  	}
  	return false;
  }
}

好了,新文件添加完毕,不过我们还得改造下老的文件,因为还没添加路由呢.我们改造下main.module

//filename: main.module.ts
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from 'dist:app.component';
import { LoginComponent } from 'dist:login.component/login.component';

//注意这里的路由声明
const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'index', component: LoginComponent },
  { path: '**', component: LoginComponent }
];

//将声明的路由添加到模块中
@NgModule({
  imports:      [ BrowserModule , RouterModule.forRoot(appRoutes, {userHash:true})],
  declarations: [ AppComponent, LoginComponent],//这里我们还使用到了登录模块
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class MainModule { }

上面声明的路由中包含login和index两个路径,不过处理这两个路径的组件都是LoginComponent,所以实际上没任何区别,请注意最后一个路由,它的路径是**,它的意思是匹配其他没被定义的路由。

最后修改下helloword组件的模版,在helloword模版中增加两个导航按钮

<button routerLink="index">首页</button>
<button routerLink="login">登录</button><br>
<router-outlet></router-outlet>

导航按钮中,使用了routerLink指令来用于跳转URL

ok.,修改完毕后看起来应该像下面这个样子

//filename: app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `<h1>Hello {{name}}</h1><br>
		  <button routerLink="index">首页</button>//routerLink 点击跳转链接
		  <button routerLink="login">登录</button><br>
		  <router-outlet></router-outlet>`//相当于angular1 ui-router中的 <ui-view>标签
})
export class AppComponent { name = 'Angular'; }

由于新增加了一系列文件,现在目录看起来是这样的: 结果演示 好了,命令行再运行tsc --rootDir . --outDir dist编译下吧.打开浏览器看成果吧,现在可以验证登录了 结果演示

##最后模块异步加载 angular2中原生就支持异步模块加载,现在我们再增加一个用户管理模块,有两个页面,一个添加用户,一个用户列表。 首先我们在src下创建文件夹user,用来存放user模块的文件。user模块下有两个组件,一个是添加用户组件,一个用户列表组件。另外有一个user主模块文件。 所以user文件夹下应该有以下几个文件: user.module.ts user.add.component.ts user.add.html user.list.component.ts user.list.html 首先写主模块

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';

import { UserListComponent } from 'dist:user/user.list.component';
import { UserAddComponent } from 'dist:user/user.add.component';


const appRoutes: Routes = [
  { path: '', redirectTo: 'list', pathMatch: 'full'},
  { path: 'list', component: UserListComponent },
  { path: 'add', component: UserAddComponent },
];


@NgModule({
  imports:      [ FormsModule, RouterModule.forChild(appRoutes, {useHash:true})],
  declarations: [ UserListComponent, UserAddComponent]
})
export class UserModule { }

在user的主模块中我们注册了三个路由,这很好理解,模块中引入了两个组件UserListComponent和UserAddComponent,它们分别处理list和add访问路径, 值得注意的是其中有一个路由的path为空。它的意思是当访问的路径为空时,重新定向到list路由。

好的,接下来我们来看user.add.component

import { Component } from '@angular/core';
import { Router} from '@angular/router';

@Component({
  templateUrl: '/src/user/user.add.html',
})
export class UserAddComponent {
	public add = function(username, password) {
		 this.router.navigate(['/user/list', this.user]);
	}

	constructor(private router:Router) {
		this.user = this.user || {};
	}
}

在用用户添加组件中,我们提供了一个add方法用于页面上的添加按钮响应事件,还提供了一个构造函数,在构造函数中我们初始化了user这个对象. 在这里还使用了路由提供的js跳转方法 navigate([uri, param]), 它的参数是个数组,第一个是要跳往的URI,第二个是跳转时传递的参数.

值得一提的是,add函数中使用的this.router大家可能发现好像没有定义,其实它是在构造函数中的参数定义的:

constructor(private router:Router) {
}
//相当于
constructor(router:Router) {
	this.router = router;
}
//这两个构造函数唯一的差距只是少了个private

什么是构造函数? 简单的理解就是当UserAddComponent这个组件在内存中初始化时,第一执行的就是构造函数。也就是这个函数无论如何将会是第一个调用的,

ok,在看看user.list.component.ts,其实这个组件很简单,只是简单的展示了下怎么接收参数:

import { Component } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
  templateUrl: '/src/user/user.list.html',
})
export class UserListComponent {
	public user = '';

	constructor(route:ActivatedRoute) {
		this.user = route.snapshot.params['name'];
	}
}

angular2中提供了一个最简单的参数接收方式,就是使用route.snapshot.params来接收你的参数,关于更多的参数信息参照下图

结果演示

不过个人觉得最好的还是route.snapshot.params,因为它最简单. 好的,最后是两个组件分别对应的HTML

filename: user.add.html
<div><button routerLink="/user/add">添加用户</button><button routerLink="/user/list">用户列表</button></div>
<div>这里时用户添加页面</div>
<form  >
	<div><label>username:</label><input [(ngModel)]="user.name" type="text" name="a"></div>
	<div><label>password:</label><input [(ngModel)]="user.pw" type="text" name="b"></div>
	<div><label>submit:</label><input on-click='add()' type="button" name="" value="提交"></div>
</form>
<div>username:{{user.name}}, pw:{{user.pw}}</div>

这个页面中,我们使用了双向绑定,在angular2中[]这样的绑定是用于绑定输入,()这样的是用于绑定输出,所以双向绑定就是[()]再结合ngModel指令啦, 值得一提的是,这里提交按钮的事件我们并没有采用(click)='add()'而是采用的标准写法喔on-click='add()'

filename: user.list.html
<div><button routerLink="/user/add">添加用户</button><button routerLink="/user/list">用户列表</button></div>
<div>这里是用户列表页面</div>
<div>你刚刚添加了一个用户 {{user}}</div>

好了,最后一步,我们得在我们原来的主路由中添加一个路径,当登录成功后跳转到我们user模块中的路径中。

//filename: main.module.ts
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from 'dist:app.component';
import { LoginComponent } from 'dist:login.component/login.component';


const appRoutes: Routes = [
 { path: '', redirectTo: 'login', pathMatch: 'full'},
  { path: 'login', component: LoginComponent },
  { path: 'index', component: LoginComponent },
  { path: 'user', loadChildren: 'dist:/user/user.module#UserModule' },
];


@NgModule({
  imports:      [ BrowserModule ,  RouterModule.forRoot(appRoutes, {useHash:true})],
  declarations: [ AppComponent, LoginComponent],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class MainModule { }

在上面我们可以看到,当用户访问user路径时,load一个子模块(loadChildren),子模块的字符串采用#号分割,第一部分为模块定义的路径,第二部分为模块的定义名称。 这样,当我们访问user路径时,angular就会去加载user模块了,user模块加载成功后,由于没有指定要访问的path,所以第一个就会打开定义为''的那个path 现在我们的文件目录应该是这样: 结果演示 好的,现在可以添加用户了,试试吧 ... 点击这里下载源码learnangular

##写在最后面 前面的例子我们演示了angular2中的模块定义,组件定义,路由定义,路由懒加载,以及路由的参数传递。可以看出来的是angular现在确实是越来越复杂了,也越来越工程化了。个人觉得还是可以学习和尝试的。

© 著作权归作者所有

共有 人打赏支持
misterChangRay
粉丝 1
博文 3
码字总数 7007
作品 1
成都
程序员
私信 提问
加载中

评论(2)

misterChangRay
misterChangRay

引用来自“Coder____”的评论

cli呢?
CLI只是脚手架工具,他们帮我们完成了教程中的操作,CLI操作很简单的啊
zeddy
zeddy
cli呢?
ng serve/ng serve --prod --aot启动项目出现的问题

@大漠穷秋 你好,想跟你请教个问题:大漠老师您好,今天我看了你的angular2.0安装的视频中,我git了NiceFish的这个项目然后ng serve --prod --aot 后 之后提示我You have to be inside an angu...

icewaves
2017/03/08
5.4K
7
2017-03-07

学习内容:angular.js 表单属性 验证及关联查询 angular2.0学习 完成内容:学习内容及笔记详细 磐石农商行项目框架学习 工作问题:angular.js1.0表单验证属性基本认清,城市关联查询时, 主要...

Full_Session
2017/03/07
1
0
如何选择前端框架:ANGULAR VS EMBER VS REACT

最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架。Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单。几周之前React发布了...

葡萄城控件技术团队
2015/11/30
257
0
2017-03-08

学习内容:angular.js 表单属性 验证 angular2.0学习 完成内容:学习内容及笔记详细 磐石农商行项目框架学习 工作问题:angular.js1.0表单验证属性基本熟悉 磐石农商行项目了解和功能初步修改...

Full_Session
2017/03/08
0
1
angular4.0笔记

你初学angular4.0,记录一下学习的零碎知识,以下对angular4.0都直接书写为ng ng的核心思想是组件; react他的核心就是虚拟DOM ng新特性 ng程序架构 组件:是ng应用的基本构建快,是一段带有...

洱月
2017/12/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux 静态IP、DNS、主机名配置

linux 静态IP、DNS、主机名配置 一、IP配置 进入网络配置文件目录 cd  /etc/sysconfig/network-scripts/ 列出当前目录下文件名 ll 编辑配置文件 注意:ifcfg-eth0是我电脑的一个网卡标识...

小儿
17分钟前
4
0
配置vagrant使用三种网络

使用vagrant安装之后一直使用127.0.0.1进行访问。但是一直使用这个ip肯定满足不了的。我们装肯定是有需求的,那么本节就讲解一下用vagrant的网络配置。 vagrant中一共提供了三种网络配置。 ...

echojson
18分钟前
0
0
重磅发布:阿里开源 OpenJDK 长期支持版本 Alibaba Dragonwell

3 月 21 日北京阿里云峰会,阿里巴巴正式宣布对外开源 OpenJDK 长期支持版本 Alibaba Dragonwell。作为 Java 全球管理组织 Java Community Process (JCP) 的最高执行委员会的唯一中国代表,以...

阿里云官方博客
18分钟前
1
0
重磅发布:阿里开源 OpenJDK 长期支持版本 Alibaba Dragonwell

3 月 21 日北京阿里云峰会,阿里巴巴正式宣布对外开源 OpenJDK 长期支持版本 Alibaba Dragonwell。作为 Java 全球管理组织 Java Community Process (JCP) 的最高执行委员会的唯一中国代表,以...

阿里云云栖社区
24分钟前
0
0
OAuth2实现单点登录SSO

1. 前言 技术这东西吧,看别人写的好像很简单似的,到自己去写的时候就各种问题,“一看就会,一做就错”。网上关于实现SSO的文章一大堆,但是当你真的照着写的时候就会发现根本不是那么回事...

java菜分享
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部