Angular-cli是angular团队针对Angular2提供的脚手架,用于环境搭建,运行等;具体参考Angular-cli GitHub

Angular的启动过程,需要先回答三个问题:

  1. 启动时加载了哪个页面?
  2. 启动时加载了哪些脚本?
  3. 这些脚本到底做了什么事?

OK,让我们来打开.Angular-cli.json

 {
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "angular-reddit-test"
},
"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.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}

apps的数组,数组中的对象有一个index属性,和一个main属性。

默认情况下:

index属性指向src(root属性)目录中的index.html,他是angular应用启动时加载的页面。

main属性指向了src下面的main.ts,他是angular应用启动时加载的脚本,main.ts负责引导angular应用启动。

我们来看一下main.ts,这里是一个angular应用的起点。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment'; if (environment.production) {
enableProdMode();
} platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
  • import { enableProdMode } from '@angular/core'; 导入angular核心模块的enableProdMode方法,此方法用来关闭angular应用的开发者模式。
  • import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 从浏览器模块中导入一个platformBrowserDynamic方法,这个方法会告诉angular使用哪个模块来启动应用。
  • AppModule,也就是命令行工具生成的那个整个应用的主模块
  • environment:环境配置,angular对多环境的一个支持。
  • if (environment.production) {
      enableProdMode();
    } 如果当前是生产环境,就调用enableProdMode方法关闭开发者模式。
  • platformBrowserDynamic().bootstrapModule(AppModule); 最后调用bootstrapModule()这个方法,传入AppModule作为启动模块来启动应用,是整个angular应用的起点,程序是通过这里来开始运行的。

angular在知道要用AppModule作为主模块以后,他会加载AppModule模块,然后angular会分析AppModule模块需要依赖哪些模块,并加载哪些模块。

在app.module.ts文件中我们会看中,AppModule模块会依赖BrowserModule、FormsModule和HttpModule模块,加载这些模块之后,会再分析这些模块需要依赖哪些模块,然后再去加载哪些模块,以此类推,直到加载完所有所需的模块。

当加载完以后,angular会在index.html文件中寻找启动模块指定的主组件对应的css选择器,也就是说启动后angular会在index.html文件中找<app-root>,会用主组件也就是AppComponent中指定的模板内容(app.component.html),用这里面的内容替换到<app-root>这个标签,在这个整个过程完成之前,页面将会展示<app-root>这个标签中的内容,也即时loading…这样的一个字符串。

启动程序:

ng serve 

开始编译应用,如果出现webpack:Compiled successful就代表编译成功了,我们就可以在浏览器中输入http://localhost:4200

 //设置不同端口
ng server --port **

--------------------------------------------------------------------

1.ng new命令,快速创建一个新的项目

$ ng new angular2_hello_world

2.运行应用

 ng serve

3. 制作Component

$ ng generate component **

-----------------------refrence-----------------------------------

http://www.ituring.com.cn/book/tupubarticle/13538

cli

什么是Angular-cli

简言之:就是NG团队自行维护的一个`脚手架`[内置单元测试及webpack2打包工具等] -- 前身是ember-cli

官网:https://cli.angular.io/ 
Github: https://github.com/angular/angular-cli 
npm: https://www.npmjs.com/package/angular-cli

范围 命令 作用
new ng new new_project 初始化新项目
Component ng g component my-new-component 新建一个组件
Directive ng g directive my-new-directive 新建一个指令
Pipe ng g pipe my-new-pipe 新建一个管道
Service ng g service my-new-service 新建一个服务
Class ng g class my-new-class 新建一个类
Interface ng g interface my-new-interface 新建一个接口
Enum ng g enum my-new-enum 新建一个枚举
Module ng g module my-module 新建一个模块

