Angular2学习笔记.1、环境部署，基本概念，HelloAngular2

最新推荐文章于 2023-02-06 15:25:16 发布

若简LL

最新推荐文章于 2023-02-06 15:25:16 发布

阅读量4.8k

点赞数 1

分类专栏： Angular2学习笔记文章标签： angular2 angular2学习 angular2笔记

本文链接：https://blog.csdn.net/github_33116729/article/details/50688208

版权

Angular2学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

作为本系列笔记的第一篇文章，在开头要说一些闲言碎语。
首先我是一个Angular2的初学者，这个系列文章不是教程或其他一切厉害的东西，仅仅是作为我学习过程的一个记录，我在编辑和排版后将它作为资料保存并分享给其他人。也希望大家和我共同以学习的态度探讨技术，希望这个系列能对大家或多或少的有所帮助。虽然这个系列是我的学习笔记，但既然拿出来和别人分享，我会尽量考虑读者的感受，尽力做出循序渐进并且详尽的描述。
同样因为我是初学者，在学习和行文过程中必然有所疏漏和曲解，我尽量避免这些问题并且会在以后发现问题时返回改正，希望发现问题的大家不吝赐教。
在学习的过程中我发现官方文档和Angular的实际代码存在出入，我会在笔记中详细注明，我确保我的代码在当时是正确的，但不排除Angular继续修改代码的可能性。
这个系列以理论和实践的方式进行，我会在git@oschina上同步更新我的工程，也会提供展示站点。
本次学习的一个目的是将git@oschina上面的我发起的一个开源库AliceSPA的客户端由AngularJS 1.x升级到Angular 2。AliceSPA是一个有Phalcon和Angular构建的SPA框架。
本系列GIT地址（包含工程）
本系列在CSDN上的发布地址
 AliceSPA项目GIT地址
 演示站点地址
Angular2可以用于三种开发环境，分别为TypeScript、Dart和JavaScript。我选择从相对熟悉的JavaScript入手，以后应该会对前两种也有学习。

Angular2官方文档

TypeScript
Dart
JavaScript

构建基础目录

由于本系列笔记会有许多工程，那么首先提出一个目录结构以便日后管理（你不需提前创建这个目录结构，在需要的时候我会提出创建相关内容）：

/  
|-package.json  
|-index.html  
|-node_modules/  
  |-libraries  
  |-...  
|-Project1/  
|-Project2/  
|-Project3/  
|-...

package.json文件与node_modules文件夹是由NPM管理的库文件相关内容。
index.html提供了各个工程的超链接索引。
ProjectN为日后穿件的各个工程（名字会根据实际内容改变）。
首先建立/文件夹，这个文件夹可以自己取名如web，以后我都会用/指代这个文件夹。

开始

本文内容及工程参考Angular2官方文档5 MIN QUICKSTART
既然是第一篇文章，那么我们先以让Angular2成功运行为目的。
演示地址

1、NPM

NPM是NodeJS的包管理器，通过NPM我们可以方便的对项目依赖的包进行管理，Angular2就是通过NPM管理的。
关于NodeJS和NPM的安装请自行搜索，我假设你已经成功安装了NPM。
/package.json为NPM的配置文件，记载了工程所需要的各个包的版本信息，可以通过NPM一键安装。
建立/package.json文件，内容为：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.14"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^2.0.1"
  }
}

在/下启动命令行或中断，执行
npm install
完成相关包的下载，此时会自动创建/node_modules/文件夹并下载相关包。

2、HelloAngular2

在本工程完成时目录结构将为：

/  
|-package.json  
|-index.html  
|-node_modules/  
  |-libraries  
  |-...  
|-HelloAngular2/
  |-index.html
  |-app/
    |-app.component.js
    |-main.js

首先在/下建立本次工程目录”HelloAngular2”。

Component

Component(组件)是页面的一部分，它用于显示内容和响应用户操作，包含了处理逻辑和HTML模板。
从技术上来说，Component是控制视图模板的类，在构建Angular应用时我们会构建许多这样的类。
建立/HelloAngular2/app.component.js文件，内容为：

