angular2.0,angular4.0入门教程

##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.tsimport { 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.tsimport { 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现在确实是越来越复杂了，也越来越工程化了。个人觉得还是可以学习和尝试的。

转载于:https://my.oschina.net/u/3441779/blog/884385

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

菜鸟教程中的面试题总结
前端开发面试题分类编程技术本文收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误的！也是不可能的…...
2024/4/21 5:36:05
做了双眼皮肿的图片
...
2024/4/26 19:38:49
Java 按单词或字符颠倒逆序字符串（使用reverser()方法、stack堆栈方法）
注意：reverse()方法快，但是不能按照单词进行颠倒逆序。import java.util.*; import java.text.Format; import static java.lang.System.*;public class t6 {public static void main(String[] args) {// TODO Auto-generated method stubScanner cin = new Scanner(System.i…...
2024/4/19 23:08:16
angular directive简介
小白第一次学习angularjs，入门看了两天的菜鸟教程，但还是很多都不太懂，刚好公司代码中用了很多自定义命令，这几天又转战看了一下directive相关的知识，里面还是有很多挺复杂的东西，网上的东西都介绍得很乱&a…...
2024/4/20 19:20:50
华西医院能做双眼皮修复手术吗
...
2024/4/20 19:20:50
大连双眼皮手术修复
...
2024/4/21 5:36:03
angularjs切换路由，清除localstorage本地存储
angularjs切换路由时，清除localstorage本地存储 this.$rootScope.$on($stateChangeStart, function() {localStorage.removeItem(存储名称); });...
2024/4/21 5:36:02
双眼皮可以做几次
...
2024/4/21 5:36:01
angularJS路由详解
angular路由： 1.ng-route 讲解路由功能是由 routeProvider服务和 ng-view 搭配实现，ng-view相当于提供了页面模板的挂载点，当切换URL进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射…...
2024/5/5 4:57:28
(精华)2020年8月6日 Angular 路由的使用
Angular 中的路由一、 Angular 创建一个默认带路由的项目命令创建项目 ng new ng-demo --skip-install 创建需要的组件 ng g component components/home ng g component components/news ng g component components/newscontent找到 app-routing.module.ts 配置路由引入…...
2024/5/5 2:33:55
AngularJS 1.x版本大致内容记录
简单介绍 AngularJS诞生于2009年，后为Google所收购。通过新的属性和表达式扩展了 HTML，可以构建一个单一页面应用程序，易学易上手。适合表单多,模块多的项目,hybrid app,但不适合高并发的项目（dirty checking 的机制&#xf…...
2024/4/21 5:35:58
全切双眼皮两眼不一样
...
2024/4/21 5:35:57
Angular RouteReuseStrategy 路由复用策略
Angular 路由复用策略： 对于单页面应用来说，每次路由切换，都会销毁前面的组件，路由离退时组件状态也一并被删除，重新加载相应路由对应的组件，在绝大多数的场景下，这样的处理都是合理的&a…...
2024/4/21 5:35:57
JSONP跨域访问数据传输
JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别，但其实他们根本不是一回事儿 JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比…...
2024/4/21 5:35:55
9 作用域(Scope)
作用域(Scope) 是一个存储应用数据模型的对象为表达式提供了一个执行上下文作用域的层级结构对应于 DOM 树结构作用域可以监听表达式的变化并传播事件作用域特点作用域提供了 $watch 方法监听数据模型的变化作用域提供了 $apply 方法把不是由Angular触发的数据模型的改…...
2024/4/21 5:35:54
AngularJS_简介、特性及基本使用_及其工作原理
转自：angularJS 的工作原理转自：通过<script>标签引入到 HTML 中，那么此时 Angular 就做为一个普通的 DOM 节点等待浏览器解析当浏览器解析到这个节点时，发现它是一个 js 文件，那么浏览器会停止解析剩余的 DOM…...
2024/4/20 8:18:20
做完双眼皮第四天图片
...
2024/4/20 5:58:50
前后端交互指南
作为刚接触前端的不久的童鞋，大家都会兴奋于CSS和JS所带来漂亮界面，然而，前端工程师除了UI重构外，还有非常重要的职责在正确的区域渲染出服务端的数据。毕竟，我们要构建一个大的web应用，必然不是普普通通的…...
2024/4/21 5:35:52
Angular 缓存用父子路由 IOS下点击下一个选项导致的页面错乱
现象： 为了子页面返回父页面不刷新，需要用到子路由，如果没有表单，完全是没问题的，当父页面有表单输入，子页面中也有表单输入时，点击键盘的下一项会把父页面显示出来，如下图&#xff…...
2024/4/27 6:13:02
Angular4.0路由导航简单介绍
准备工作： 1.在控制台上用 ng new routerDemo --routing,新建一个具有路由功能的augular项目 2.在控制台上用 ng g component (组件名字) ,建立两个组件，home组件和detail组件有兴趣的朋友可以点击获取demo展示页面以及demo的源代码地址 demo页面展…...
2024/4/21 5:35:49

angular2.0,angular4.0入门教程

相关文章

最新文章