0入门权威指南,2五分钟飞速教程

当越来越多的 web app 使用 Angular 1构建的时候,本指南指导你如何构建一个简单 Angular app,app,)

学习 Angular 2

让我们从零开始用JavaScript创建一个Angular
2应用。(教程同时也有TypeScript版和Dart版。)

图片 1

看一下运行效果

运行在线案例是最快的看Angular
2应用演示的方法。
点击链接会打开浏览器,载入plunker,并显示一个消息。

图片 2

Paste_Image.png

下面是文件结构

angular2-quickstart
L------app
    L------app.component.js
    L------boot.js
L------index.html
L------license.md

从功能上说,它就是一个index.html文件和app/文件夹下的两个JavaScript文件。我们完全可以搞定。
当然我们也不会构建许多只能在plunker运行的应用的。让我们跟随一个实际中的流程。

  1. 搭建开发环境
  2. 写我们的应用的Angular根组件
  3. 启动它控制主页面
  4. 书写主页面(index.html)

如果我们按照下面的步骤,忽略解释,我们完全可以在5分钟内构建Quickstart这个应用。
但大多数人还是对why和how比较感兴趣的,这个会多花一些时间。

当越来越多的 web app 使用 Angular 1构建的时候,更快更强大的 Angular 2
将会很快成为新的标准。

开发环境

我们需要一个立足之地(应用的项目文件夹),一些库还有一个编辑器。

Angular的新约定使得它更容易去学习、更快的去开发
app。通过本教程学习更快速。更强大的 Angular 版本。

创建一个项目文件夹

mkdir angular2-quickstart
cd    angular2-quickstart

Angular 一个跨移动和桌面的框架

添加我们需要的库文件

我们推荐使用npm包管理器来获取和管理我们的开发库。
添加一个package.json文件到项目文件夹。

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.0",
    "systemjs": "0.19.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.10"
  },
  "devDependencies": {
    "lite-server": "^1.3.1"
  }
}

想详细了解?看下面附录的解释。

通过npm
install命令安装所有包。遇到红色的出错信息直接忽略,安装会成功的。详细看附录。

快速开始

我们的第一个Angular组件

组件是最基本的Angular概念。一个组件管理一个视图(视图也就是我们向用户展示信息并对用户反馈作出回应的一块网页)
从技术上讲,组件就是一个控制视图模板的类。在创建Angular应用的时候,我们会写许多组件。这是我们第一次尝试,很简单。

本指南指导你如何构建一个简单 Angular app。

创建一个应用源码子文件夹

我们要把我们的应用代码放到根目录下的app/子文件夹中。执行下面的命令:

mkdir app
cd    app

可以使用typescript/ JavaScript / Dart任意一种语言来编写Angular
app,本教程采用JavaScript。

添加组建文件

添加一个名为app.component.js的文件:

app/app.component.js

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

我们通过链式调用全局Angular
core命名空间ng.core中的Component和Class方法创建了一个名为AppComponent的可视化组件。

app/app.component.js (component schema)

  app.AppComponent =
    ng.core.Component({
    })
    .Class({
    });

Component方法接受一个包含两个属性的配置对象;Class方法是我们实现组件本身的地方,在Class方法中我们给组件添加属性和方法,它们会绑定到相应的视图和行为。

看它运行

模块

Angular应用都是模块化的。包含的每个文件都有相应的功能。
ES5没有内置的模块化系统。但第三方提供的模块系统有几个可以使用。但是,为了简单并免于为选择纠结,我们会为我们的应用创建一个单独全局命名空间。
我们把它命名为app,并且会把所有的代码包都添加到这个全局对象上。
我们不想用任何东西污染全局命名空间。因此在每个文件内我们都把代码包裹在一个IIFE(立即执行函数表达式)中。

app/app.component.js (IIFE)

(function(app) {
})(window.app || (window.app = {}));

我们将全局app命名空间对象传入IIFE中,如果不存在就用一个空对象初始化它。
大部分应用文件通过在app命名空间上添加东西来输出代码,我们在app.component.js文件中输出了AppComponent。

app/app.component.js (export)

app.AppComponent =

一个更加复杂的应用会有以树形结构继承自AppComponent的子组件。一个更加复杂的应用会有更多文件和模块,至少和它的组件数一样多。
Quickstart并不复杂,我们只需要一个组件。然而即使在这么小的应用中模块依然扮演一个组织角色。
模块依赖其他模块。在JavaScript
Angular应用中,当我们需要其他组件提供的一些东西时,我们从app对象中获取它。当其他组件需要引用AppComponent,它用下面方法从app.AppComponent获取。

