第1章 编写你的第一个Angular Web应用
1.2 起步安装
1、安装Node.js,官网地址:https://nodejs.org/en/
2、安装TypeScript,在控制台输入命令 npm install -g typescript进行全局安装
3、安装angular/cli工具,在控制台输入命令 npm install -g @angular/cli注意:这边建议使用cnpm 代替npm
1.切换镜像 : npm install -g cnpm –registry=https://registry.npm.taobao.org
2.用cnpm安装angular/cli工具,命令:cnpm install -g @angular/cli
3.设置cnpm为项目的包管理工具,ng set –global packageManager=cnpm
这样我们就完成了基础的开发环境的搭建。单独配置淘宝镜像源 npm–npm config set registry https://registry.npm.taobao.org
1.3 运行应用
1.3.1 创建项目&&创建组件Component
ng new helloworld
cd helloworld && ng serve
localhost:4200
理解组件`教浏览器认识一些自定义功能的新标签<app-hello-world>`
ng generate component hello-world
例子
1.PS E:\Agular2\ng-book-code\first-app> ng new hello-angular –skip-install
installing ng
create .editorconfig
create README.md
create src\app\app.component.css
create src\app\app.component.html
create src\app\app.component.spec.ts
create src\app\app.component.ts
create src\app\app.module.ts
... ...
create tslint.json
Successfully initialized git.
Project 'hello-angular' successfully created.
2.PS E:\Agular2\ng-book-code\first-app\hello-angular> cnpm install
推荐在新建 project 时忽略安装 ( 加 --skip-install 参数),然后用 cnpm 执行依赖安装
3.PS E:\Agular2\ng-book-code\first-app\hello-angular> ng generate component login –inline-template –inline-style
简写 ng g c login -it -is ()
installing component
create src\app\login\login.component.spec.ts--测试文件
create src\app\login\login.component.ts
update src\app\app.module.ts
4.编辑 hello-angular\src\app\app.component.html ,通过加载 login组件
<h1>
{{title}}
</h1>
<app-login></app-login>
5.PS E:\Agular2\ng-book-code\first-app\hello-angular> ng serve 编译打包项目,http://localhost:4200
ng serve启动 应用流程
angular-cli.json指定一个”main”文件,这里是main.ts;
main.ts是应用的入口点,并且会引导(bootstrap)我们的应用;
引导过程会引导一个Angular模块;
我们使用AppModule来引导该应用,它是在src/app/app.module.ts中指定的;
AppModule指定了将哪个组件用作顶层组件,这里是AppComponent;
AppComponent的模板中有一个标签,它会渲染出我们的login信息 。
E:\Agular2\ng-book-code\first-app\hello-angular\src\app\app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent --只有在NgModule中声明了,才可以在模板中使用该组件
],
imports: [
BrowserModule--依赖,浏览器应用
],
providers: [],
bootstrap: [AppComponent]--当使用该模块引导应用时,会把AppComponent加载为顶层组件
})
export class AppModule { }