Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程

标签：core   建模   mic   alt   index   install   png   product   工具   

1 angular架构

　　1.1 组件：是angular应用的基本构建模块，可以理解为一段带有业务逻辑和数据的HTML

　　1.2 服务：用来封装可重用的业务逻辑

　　1.3 指令：允许你想HTML元素添加自定义功能

　　1.4 模块：将应用中的不同部分组织成一个angular框架可以理解的单元

　　1.5 组件+服务+指令 = 模块

　　　　组件+服务+指令 是用来完成业务功能的；模块 是用来打包和分发的

2 开发环境搭建

　　2.1 安装node.js

　　　　很简单，百度即可

　　　　安装完后在我们的命令窗口中就可以使用 npm 命令啦

　　2.2 安装命令行工具

　　　　npm npm install -g @angular/cli

　　　　　　安装完后就可一个使用 ng 命令啦

　　　　　　例如

　　　　　　　　ng -v　　查看版本

　　2.3  创建项目

　　　　ng new 项目名

　　　　注意：新建一个文件夹，进入到这个文件夹后再执行上面的工具

　　2.4 安装WebStorm前端开发工具

　　　　很简单，百度即可

3 组件的必备要素

　　3.1 装饰器

　　　　用于向控制器添加元数据；装饰器告诉angular怎么讲一个TypeScript类变成一个组件

　　3.2 模板

　　　　组件的具体内容

　　3.3 控制器

　　　　就是一个由装饰器修饰的TypeScript类，它包含了与模板相关的属性和方法，以及与页面相关的逻辑

4 启动angular应用

　　4.1 启动时加载那个页面

　　　　加载 index.html 页面

　　4.2 启动时加载那个脚本

　　　　加载 main.ts 脚本；该脚本负责引导angular应用的启动

import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic‘;
import { enableProdMode } from ‘@angular/core‘;
import { environment } from ‘./environments/environment‘;
import { AppModule } from ‘./app/app.module‘;

if (environment.production) {
  enableProdMode();
}

 // 使用 AppModule 模块作为启动模块
platformBrowserDynamic().bootstrapModule(AppModule);

　　4.3 需要做些什么

　　　　先根据main.ts指定的启动模块的配置文件app.module.ts中去按照相关配置加载启动模块所需的依赖模块 -> 去 index.html 中去寻找启动模块指定的主组件对应的标签 -> 将主组件中的内容去替换主组件对应的那个标签

Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程

标签：core   建模   mic   alt   index   install   png   product   工具   

原文地址：http://www.cnblogs.com/NeverCtrl-C/p/7291377.html