学习角度2

随着越来越多的网络应用使用Angular 1构建，速度更快、功能更强大的Angular 2将很快成为新的标准。

Angular的新约定使学习和开发应用程序变得更容易、更快。通过本教程可以更快地学习。更强大的Angular版本。

跨越移动和桌面的角度框架

快速启动

本指南教你如何构建一个简单的Angular应用程序。

可以用typescript/JavaScript/Dart编写Angular app。本教程使用了JavaScript。

看着它跑

运行实例是学习如何实现Angular应用程序的最快方法。

点击链接启动浏览器，浏览器将使用plunker加载并运行一个简单的例子。

文件的组织结构：

对我们来说，它只是一个简单的Web目录，由index.html、style.css和包含三个JavaScript文件的app文件夹组成。

当然，我们只能在plunker中构建简单的例子。让我们关掉它，开始真正的练习。

构建我们的发展环境；

为我们的应用编写一个Angular根组件；

添加角度模块；

引导它控制主页面；

写主页面(即index . html)；

添加CSS样式(样式；CSS)；

如果我们按照指南的步骤一步一步来，我们可以在5分钟内创建一个入门项目。

然而，大多数人总是陷入“为什么”和“如何”中，花费大量时间。

开发环境

我们需要一个地方来容纳你的项目文件和你的编辑。

创建新文件夹：

Mkdir角度开始光盘角度开始添加所需的函数库

我们建议使用npm包管理器来获取和管理我们的开发库。

不能使用npm，点击链接开始学习，因为本教程是通过它创建的。

添加package.json文件，直接复制：

