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类变成一个组件

      通过@Component装饰器给组件提供元数据

      元数据:@Component里面的属性值

  3.2 模板

    组件的具体内容

  3.3 控制器

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

  3.4 组件ts文件说明

import { Component } from '@angular/core'; // 导入需要的东西

@Component({
selector: 'app-root', // 使用组件时的标签
templateUrl: './app.component.html', // 使用组件时的模板
styleUrls: ['./app.component.css'] // css
})
export class AppComponent { // 控制器
title = 'app';
}

  3.5 模板ts文件说明

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core'; import {AppComponent} from './app.component';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http'; @NgModule({
declarations: [ // 声明在该模块中有哪些东西(组件、指令、管道)
AppComponent
],
imports: [ // 声明该模块需要正常运转时需要用到哪些模块(即:该模块依赖哪些其它模块)
BrowserModule,
FormsModule,
HttpModule
],
providers: [], // 声明模块中的服务
bootstrap: [AppComponent] // 声明该模块的主组件
})
export class AppModule {
}

4 启动angular应用

  注意:可以在中指定启动页面和启动脚本

    

  4.1 启动时加载哪个页面

    加载 index.html 页面

  4.2 启动时加载哪个脚本

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

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core'; import {AppComponent} from './app.component';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http'; @NgModule({
declarations: [ // 声明在该模块中有哪些东西(组件、指令、管道)
AppComponent
],
imports: [ // 声明该模块需要正常运转时需要用到哪些模块(即:该模块依赖哪些其它模块)
BrowserModule,
FormsModule,
HttpModule
],
providers: [], // 声明模块中的服务
bootstrap: [AppComponent] // 声明该模块的主组件
})
export class AppModule {
}

  4.3 需要做些什么

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

 5 利用angular-cli创建angular项目的文件说明

    

    

    

Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程的更多相关文章

  1. Eclipse+ADT+Android SDK 搭建安卓开发环境

    Eclipse+ADT+Android SDK 搭建安卓开发环境   要求 必备知识 windows 7 基本操作. 运行环境 windows 7(64位); eclipse-jee-luna-SR2 ...

  2. 单机搭建Android开发环境(四)

    单机搭建安卓开发环境,前三篇主要是磨刀霍霍,这一篇将重点介绍JDK.REPO.GIT及编译工具的安装,下载项目代码并编译.特别说明,以下操作基于64位12.04 Server版Ubuntu.若采用其他 ...

  3. 使用Visual Studio Code搭建TypeScript开发环境

    使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...

  4. 基于ionic4、cordova搭建android开发环境

    前颜(yan)最近公司有一个项目需求是利用h5进行跨平台开发,这里所说的跨平台开发指的是:将h5代码利用某种方式或工具环境进行打包,最后生成android的apk以及ios的ipa. 本文只讲解and ...

  5. 【转】使用Eclipse搭建Python开发环境

    因为要进行自动化测试,所以要搭建Python开发环境.这里将使用Eclipse+pyDev进行搭建,在此作为笔记记录下来. 需要的组件: 1.Eclipse SDK 3.7(这里将不再叙述Eclips ...

  6. 抛弃强大的TFS ,借助于BugTracker.NET + Visual Source Safe + SourceLink搭建项目开发环境

    微软公司的Team Foundation Server是个强大的项目管理工具,如果用.NET开发,它应该是首选的项目管理平台.TFS的成本比较高,而且和Visual Studio集成紧密.比如TSF有 ...

  7. Win7搭建NodeJs开发环境以及HelloWorld展示—图解

    Windows 7系统下搭建NodeJs开发环境(NodeJs+WebStrom)以及Hello World!展示,大体思路如下:第一步:安装NodeJs运行环境.第二步:安装WebStrom开发工具 ...

  8. 初识Android && 搭建Android开发环境

    搭建Android开发环境需要的工具: JDK(Java Development Kit) Eclipse Android Sdk(Software Development Kit) ADT (And ...

  9. 2搭建Android开发环境

    这一章主要是讲解如何搭建Android开发环境,需要准备的工具有: (1)   JDK6或以上的版本: (2)   Eclipse (3)   ADT(用于开发Android应用程序) (4)   C ...

随机推荐

  1. R语言简单介绍

    R语言 概述 R语言是用于统计分析,图形表示和报告的编程语言和软件环境. R语言由Ross Ihaka和Robert Gentleman在新西兰奥克兰大学创建,目前由R语言开发核心团队开发. R语言的 ...

  2. 集合(一)-Java中Arrays.sort()自定义数组的升序和降序排序

    默认升序 package peng; import java.util.Arrays;  public class Testexample { public static void main(Stri ...

  3. 模块化开发之Amd规范和Cmd规范

    CMD规范:是SeaJS 在推广过程中对模块定义的规范化产出的. AMD规范:是 RequireJS 在推广过程中对模块定义的规范化产出的 // CMD define(function(require ...

  4. osm3ge

    https://www.acugis.com/opentileserver/ https://openmaptiles.org/docs/ https://www.maptiler.com/?_ga= ...

  5. bind支持mysql

    最近打算将bind的记录信息存入到数据库中去,网上找了下,原来早有老外写好了mysql-bind的补丁,重新编译bind即可实现bind支持mysql存储.(http://mysql-bind.sou ...

  6. Bootstrap-轮播图-No.1

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. CCPC 2017 哈尔滨 D. X-Men && HDU 6233(思维+期望)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6233 题意:一个树上有m个人,每个人在某个节点上,每个时刻每个人可以和一个与他距离大于 1 的点进行交 ...

  8. Qt 窗体增加滚动条

    //滚动区域 m_ScrollArea = new QScrollArea(parentWidget()); m_ScrollArea->setGeometry(, , , ); //垂直滚动条 ...

  9. 题解 【NOIP2003】神经网络

    [NOIP2003]神经网络 Description 问题背景: 人工神经网络( Artificial Neural Network )是一种新兴的具有自我学习能力的计算系统,在模式识别.函数逼近及贷 ...

  10. Educational Codeforces Round 33 (Rated for Div. 2) A题

    A. Chess For Three Alex, Bob and Carl will soon participate in a team chess tournament. Since they a ...