app/boot.js (import)

ng.platform.browser.bootstrap(app.AppComponent);

Angular也是模块化的,它是一个库模块集合。每一个库本身就是一个由多个相关功能模块构成的模块。
当我们需要Angular的东西时,我们使用ng对象。

运行实例是学习一个 Angular app 如何实现的最快的方式。

Class定义对象

文件底部是一个空的AppComponent的类定义对象。当我们要创建一个是有实际意义的应用时,我们可以使用属性和应用逻辑来扩展这个对象。我们的AppComponent类只有一个空的构造函数,因为在Quickstart这个例子中我们不需要它做什么。

app.component.js (class)

    .Class({
      constructor: function() {}
    });

点击链接启动一个浏览器,会使用 plunker 来加载运行一个简单的示例。

Component定义对象

ng.core.Component()告诉Angular这个类定义对象是一个Angular组件。传递给ng.core.Component()的配置对象有两个字段:selector和template。

app.component.js (component)

    ng.core.Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })

selector为一个宿主HTML元素定义了一个简单的CSS选择器my-app。当Angular在宿主HTML中遇到一个my-啊、pp元素时它创建并显示一个AppComponent实例。

一定要记住my-app选择器,我们在创建index.html时需要这个信息。

template属性容纳着组建的模板。一个模板以HTML的形式告诉Angular如何渲染一个视图。我们的模板是一行显示“My
First Angular App”的HTML代码。
现在我们需要一些东西告诉Angular来加载这个组件。

文件的组织结构:

让它启动

给app/文件夹中添加一个新文件boot.js

app/boot.js

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

我们需要两件东西来启动应用。

  1. Angular的browser bootstrap函数
  2. 我们刚刚写的应用根组件

我们把他们都放到我们的命名空间下。然后调用bootstrap,将根组件类型AppComponent作为参数传进去。

在下面的附录中学习为什么我们需要ng.platform.browser的bootstrap方法以及为什么我们要创建一个单独的boot.js文件。

我们已经让Angular在浏览器中用我们在根部的组件启动应用了。Angular会把它放到哪里呢?

图片 3

添加index.html

Angular在我们的index.html上的特定位置显示我们的应用。现在是创建它的时候了。

index.html

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 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/boot.js'></script>

  </head>

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

</html>

以上代码有3部分值得注意:

  1. 载入我们需要的JavaScript库;在下面学习它们。
  2. 载入我们自己的JavaScript文件,注意它们的顺序(boot.js需要app.component.js文件在前面)。
  3. 我们在<body>标签中添加<my-app>标签。这就是我们的应用生活的地方。

当Angular在boot.js中调用bootstrap函数时,它读取AppComponent的元数据,找到my-app选择器,定位到一个名字为my-app的元素,然后再这个标签之间载入我们的应用。

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

运行!

打开一个终端,输入以下命令

npm start

这个命令运行了一个叫做lite-server的静态服务器。它在浏览器中加载index.html页面并在应用文件改变时刷新浏览器。

稍等片刻,浏览器标签就会打开并显示

图片 4

Paste_Image.png

恭喜!我们已经上手了。

如果你看到显示的是Loading…查看一下浏览器ES2015支持附录。

当然,我们仅在 plunker只能构建简单的示例。我们关掉它开始一个真实的实践。

做一些改变

试着将消息改成“我的第二个Angular 2应用”。
lite-server一直在监听,因此它会知道这个改变,并刷新浏览器,然后显示修改后的消息。
这是一个有趣的开发应用的方法。
结束后关掉终端窗口就关掉了服务器。

搭建我们的开发环境;

文件结构

我们最终的文件结构是这样的:

angular2-quickstart
L------node_modules
L------app
    L------app.component.js
    L------boot.js
L------index.html
L------package.json

下面是对应的文件代码。

app/app.component.js

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

app/boot.js

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

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <!-- 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/boot.js'></script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

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.0",
    "systemjs": "0.19.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.10"
  },
  "devDependencies": {
    "lite-server": "^1.3.1"
  }
}

为我们的 app 编写 Angular 根组件;

打包

