AngularJS 初识篇

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 命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。

• --open or -o 自动打开浏览器并访问
• --prod 指定为生产模式，会自动打包项目

创建我的第一个组件

Angular CLI 命令行工具，自带指令集，可以让我们快速开发和遵循 Angular 的开发风格指南。

# 创建组件 组件名需要遵循大驼峰命名规则
$ ng generate component ComponentName
// or 简写
$ ng g c ComponentName

Angular三大核心概念

1. Component
2. Module
3. 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";