angular起步

1、安装

首先在https://nodejs.org网站上下载Node.js

安装完成Node.js后，接着运行以下命令安装Typescript：

npm install -g typescript  // -g 参数代表 typescript 安装到node.js的全局目录中

运行以下命令安装angular-cli (该工具使用命令行创建和管理项目)：

npm install -g @angular/cli@latest

2、示例项目

2.1安装运行

运行以下命令创建示例项目：

ng new angular4Example

执行完成后显示下面信息：

image

切换到angular4Example目录下：

cd angular4Example

执行npm install安装项目依赖模块：

npm install

执行以下命令运行示例程序：

ng serve --open

2.2生成Component

执行以下命令生成helloworld组件：

ng generate component helloworld

生成组件后删除app/app.component.html文件内容，然后写入helloworld组件标签：

<app-helloworld></app-helloworld>

页面显示如下：

image

修改helloworld.component.ts代码如下：

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

@Component({
  selector: 'app-helloworld',
  templateUrl: './helloworld.component.html',
  styleUrls: ['./helloworld.component.css']
})
export class HelloworldComponent implements OnInit {
  name: string; // <---增加name属性
  constructor() {
    this.name = '世界';  // <---为name变量赋值
  }

  ngOnInit() {
  }

}

修改helloworld.component.html内容为：

<p>
  hello {{name}}
</p>

显示页面如下：

image

通过构造隐函数进行赋值，通过{{}}在模板进行显示

3、一些使用方面的技巧

3.1 跨域访问
需在chrome浏览器图标右键->属性，在目标框里输入以下代码：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/Chrome dev session" --disable-web-security

3.2 开发环境配置
需要在environment目录下配置environment.prod.ts(生产环境)和environment.ts(开发环境)代码

export const environment = {
  production: false,
  baseUrl: 'http://localhost:80',
  websocketURL: 'ws://localhost:80'
};

3.3 打包路径设置
把index脚本引入放在"scripts"中：在angular.json中"projects"->"architect"->"build"->"configurations"->"production"

 "deployUrl": "/scripts/",