{ ' name ' : ' angular 2-quick start '，' version': '1.0.0 '，' scripts ' : { ' start ' : ' NPM run lite '，' lite': 'lite-server' }，' license': 'ISC '，' dependencies ' : { ' @ angular/common ' : ' 2 . 0 . 0 '，'

npm安装的第一个角度组件

分量是Angular中的一个基本概念。组件管理视图(显示信息并响应用户的页面)

从技术上讲，组件是控制各种视图模板的类。我们为构建Angular应用程序编写了大量代码。这是我们的第一次尝试，所以我们会尽量简单。

创建项目源文件夹

我们将我们的应用程序源代码放在根目录下的一个应用程序/子文件夹中。mkdir应用，cd应用

添加组件文件

添加一个app.componet.js文件，并编写以下内容：

(功能(app) { app。AppComponent=ng . core.component({ selector : ' my-App '，template : ' h1 my First Angular App/h1 ' })。类({ constructor : function(){ } })；})(window . app | |(window . app={ })；我们通过链接一个组件和属于Angular全局显式区间类的方法ng.core来编写一个可视化的AppComponet组件。

app。appComponent=ng . core . COMPONENT({ })。类({ })；此组件方法使用具有三个属性的对象。类方法使我们能够实现这个组件，给它属性和方法将绑定到视图，不管它的实现是否适合UI。

模型

角度应用是模块化的。每个同志朋友的具体功能模型都是联系在一起的。

ES5 JS没有本地模块系统。我们可以使用许多流行的第三方类库系统。同样，为了简化和避免选择，Angular为应用程序创建了单独的全局命名间隔。

我们在这个全局对象中唤醒应用程序，并添加我们所有的代码工件。

我们不想污染这个全局命名空间。因此，我们在每个文件中将代码放入一个“iife”(立即调用的函数表达式)中。

(函数(app){ })(window . app | |(window . app={ })；我们通过这个全局应用命名空间对象传入IIFE，如果它还不存在，就用一个空对象初始化它。

大多数应用程序文件通过添加东西向应用程序名称空间输出东西。AppComponent文件输出AppComponent。

App。AppComponent=有一个复杂的应用程序，它的子组件继承自真实树模型上的AppComponent。更复杂的应用程序会有更多的文件和模块。

开始的例子并不复杂；一个我们建立时需要的。在这个小应用程序中，模块化扮演了基本组织应用程序规则的角色。

一个模块依赖于其他模块。在JS Angular应用程序中，当我们需要其他模块提供的东西时，我们从app对象中获取。当其他模块需要涉及AppComponent时，需要从app获取。AppComponent:

声明： [app。appcomponent]，angular也是模块化的。它是模块库的集合。每个模块库由几个相关的模块组成。

当我们需要有角度的东西时，我们使用ng对象。

定义对象的类。类({ constructor : function(){ } })；这个类是空的，这个类初始化一个AppComponent类的对象。当我们准备构建一个实际的项目时，我们可以用属性和方法扩展这个对象。我们的AppComponent类是空的，但是它有一个空的构造函数，因为我们不需要在启动项目中做任何事情。

组件定义对象

告诉Angular这个类将对象初始化为Angular组件。有两个字段，选择器和模板，由这个配置对象传递给ng.core.Component()方法。

ng . core.component({ selector : ' my-App '，template : ' h1 my First Angular App/h1 ' })；这个选择器为一个名为my-app的HTML元素指定了一个简单的CSS选择器。Angular创建并运行了我们的AppComponent的一个实例，无论如何，它总是作为HTML的my-app元素。

记住这个我的应用程序选择器，当我们写index.html的时候，我们需要用到这些知识。该模板属性保存组件的伴随模板。模板是一个告诉Angular如何呈现视图的HTML表单。我们的模板是一个单独的HTML代码，“我的第一个角度应用程序”。

现在，我们需要一些东西来告诉Angular加载这个组件。

添加一个模块

Angular app由Angular模块组成，这取决于包含我们的组件和我们应用的所有要求。

创建一个app/app/module.js文件，如下所示：

(功能(app) { app。app module=ng . core . ng module({ import s :[ng . platformbrowser . browsermodule]，声明： [ app。AppComponent ]，bootstrap: [ app。AppComponent)。类({ constructor : function(){ } })；})(window . app | |(window . app={ })；启动应用程序

添加一个新文件app/main.js，如下所示：

(函数(app){ document . addeventlistener(' DOMContentLoaded ')，函数(){ ng.platformBrowserDynamic。platformBrowserDynamic()。bootstrapModule(应用程序。AppModule)；});})(window . app | |(window . app={ })；我们需要两件事来运行这个应用程序：

角度平台浏览器动态()。自举模块功能

我们刚刚在这个应用中写的初始模块；

我们需要它们都在我们的命名空间中。然后我们请求bootstrapModule并传入这个根应用程序模块。

了解为什么我们需要ng.platformBrowserDynamic中的bootstrapModule，以及为什么我们要创建一个单独的JS文件。我们已经要求Angular在浏览器中连接这个应用程序，并在root中使用我们的组件。Angular会放在哪里？

添加index.html

Angular在index.html的指定位置运行我们的应用程序。开始创建文件。

我们不能将index.html放在应用程序/文件夹下。我们将把它放在下一层，项目的根文件夹下。

index.html文件内容如下：

html head title angular quick start JS/title meta name=' viewport ' content=' width=device-width，initial-scale=1' link rel='样式表' href='styles.css '！- 1.加载库-！- IE必需poly fill-script src=' http : node _ modules/core-js/client/shim . min . js '/script script src=' http : node _ modules/zone . js/dist/zone . js '/script script src=' http : node _ modules/reflect-metadata/reflect . js '/script script src=' http : node _ modules/rjs/bundles/rx . js '/script script src='- 2.加载我们的‘模块’——脚本src=‘app/app.component . js’/脚本脚本src=‘app/app . module . js’/脚本脚本脚本src=‘app/main . js’/脚本/head！-3.显示应用程序主体我的应用程序加载./my-app/body/html有三个值需要注意：

我们加载我们需要的JS库；了解他们。

我们加载我们的JS文件。

我们在尸体上添加了我的应用标签。

当Angular在main.js中请求bootstrapModule函数时，它会读取appModule的源信息，看到appComponent是一个启动组件，找到这个my-app选择器，定位my-app的元素，然后在这些标签中加载我们的App视图。

添加一些样式

风格不是很重要，但是很好。index.html假设我们有一个名为style.css的样式表

在根目录中创建这个样式文件并编写样式。您也可以使用样式文件的迷你版本。您可以参考以下样式设置。

h1 { color: # 369font-family: Arial，Helvetica，无衬线；font-size : 250%；} body { margin: 2em}/* *请参见https://github.com/angular/angular . io/blob/master/public/docs/_ examples/style . CSS *了解文档示例使用的全套主样式*/运行它

打开命令工具，输入命令npm start

这个命令运行一个静态服务器lite-server，它在浏览器中加载index.html，并在程序文件被修改时刷新浏览器。

很快，浏览器的标题栏就会打开并显示内容。恭喜，我们成功了。

做一些改变

尝试更改信息的内容。

Lite-server将始终监控，因此它将检测到更改，刷新浏览器并显示更改的信息。

最终项目结构

最终项目文件结构如下：

以上是边肖介绍的AngularJS 2.0的权威入门指南，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！