我们的第一个应用并没有做太多事情。它基本上就是Angular 2版本的“Hello
World”。
我们在第一次尝试中尽量简单:我们写了一个小Angular组件,向index.html添加一些JavaScript库,并启动一个静态文件服务器。这就是我们对一个“Hello
World”的期望吧。
我们有更远大的目标。
好消息是我们已经入门了。我们可能仅仅碰了一下package.json文件来更新库。添加我们的应用模块文件之后,我们仅仅在需要添加库和样式表时打开index.html。
我们要进行下一步学习,并使用Angular 2创建一个有很棒功能的小应用。
加入我们的英雄教程之旅吧!

添加 Angular 模块;

附录

附录的作用就是对上面一些简单略过的点详细讲解。
这里没有必要的资料。如果好奇可以往下看。

引导它去控制主页面;

附录:库

我们载入下面的脚本:

index.html

    <!-- 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>

我们首先载入了一个IE polyfill。IE需要一个polyfill来运行那些依赖ES2015
promise和动态模块加载的应用。大部分应用都需要这些功能,而且大部分应用都能在IE中运行。
然后是Angular 2的polyfill,angular2-polyfills.js,再然后是Reactive
Extensions RxJS库。

我们的Quickstart并不使用Reactive
Extensions,但后面的实用的应用要用到它。所以我们提前加入。

最后我们加载Angular 2的网络开发版本。
当我们经验丰富并对加载时间内存使用等产品性能比较关注时我们可以选择不同的库。

编写主页面(即index.html);

附录:package.json

npm是一个流行的包管理器,Angular应用开发者依靠它来获取和关系应用需要的库。
我们在一个npm package.json文件中指明我们需要的包。
Angular团队建议我们使用在dependencies和devDependencies部分列出的包。

package.json (dependencies)

{
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.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.10"
  },
  "devDependencies": {
    "lite-server": "^1.3.1"
  }
}

也可以选择其他包。我们推荐这些包是因为这些在一起工作的很好。现在和我们一起摇摆吧。之后你可以根据自己的爱好和经验随意替换。

package.json文件有一个可选的scripts部分,在这里我们可以定义一些帮助命令来执行开发和构建任务。我们已经在我们的package.json文件中包含了一些这样的scripts。

package.json (scripts)

{
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  }
}

我们已经知道使用<code>npm start</code>来运行服务器。
我们指定的是<code>npm
start</code>命令,但实际运行的是<code>npm run
lite</code>命令。
我们用如下形式执行npm scripts:
npm run + script-name
<code>npm run lite</code>的作用-运行lite-server,它是John
Papa书写并维护的一个轻量的静态文件服务器,对使用路由的Angular应用支持很好。

添加 CSS 样式(style.css);

附录:npm错误和警告

如果在执行<code>npm
install</code>命令时没有出现<code>npm
ERR!</code>,一起都好。可能会有几个<code>npm
WARN</code>消息,这也没有影响。
我们会经常在一连串的<code>gyp ERR!</code>(gyp: generate
your project)消息后看到一个<code>npm
WARN</code>消息。不用管他们。一个包会使用<code>node-gyp</code>重新编译自己。如果重新编译失败,包会恢复(场使用一个预编译版本),一切正常工作。
只要保证在<code>npm
install</code>命令最后面没有<code>npm
ERR!</code>就好。

如果我们跟着指南的步骤一步步去实践,那么我们可以在 5
分钟内创建一个入门项目。

附录:boot.js

启动是平台相关的。
我们使用的bootstrap函数来自ng.platform.browser而不是ng.core。这是有原因的。
创建一个单独boot.js的原因:

  1. 这是容易的
    分离boot.js很容易。这对大多数应用都有益处,虽然在Quickstart中没什么用。让我们从最开始就养成好习惯。
  2. 可测试性
    即使我们不用测试Quickstart我们也因该总一开始就考虑可测试性。
    如果同一个文件中有一个对bootstrap的调用,要测试这个组件就比较困难。只要我们载入组件文件来测试组件,bootstrap函数就会尝试着在浏览器中载入应用。它会抛出一个错误,因为我们只想测试组件而不是运行整个应用。
    在boot.js文件中找到bootstrap函数,删除这个似是而非的错误,留下一个干净的组件模块文件。
  3. 重用性
    在应用的演化过程中,我们要重构、重命名和重定位文件。当文件调用bootstrap时我们对这些文件不能做上面任何操作。我们不能移动,不能在其他应用中重用组件。我们不能为提升性能在服务器端预渲染组件。
  4. 关注分离
    一个组件的责任就是展示和管理一个视图。
    启动应用和视图管理没有一点关系。这是一个分离的关注点。我们在测试和重用中遇到的很多问题都源于这种责任的混淆。
  5. 引入/输出
    当分离boot.js时我们学会了Angular一个关键技能:如何通过简单的命名空间抽象输出一个模块和如何导入另一个模块。在后续学习中会经常这么做的。