Angular2+学习第2篇 cli 环境搭建过程的更多相关文章

  1. Solr学习笔记之1、环境搭建

    Solr学习笔记之1.环境搭建 一.下载相关安装包 1.JDK 2.Tomcat 3.Solr 此文所用软件包版本如下: 操作系统:Win7 64位 JDK:jdk-7u25-windows-i586 ...

  2. 学习Linux(一)环境搭建

    零基础学习Linux(一)环境搭建 从本文开始我会为大家介绍一下linux环境下详细的集群环境安装.配置.部署到实例演示的整个过程.在此过程中会给大家详细介绍一下Linux的操作技巧和一些工具的使用. ...

  3. ESP32学习笔记(一) 环境搭建与下载

    ESP32学习笔记(一) 环境搭建与下载 作者:Nevel 博客:nevel.cnblogs.com 转载请保留出处 前几天刚入手了ESP32模块,趁着放假有时间,我们先把ESP32的编译环境搭建好 ...

  4. qt学习教程1.qt开发环境搭建

    qt学习教程1.qt开发环境搭建 首先下载qt 下载地址:http://download.qt.io/archive/qt/ 此教程使用的版本为5.1.1 下载好后,打开安装包,然后点下一步 选择一个 ...

  5. 大数据学习系列之四 ----- Hadoop+Hive环境搭建图文详解(单机)

    引言 在大数据学习系列之一 ----- Hadoop环境搭建(单机) 成功的搭建了Hadoop的环境,在大数据学习系列之二 ----- HBase环境搭建(单机)成功搭建了HBase的环境以及相关使用 ...

  6. Python+NLTK自然语言处理学习(一):环境搭建

    Python+NLTK自然语言处理学习(一):环境搭建 参考黄聪的博客地址:http://www.cnblogs.com/huangcong/archive/2011/08/29/2157437.ht ...

  7. Java学习笔记【一、环境搭建】

    今天把java的学习重新拾起来,一方面是因为公司的项目需要用到大数据方面的东西,需要用java做语言 另一方面是原先使用的C#公司也在慢慢替换为java,为了以后路宽一些吧,技多不压身 此次的学习目标 ...

  8. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  9. 学习不一样的Vue1:环境搭建

    学习不一样的Vue1:环境搭建  发表于 2017-05-31 |  分类于 web前端|  |  阅读次数 11677 首先 首发博客: 我的博客 项目源码: 源码 项目预览: 预览 因为个人的喜好 ...

随机推荐

  1. nginx Beginner’s Guide

    这个引导给nginx做了一个基本的介绍,并描述了nginx可以做的一些基本事情. 假设nginx已经安装在了读者的电脑上,如果没有请查看官网安装页. 这个引导描述了怎么去开始和结束nginx,从新加载 ...

  2. ecshop报错”Deprecated: Assigning the return value of…”解决办法

    ECSHOP生成站点地图提示”Deprecated: Assigning the return value of new by reference is deprecated in…”. 我的问题在批 ...

  3. 词法分析器总结--flex&bison

    转自:项目总结之词法分析器 无论是词法分析,还是语法分析,给我的第一感觉就是逻辑要严谨.由于项目有自己一套完整的语言和语法,设计好其对应的词法分析器和语法分析器显得尤为重要. 我们采用flex进行词法 ...

  4. iTunes历史各个版本下载地址

    地址:http://www.oldapps.com/itunes.php

  5. mouseover mouseenter mouseout mouseleave

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  6. 实现itoa()

    上代码之前先讲个笑话:曾经有位面试官问:“你实现过 唉踢哦诶(音) 吗”? 我第一个想到的是各种OA系统,心想那玩意不多是Java实现的吗...过一会想明白了,瞬间石化... #include < ...

  7. C语言 · 大数乘法

    #include<stdio.h> #include<string.h> ]; void mult(char a[],char b[]) { ,alen,blen,sum=,r ...

  8. Centsos7修改密码

    CentOS 7.0 进入单用户模式修改Root密码 时间:2017-05-02 01:10来源:blog.csdn.net  作者:海哥_大大的Java 举报   点击:506次 一.启动时,随便按 ...

  9. Redis list 之增删改查

    一.增加 1.lpush [lpush key valus...]  类似于压栈操作,将元素放入头部 127.0.0.1:6379> lpush plist ch0 ch1 ch2 (integ ...

  10. PHP多进程编程(一)

    虽然PHP 中,多进程用的比较的少.但是毕竟可能是会用到了.我最近就遇到这样一个问题,用户提交几百个url以后,要读出这个url 中的标题. 当然,你不希望用户等待的太久,10s 钟应该给出个答案.但 ...