Angular CLI 安装
# 全局安装
$ npm install -g @angular/cli
# 检验安装是否成功,出现以下图标就说明成功了
$ ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 1.7.4
Node: 8.11.1
OS: darwin x64
Angular:
初始化新项目
# 创建项目成功后，会自动 npm install
$ ng new helloAngular(project name)
# 启动项目（开启本地服务）
$ ng serve
// or 启动项目，并打开浏览器 （--open or -o）
$ ng serve --open
ng serve指令参数含义
ng serve 命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。
-
--openor-o自动打开浏览器并访问 -
--prod指定为生产模式，会自动打包项目
创建我的第一个组件
Angular CLI 命令行工具，自带指令集，可以让我们快速开发和遵循 Angular 的开发风格指南。
# 创建组件 组件名需要遵循大驼峰命名规则
$ ng generate component ComponentName
// or 简写
$ ng g c ComponentName
Angular三大核心概念
- Component
- Module
- Route
Angular最核心的概念是“组件化”,新版本的 Angular 来说，一切都是围绕着“组件化”展开的，组件是 Angular 的核心概念模型。
components.png
以下是一个最简单的 Angular 组件定义：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Jun ting';
}
- @Component：这是一个 Decorator（装饰器），其作用类似于 Java 里面的注解。Decorator 这个语言特性目前（2017-10）处于 Stage 2（草稿）状态，还不是 ECMA 的正式规范。
- selector：组件的标签名，外部使用者可以这样来使用这个组件：<app-root>。默认情况下，ng 命令生成出来的组件都会带上一个 app 前缀，如果你不喜欢，可以在 angular-cli.json 里面修改 prefix 配置项，设置为空字符串将会不带任何前缀。
- templateUrl：引用外部的 HTML 模板。如果你想直接编写内联模板，可以使用 template，支持 ES6 引入的“模板字符串”写法。
- styleUrls：引用外部 CSS 样式文件，这是一个数组，也就意味着可以引用多份 CSS 文件。
- export class AppComponent：这是 ES6 里面引入的模块和 class 定义方式。
把 CSS 预编译器改成 SASS
@angular/cli 创建项目的时候没有自动使用 SASS 作为预编译器，我们需要自己手动修改一些配置文件,请按照以下步骤依次修改：
-
angular-cli.json里面的styles.css后缀改成.scss
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
// 这里
"styles": [
"styles.scss"
],
后面再使用 ng g c *** 自动创建组件的时候，默认就会生成 .scss 后缀的样式文件了。
-
angular-cli.json里面的styleExt改成.scss
"defaults": {
"styleExt": "scss",
"component": {}
}
- src 下面
.css后缀的文件全修改为.scss
引入 bootstrap、font-awesome
安装 bootstrap、font-awesome 依赖
# bootstrap
npm install bootstrap --save
# font-awesome
npm install font-awesome --save
在 style.scss 引入 bootstrap、font-awesome 的 css
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.min.css";
