Angular2+学习第2篇 cli 环境搭建过程
Angular-cli是angular团队针对Angular2提供的脚手架,用于环境搭建,运行等;具体参考Angular-cli GitHub
Angular的启动过程,需要先回答三个问题:
- 启动时加载了哪个页面?
- 启动时加载了哪些脚本?
- 这些脚本到底做了什么事?
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 环境搭建过程的更多相关文章
- Solr学习笔记之1、环境搭建
Solr学习笔记之1.环境搭建 一.下载相关安装包 1.JDK 2.Tomcat 3.Solr 此文所用软件包版本如下: 操作系统:Win7 64位 JDK:jdk-7u25-windows-i586 ...
- 学习Linux(一)环境搭建
零基础学习Linux(一)环境搭建 从本文开始我会为大家介绍一下linux环境下详细的集群环境安装.配置.部署到实例演示的整个过程.在此过程中会给大家详细介绍一下Linux的操作技巧和一些工具的使用. ...
- ESP32学习笔记(一) 环境搭建与下载
ESP32学习笔记(一) 环境搭建与下载 作者:Nevel 博客:nevel.cnblogs.com 转载请保留出处 前几天刚入手了ESP32模块,趁着放假有时间,我们先把ESP32的编译环境搭建好 ...
- qt学习教程1.qt开发环境搭建
qt学习教程1.qt开发环境搭建 首先下载qt 下载地址:http://download.qt.io/archive/qt/ 此教程使用的版本为5.1.1 下载好后,打开安装包,然后点下一步 选择一个 ...
- 大数据学习系列之四 ----- Hadoop+Hive环境搭建图文详解(单机)
引言 在大数据学习系列之一 ----- Hadoop环境搭建(单机) 成功的搭建了Hadoop的环境,在大数据学习系列之二 ----- HBase环境搭建(单机)成功搭建了HBase的环境以及相关使用 ...
- Python+NLTK自然语言处理学习(一):环境搭建
Python+NLTK自然语言处理学习(一):环境搭建 参考黄聪的博客地址:http://www.cnblogs.com/huangcong/archive/2011/08/29/2157437.ht ...
- Java学习笔记【一、环境搭建】
今天把java的学习重新拾起来,一方面是因为公司的项目需要用到大数据方面的东西,需要用java做语言 另一方面是原先使用的C#公司也在慢慢替换为java,为了以后路宽一些吧,技多不压身 此次的学习目标 ...
- VUE CLI环境搭建文档
VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...
- 学习不一样的Vue1:环境搭建
学习不一样的Vue1:环境搭建 发表于 2017-05-31 | 分类于 web前端| | 阅读次数 11677 首先 首发博客: 我的博客 项目源码: 源码 项目预览: 预览 因为个人的喜好 ...
随机推荐
- mybatis的#和$的差别
在项目中假设使用mybatis保存形如"1,2,3"这种字符串.你须要使用"#"号取值.假设使用$符号会报错, 假设是查询形如"id in (1,2, ...
- Android系统应用信息中存储和缓存的计算方法
进行例如以下操作: 设置->应用->选择一个应用->应用信息 会到达例如以下界面: 能够看到这个应用占用的磁盘空间. 先说结果,这几项会计算哪些文件(夹). 1.应用,由三项相加组成 ...
- 《转》ceilometer的数据採集机制入门
问题导读 1.ceilometer负责什么事情? 2.ceilometer 有哪些概念? 3.ceilometer 怎样採集hardware? 附上openstack 官网API http://d ...
- Atitit.故障排除系列-----apache 不能启动的排除
Atitit.故障排除系列-----apache 不能启动的排除 能直接使用cli启动httpd ,,详细打印出信息.. C:\Users\ASIMO>"C:\wamp\apach ...
- WWDC 2014 Session笔记 - iOS界面开发的大一统
本文是我的 WWDC 2014 笔记 中的一篇,涉及的 Session 有 What's New in Cocoa Touch Building Adaptive Apps with UIKit Wh ...
- 关于64位 windows&linux双系统引导问题
换了台本子win7 64位,抽空做个双系统,装了下linux. 遇到开机问题:进linux可以正常使用,进win7花屏死机,初步估计是grub(此时的boot sector位grub)的问题,启动器被 ...
- vim 笔记
1.替换 :s/vivian/sky/ 替换当前行第一个 vivian 为 sky :s/vivian/sky/g 替换当前行所有 vivian 为 sky :%s/vivian/sky/(等同于 : ...
- 浅析StackTrace
我们在学习函数调用时,都知道每个函数都拥有自己的栈空间.一个函数被调用时,就创建一个新的栈空间.那么通过函数的嵌套调用最后就形成了一个函数调用堆栈.在c#中,使用StackTrace记录这个堆栈.你可 ...
- RP2837 OUT1-OUT2 对应关系 2路DO
RP2837 OUT1-OUT2 对应关系: OUT1 AD2 PD22 继电器1 OUT2 AD4 PD24 继电器2 root@sama5d3-linux:~ echo 11 ...
- PHP——字符串
<?php //strlen("aaa");取字符串的长度 *** echo strlen("aaaaa"); echo "<br /&g ...