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. mybatis的#和$的差别

    在项目中假设使用mybatis保存形如"1,2,3"这种字符串.你须要使用"#"号取值.假设使用$符号会报错, 假设是查询形如"id in (1,2, ...

  2. Android系统应用信息中存储和缓存的计算方法

    进行例如以下操作: 设置->应用->选择一个应用->应用信息 会到达例如以下界面: 能够看到这个应用占用的磁盘空间. 先说结果,这几项会计算哪些文件(夹). 1.应用,由三项相加组成 ...

  3. 《转》ceilometer的数据採集机制入门

    问题导读 1.ceilometer负责什么事情? 2.ceilometer 有哪些概念? 3.ceilometer 怎样採集hardware? 附上openstack 官网API   http://d ...

  4. Atitit.故障排除系列-----apache 不能启动的排除

    Atitit.故障排除系列-----apache 不能启动的排除 能直接使用cli启动httpd   ,,详细打印出信息.. C:\Users\ASIMO>"C:\wamp\apach ...

  5. WWDC 2014 Session笔记 - iOS界面开发的大一统

    本文是我的 WWDC 2014 笔记 中的一篇,涉及的 Session 有 What's New in Cocoa Touch Building Adaptive Apps with UIKit Wh ...

  6. 关于64位 windows&linux双系统引导问题

    换了台本子win7 64位,抽空做个双系统,装了下linux. 遇到开机问题:进linux可以正常使用,进win7花屏死机,初步估计是grub(此时的boot sector位grub)的问题,启动器被 ...

  7. vim 笔记

    1.替换 :s/vivian/sky/ 替换当前行第一个 vivian 为 sky :s/vivian/sky/g 替换当前行所有 vivian 为 sky :%s/vivian/sky/(等同于 : ...

  8. 浅析StackTrace

    我们在学习函数调用时,都知道每个函数都拥有自己的栈空间.一个函数被调用时,就创建一个新的栈空间.那么通过函数的嵌套调用最后就形成了一个函数调用堆栈.在c#中,使用StackTrace记录这个堆栈.你可 ...

  9. RP2837 OUT1-OUT2 对应关系 2路DO

    RP2837 OUT1-OUT2 对应关系: OUT1  AD2   PD22  继电器1 OUT2  AD4   PD24     继电器2 root@sama5d3-linux:~ echo 11 ...

  10. PHP——字符串

    <?php //strlen("aaa");取字符串的长度 *** echo strlen("aaaaa"); echo "<br /&g ...