轻便快捷的 Angular 4 学习教程(1)

Angular 4 与 react、Vue 的区别

react:

1、 虚拟 DOM,速度响应很快;
2、 flux 架构,实现服务器端渲染;
3、 本身只是 MVC 中的 V 层,常需要和其他库结合使用;
*它的重点在 UI 上,而 angular 满足上述所有优点;

vue:

1、 简单;
2、 灵活;
3、 只关注 web;
4、angular 类似生态圈,vue 类似社区。vue 由国内大牛开发,angular 由谷歌团队开发;
5、 服务器端渲染,vue 只能借助其他服务器渲染库;
*angular 可以开发 web、ios、android、移动端。

angular4 的新特性:

1、 全新的命令行工具:angular cli;
2、 服务器端渲染,可以使 10S 加载完成的单页应用 1S 加载完成。还可以针对每一个视图去做 SEO 优化;
3、 移动端和桌面端兼容。创建跨平台应用,手机应用,提供了可以在移动端和桌面端通用的 ui 组件(ionic);

本教程目的:

本篇文章旨在帮助大家使用 Angular-CLI 快速起步、Angular 环境搭建,我们最终会带着大家完成一个简单的 angular 应用。通过这个应用希望大家可以明白 Angular CLI 的使用,并初步了解 Angular 的开发流程。

学前基础:

1、HTML、CSS、JavaScript 前端语言;
2、angular1.x 或 angular2.x 基础语法;(如果 angular 基础语法有问题的同学可以先观看我们的 [angular 系列视频]
3、npm 命令;(关于终端 npm 命令在本章节底部有相应解释说明

快速上手 Angular CLI

Angular CLI (CLI 是 Command Line Interface 的简写)是一种命令行界面工具,实现自动化开发流程,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。

使用 Angular CLI 可以很快很简单的构建 angular 项目,只要掌握几行命令就能构建出前端架构的最佳实践。

我们就来一步一步的实现我们第一个 angular 应用!


步骤1:设置开发环境

在开始工作之前,我们必须设置好开发环境。

如果你的机器上还没有 Node.js 和 npm,请先安装它们。

请先在终端 / 控制台窗口中运行命令 node -v 和 npm -v, 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能会出现错误,更新的版本则没问题。

然后全局安装 Angular CLI。

npm install -g @angular/cli


步骤2:创建新项目

打开终端窗口。

运行下列命令来生成一个新项目以及应用的基础代码:
ng new my-app

创建新项目需要花费很多时间,大多数时候都是在安装那些 npm 包。请耐心等待一下。

那么,这时候 Angular cli 帮你干了以下这么多事情:

1、创建 my-app 目录(也可以结合项目内容自己起目录名字);
2、应用程序相关的源文件和目录将会被创建;
3、应用程序的所有依赖 (package.json 中配置的依赖项) 将会被自动安装;
4、自动配置项目中的 TypeScript 开发环境;
5、自动配置 Karma 单元测试环境;
6、自动配置 Protractor (end-to-end) 测试环境;
7、创建 environment 相关的文件并初始化为默认的设置;

安装完成之后就可以启动项目了:

步骤3:启动开发服务器

进入项目目录,并启动服务器。
cd my-app
ng serve --open

ng serve命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。

使用--open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/。

浏览器中会看到下面的显示:
app-works


步骤4:编辑我们的第一个 Angular 组件

CLI 为我们创建了第一个 Angular 组件。我们把它叫做 app-root 的根组件。我们可以在 ./src/app/app.component.ts 目录下找到它。

打开这个组件文件(src/app/app.component.ts),并且把 title 属性从 Welcome to app!! 改为 Welcome to My First Angular App!! :

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My First Angular App';
}

浏览器会自动刷新,我们会看到修改之后的标题。我们也可以给他加些样式进去
打开 src/app/app.component.css 并给这个组件设置一些样式

h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}

app-first

如我们所愿,我们完成了第一个 “Hello World!” 小应用

接下来我们可以试着在命令行创建一个组件 component 或者一个 module 试一试

CLI 简单使用-创建 module,component,service,class

下面是关于 angular 提供的创建 module,service,class,directive 等命令列表

ng-g

简写……

ng g c my-new-component // 新建组件
ng g d my-new-directive // 新建指令
ng g p my-new-pipe // 新建管道
ng g s my-new-service // 新建服务
ng g cl my-new-class // 新建 class
ng g e my-new-enum // 新建枚举
ng g m my-new-module // 新建模块

比如创建一个 home 的 module 组件
进入项目在终端输入命令:
ng g component home(确定项目有 node_module 文件)
我们看到 app文件下面已经多了一个 home 的 component,以及它应有的 css,html,为什么有 css,html,ts,.spec.ts 也都放在这下面(组件化可重复使用,提高效率,庞大的工程代码中可以提高可维护性,阅读性,方便测试等);

我们再试着创建一个 angular 的模块
在终端输入命令:
ng g module about
about 模块创建
可以看出模块比 component 多了一个 module.ts 文件。

创建其他内容类似,我们可以自己尝试,多多练习!

参考文献

官方文档—Angular CLI 快速起步

关于应用中文件结构及各个文件之间具体有什么关系?或者说新建项目该怎么划分文件结构,下一章节我们会详细介绍 angular4 架构内容

说明:

1、什么是命令行?命令行在 OSX 是终端(Terminal),在 windows 是命令提示符(Command Prompt);

注:之后操作都是在 windows 系统下;

简单介绍 gulp 在使用过程中常用命令,打开命令提示符执行下列命令(打开方式:window + r 输入 cmd 回车):

node -v查看安装的 nodejs 版本,出现版本号,说明刚刚已正确安装 nodejs。PS:未能出现版本号,请尝试注销电脑重试;

npm -v查看 npm 的版本号,npm 是在安装 nodejs 时一同安装的 nodejs 包管理器,那它有什么用呢?稍后解释;

cd定位到目录,用法:cd + 路径 ;

dir列出文件列表;

cls清空命令提示符窗口内容。

2、npm(node package manager)nodejs 的包管理器,用于 node 插件管理(包括安装、卸载、管理依赖等);

使用 npm 安装插件:命令提示符执行npm install <name> [-g] [--save-dev]

:node 插件名称。例:npm install <name> --save-dev

-g:全局安装。将会安装在 C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量; 非全局安装:将会安装在当前定位目录; 全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的 node_modules 文件夹下,通过 require() 调用;

使用 npm 卸载插件:npm uninstall <name> [-g] [--save-dev] PS:不要直接删除本地插件包

删除全部插件:npm uninstall <name> <name> <name> ……???太麻烦

借助 rimraf:npm install rimraf -g 用法:rimraf node_modules

使用 npm 更新插件:npm update <name> [-g] [--save-dev]

更新全部插件:npm update [--save-dev]
查看 npm 帮助:npm help
当前目录已安装插件:npm list

// 安装 cnpm
npm install -g cnpm --registry=https://registry.taobao.org


未完待续,第二篇作者正努力写作中……

  • 原创文章:妙味全职讲师-田亚星
  • 欢迎转载,转载请注明出处且加上链接,谢谢!

对本篇内容有什么不明白?可以给我们留言,我们会不断改进,让大家看得更明白。祝大家学业顺利~

妙味 Angular 交流微信群:


免费视频获取 或 课程咨询:

QQ:2852509866

微信:miaov-class

电话:010-57269690

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

25647892 25647892

25647892

010-57658918

在线微信客服
客服1
客服在线时间

周一至周六上午:9:00~12:00

下午:13:30~18:00

妙味公众号