(function(app){

  app.AppComponent = 
  ng.core.Component({
    selector:'my-app',
    template:'<h1>Hello Angular 2!</h1>'
  })
  .Class({
    constructor:function(){}
  });
})(window.app || (window.app = {}));

上面的代码创建了一个叫做“app”的全局命名空间，我们所有的代码都将在这个对象中。
上面的代码中为了避免对全局命名空间的污染，我们使用IIFE(“Immediately Invoked Function Expression”)：(function(app) {})(window.app || (window.app = {}));匿名函数会被立刻执行并不会被保留。这里当window.app不存在时会用空对象初始化它。
上面代码中使用了ng.core.Component()方法，它定义了一个Agular component对象，它接收一个对象作为参数，其包含两个属性selector（选择器）和template（模板）。
selector是一个简单的CSS选择器，这里的值为my-app，它用于定位在HTML的页面中的同样叫做my-app的元素。无论在HTML中的何处遇到叫做my-app的元素，Angular都将创建或显示一个AppCompoent的instance（实例）。
template是一个知道Angular如何渲染视图的模板，直观的说，selector所对应的html元素将被渲染为template的内容。你会在接下来的index.html中看到<my-app>标签，它显示了一级标题“Hello Angular 2!”。

Modules

Angular应用是模块化的，ES5 JavaScript没有提供一个Native（原生）的模块化系统，我们可以使用一些第三方的实现。
大多数情况下一个程序文件为app命名空间添加一个部分（或者说模块），这个工程中我们已经通过app.component.js为window.app（既app）添加了AppComponent组件（模块）。
在更复杂的应用中可以为组件定义子组件以形成一个可视树（视图树）。在复杂的应用中会有很多文件和模块，至少和这个应用包含的Component数量一样多。
一个Module可以依赖于其他Module，在JavaScript下的Angular应用中，当我们需要使用其他Module的功能时，我们可以从app对象获取，例如window.app.AppComponent。

启动引导

我们需要两部分来启动APP：
1、Angular的bootstrap函数
2、作为根的Component
建立/HelloAngular2/main.js,内容为：

(function(app){
  document.addEventListener('DOMContentLoaded',function(){
    ng.platform.browser.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

上面代码可以看出，引导是对于特定平台的，我们使用的是ng.platform.browser而不是ng.core，因为在core中提供的是跨平台的功能，而bootstrap可能发生在browser（浏览器）、Apache Cordova或者NativeScript，不同平台的bootstrap是不同（或者说特定优化）的。我们可能还会在服务器上进行引导以进行页面的服务器端渲染从而提供更好的SEO（搜索引擎的SEO对于Angular的动态页面程序，如SPA是一个难题。因为搜索引擎不会执行页面的JavaScript脚本，而没有脚本执行的Angular应用基本上只有模板之类的无用信息）。

index.html

建立/HelloAngular2/index.html，内容为：

<html>
  <head>
    <title>Hello Angular 2!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='app/app.component.js'></script>
    <script src='app/main.js'></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

从上面的html代码中可以看到<body>中的<my-app>元素，如前面所说，window.app.AppComponent构建是传入的selector为”my-app”,Angular会找到index.html中的my-app元素并替换模板。

3、运行

在/下启动命令行或中断，执行npm start。
可以看到页面显示Hello Angular 2!。

若简LL

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Angular2学习笔记.1、环境部署，基本概念，HelloAngular2

前言作为本系列笔记的第一篇文章，在开头要说一些闲言碎语。首先我是一个Angular2的初学者，这个系列文章不是教程或其他一切厉害的东西，仅仅是作为我学习过程的一个记录，我在编辑和排版后将它作为资料保存并分享给其他人。也希望大家和我共同以学习的态度探讨技术，希望这个系列能对大家或多或少的有所帮助。同样因为我是初学者，在学习和行文过程中必然有所疏漏和曲解，我尽量避免这些问题并且会在以后发现问题时
复制链接

扫一扫