但是,大多数人总会陷入“why”和“how”中,花掉许多时间。

开发环境

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

创建新的文件夹:

mkdir angular-start 
cd angular-start

添加需要的函数库

我们推荐使用 npm 包管理器来获得和管理我们的开发库。

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

添加 package.json 文件,直接
copy:

{
 "name": "angular2-quickstart",
 "version": "1.0.0",
 "scripts": {
 "start": "npm run lite",
 "lite": "lite-server"
 },
 "license": "ISC",
 "dependencies": {
 "@angular/common": "2.0.0",
 "@angular/compiler": "2.0.0",
 "@angular/core": "2.0.0",
 "@angular/forms": "2.0.0",
 "@angular/http": "2.0.0",
 "@angular/platform-browser": "2.0.0",
 "@angular/platform-browser-dynamic": "2.0.0",
 "@angular/router": "3.0.0",
 "@angular/upgrade": "2.0.0",

 "core-js": "^2.4.1",
 "reflect-metadata": "^0.1.3",
 "rxjs": "5.0.0-beta.12",
 "zone.js": "^0.6.23",

 "angular2-in-memory-web-api": "0.0.20",
 "bootstrap": "^3.3.6"
 },
 "devDependencies": {
 "concurrently": "^2.0.0",
 "lite-server": "^2.2.0"
 }
}

通过 npm
命令安装这些包。

npm install

第一个 Angular 组件

组件是 Angular
中一个最基本的概念。一个组件管理一个视图(一块给用户展示信息、响应用户的页面)

技术上来讲,一个组件是一个控制某各视图模板的类。我们为搭建 Angular app
写许多代码。这是我们第一次尝试所以我们将会保持尽量的简单。

创建项目源文件夹

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

添加一个组件文件

添加一个app.componet.js的文件并写入下面内容:

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

我们通过链接一个组件和属于 Angular
全局明明区间类方法ng.core写入一个可视的 AppComponet 组件。

app.AppComponent =
 ng.core.Component({
 })
 .Class({
 });

这个组件方法用到一个含3个属性的对象。类方法使我们实现这个组件,给它赋予属性和方法就会绑定到视图,无论它的变现是否适合
UI。

模型

Angular 应用程序时模块化的。各个基友特定功能的模型链接在一起。

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

我们在这个全局对象唤醒 app 且添加我们所有的代码构件。

我们不想去污染这个全局命名空间。所以在每个文件里我们把代码放入一个“IIFE”(Immediately
Invoked Function Expression)。

(function(app){
})(window.app || (window.app={}));

我们通过这个全局的app命名空间对象传入
IIFE,如果他还不存在则使用一个空对象初始化它。

大多数的应用文件通过添加事物来输出东西到app命名空间。app.compont.js文件输出AppComponent。

app.AppComponent =

有一个比较复杂的应用程序会有子组件遗传自AppComponent在一个真是的树模型上。一个比较复杂的应用程序将有更多的文件和模块。

start示例并不复杂;一个组建时我们需要的。在这个小的应用程序里模块化扮演了基本组织的应用规则。

模块依赖于其它的模块。在JS Angular
应用程序里,当我们需要一些东西由其它模块提供,我们从app对象得到它。当其它模块需要涉及AppComponent,它需要从app.AppComponent获取:

declarations: [ app.AppComponent ],

Angular
也是模块化的。它是一个模块库的集合。每一个模块库都是由几个有关联的模块组成的。

当我们需要 Angular 的一些东西,我们使用ng对象。

定义对象的类

.class({
 constructor: function(){}
});

这个类中是空的,这个类为AppComponent类初始化对象。当我们准备构建一个实际的项目,我们能用属性和方法拓充这个对象。我们的AppComponent类是空的,但是有一个空的constructor,因为我们不需要在start项目里做任何事。

组件定义对象

ng.core.Component()告诉 Angular 这个类初始化对象为一个 Angular
组件。这个配置对象传递给 ng.core.Component()方法有两个字段,selector 和
template。

ng.core.Component({
 selector: 'my-app',
 template: '<h1>My First Angular App</h1>'
});

这个selector指定一个简单的CSS选择器给一个叫做my-app的HTML元素。Angular创建了并运行一个我们的AppComponent实例,无论如何它总是一个my-app元素作为HTML。

记住这个my-app选择器,我们需要这个知识点在我们写index.html的时候用到。
这个template属性保存组件的同伴模板。一个模板是一个HTML的形式,它告诉
Angular 怎样去渲染一个视图。我们的模板是一个单独HTML代码,“My First
Angular App”。

现在,我们需要一些东西去告诉 Angular 去加载这组件。

添加一个 NgModule

Angular app 由 Angular
模块组成,这些模块依赖包含我们的组件和所有我们的app需要的。

创建一个app/app/module.js文件像下面这样:

(function(app) {
 app.AppModule =
 ng.core.NgModule({
  imports: [ ng.platformBrowser.BrowserModule ],
  declarations: [ app.AppComponent ],
  bootstrap: [ app.AppComponent ]
 })
 .Class({
  constructor: function() {}
 });
})(window.app || (window.app = {}));

启动app

添加一个新文件,app/main.js,像下面:

(function(app) {
 document.addEventListener('DOMContentLoaded', function() {
 ng.platformBrowserDynamic
  .platformBrowserDynamic()
  .bootstrapModule(app.AppModule);
 });
})(window.app || (window.app = {}));

我们需要两个东西去运行这个app:

Angular 的platformBrowserDynamic().bootstrapModule函数

这个app我们刚写的初始模块;

我们需要它们都要在我们的命名空间。然后我们请求bootstrapModule,传入这个
root app module,AppModule。

学习为什么我们需要bootstrapModule从ng.platformBrowserDynamic并且为什么我们创建一个单独的JS文件。
我们已经请求 Angular 去连接这个 app 在一个浏览器用我们的组件在
root。Angular 将放在那儿?

添加index.html

Angular 运行我们的 app 在我们的index.html的一个指定位置。开始创建文件。

我们不能把我们的index.html放在app/文件夹下。我们将把它放在上一层,在项目的根文件夹下。

index.html文件内容如下:

<html>
 <head>
 <title>Angular QuickStart JS</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="styles.css">
 <!-- 1. Load libraries -->
 <!-- IE required polyfill -->
 <script src="node_modules/core-js/client/shim.min.js"></script>
 <script src="node_modules/zone.js/dist/zone.js"></script>
 <script src="node_modules/reflect-metadata/Reflect.js"></script>
 <script src="node_modules/rxjs/bundles/Rx.js"></script>
 <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
 <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
 <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
 <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
 <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
 <!-- 2. Load our 'modules' -->
 <script src='app/app.component.js'></script>
 <script src='app/app.module.js'></script>
 <script src='app/main.js'></script>
 </head>
 <!-- 3. Display the application -->
 <body>
 <my-app>Loading...</my-app>
 </body>
</html>

这儿有3个值的注意的地方:

我们加载我们需要的 JS 库;学习关于它们。

我们加载我们的 JS 文件。

我们添加<my-app>标签在<body>中。

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

添加一些样式

样式不是非常重要但是它们是非常好的,index.html假设我们有一个样式表叫style.css。

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

h1 {
 color: #369;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 250%;
}
body {
 margin: 2em;
}
 /*
 * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
 * for the full set of master styles used by the documentation samples
 */

运行它

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

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

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

做一些改变

尝试去改变信息的内容。

lite-server会一直监视,所以它会察觉改变,刷新浏览器,显示改变后的信息。

最后的项目结构

最后项目文件结构如下:

图片 5

以上所述是小编给大家介绍的AngularJS
2.0入门权威指南,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • AngularJs+Bootstrap实现漂亮的计算器
  • 基于AngularJS实现的工资计算器实例
  • 基于AngularJS实现iOS8自带的计算器
  • Angular实现可删除并计算总金额的购物车功能示例
  • Angular动态添加、删除输入框并计算值实例代码
  • Angular实现购物车计算示例代码
  • AngularJS实现的生成随机数与猜数字大小功能示例
  • Angular4编程之表单响应功能示例
  • 浅谈angularjs中响应回车事件
  • AngularJS实现的根据数量与单价计算总价功能示例