5分钟快速入门angular2。0

　　让我们从零开始，在JavaScript中建立一个超级简单的角angular2.0的应用。

请看demo

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 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="https://npmcdn.com/core-js/client/shim.min.js"></script>

    <script src="https://npmcdn.com/[email protected]?main=browser"></script>
    <script src="https://npmcdn.com/[email protected]"></script>

    <script src="https://npmcdn.com/[email protected]/bundles/Rx.umd.js"></script>
    <script src="https://npmcdn.com/@angular/core/bundles/core.umd.js"></script>
    <script src="https://npmcdn.com/@angular/common/bundles/common.umd.js"></script>
    <script src="https://npmcdn.com/@angular/compiler/bundles/compiler.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="https://npmcdn.com/@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>

<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

这里是文件结构：

在功能上，它是一个文件，在一个应用程序/文件夹styles.css三JavaScript文件。我们可以处理！

当然我们不会建立很多应用程序只运行在plunker。让我们跟随一个更接近我们在现实生活中所做的过程

添加一个package.json文件到项目文件夹和复制/粘贴以下：

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

    "core-js": "^2.4.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12",

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

打开一个终端窗口安装这些软件包（在Windows命令窗口运行和npm命令）。

npm install

在安装过程中可能出现红色的可怕错误消息。忽视他们。安装将成功。见附录下面的更多信息。

添加组件文件

(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 = {}));

我们正在创建一个可视化组件链接组件和类方法属于全局angular2核心命名空间命名appcomponent，ng.core。

该组件方法需要一个具有三个属性的配置对象。类方法是我们实现组件本身的地方，给它属性和方法绑定到视图和任何行为是适当的这一部分的用户界面。

让我们详细地回顾这个文件。

模块

angular2的应用是模块化的。他们包括许多文件，每一个专门的目的。

ES5 JavaScript没有本地模块系统。有几个流行的第三方模块系统，我们可以使用。相反，为了简单起见，为了避免选择“最爱”，我们将为应用程序创建一个单一的全局命名空间。

我们将调用它的应用程序，我们将添加我们所有的代码构件到这一个全局对象。

我们不想以任何其他的方式污染全局命名空间。所以在每一个文件，我们将代码在生活（“立即调用函数表达”）。

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

我们通过全局应用程序命名空间对象的生活，照顾到初始化一个空的对象，如果它还不存在。

大多数应用程序文件导出一个东西，将这个东西添加到应用程序命名空间。我们的app.component.js文件出口appcomponent。

app.AppComponent =

一个更复杂的应用程序都有孩子的成分，是从appcomponent可视化树中。一个更复杂的应用程序将有更多的文件和模块，至少有它的组件一样多。

快速入门不复杂的；一部分是我们需要的一切。然而，模块在这个小应用程序中发挥着根本性的组织作用。

模块依赖于其他模块。在JavaScript中的角的应用程序，当我们需要另一个模块提供的东西，我们把它从应用程序对象。当一个模块需要引用appcomponent，它从app.appcomponent这样：

declarations: [ app.AppComponent ],

angular2也是模块化的。它是一个库模块的集合。每个库本身是一个由几个模块组成的模块，每个模块都有一个相关的功能模块。

当我们需要一些东西的时候，我们使用的是ng对象。

类定义对象

在文件的底部是空的，我们什么也不做appcomponent类类定义对象。当我们准备建立一个实质性的应用程序时，我们可以用属性和应用程序逻辑来扩展这个对象。我们的appcomponent类只有一个空的构造函数因为我们不需要在这一快速的做任何事。

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

组件定义对象

ng.core.Component()告诉angular，这类定义的对象是一个angular组成。配置对象传递给ng.core.Component()方法有两个领域，一个选择器和模板。

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

选择器指定主机的HTML元素命名为我的应用程序的一个简单的CSS选择器。angular创建并显示我们的appcomponent实例无论遇到我的应用程序在主机上的HTML元素。

记住我的应用程序选择器！我们需要的信息，当我们写我们的index.html

模板属性保存组件的模板模板。模板是一种HTML告诉角如何渲染一个视图。我们的模板是一个单一的HTML宣布“我的第一个angular2应用程序”。

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

添加一个ngmodule

angular2的应用程序是由角模块包含所有的组件紧密和其他一切我们需要的应用程序。

以下内容创建应用程序/ 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 = {}));

阅读更多关于NgModule的配置在下面的附录。

待续。。。

时间： 2024-10-13 18:36:27

5分钟快速入门angular2。0的相关文章

vue.js--60分钟快速入门

Vue.js--60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文摘自:http://www.cnblogs.com/keepfool/p/5619070.html 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM

Vue.js 60 分钟快速入门

Vue.js 60 分钟快速入门 转载 作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为V

十分钟快速入门 Python，看完即会，不用收藏！

本文以 Eric Matthes 的<Python编程:从入门到实践>为基础,以有一定其他语言经验的程序员视角,对书中内容提炼总结,化繁为简,将这本书的精髓融合成一篇10分钟能读完的文章. 读完本篇文章后,可对 Python 语言特性.编码风格有一定了解,并可写出简单的 Python 程序. 100?多位经验丰富的开发者参与,在 Github 上获得了近?1000?个?star?的开源项目想了解下吗?项目地址:github.com/cachecats/c- 一.安装与运行 各个系统的 Pyth

3、Kafka学习分享|快速入门-V3.0

Kafka学习分享|快速入门 这个教程假定你刚开始是新鲜的,没有现存的Kafka或者Zookeeper 数据.由于Kafka控制控制脚本在Unix和Windows平台不同,在Windows平台使用bin\windows\ 代替 bin/,并且更改脚本扩展名为.bat. 第一步:下载编码 下载0.10.2.0版本并且解压它. 第二步:启动服务器 Kafka使用Zookeeper,因此如果你没有Zookeeper server,你需要先启动a ZooKeeper server.你可以使用Kafka的

5分钟快速入门 - Less

下面给大家讲解下Less,纯手工,入门级别,相信没学过的人阅读完后就懂了,以下是我要讲的四点: 简单介绍 Less CSS 是一个使用广泛的 CSS 预处理器. 对 CSS 进行扩展,减少很多 CSS 的代码量. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js). 快速入门 在服务器端最容易的安装方式就是通过 npm (node.j

Vue.js——60分钟快速入门

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文摘自:http://www.cnblogs.com/keepfool/p/5619070.html 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将

Angular 2 - 5 分钟快速入门

原文地址: https://angular.io/docs/ts/latest/quickstart.html 让我们从 0 开始创建一个简单的 Angular 2 应用. 不想用 JavsScript 语言? 虽然我们这里使用 JavaScript, 你也可以使用 TypeScript,或者 Dart 来开发 Angular 2 应用. 我们将用 6 步完成 1. 创建项目文件夹 2. 安装基础库 3. 创建应用组件 4. 启动应用 5. 创建 index.html 6. 运行 1. 创建项目

Vue.js&mdash;&mdash;60分钟快速入门

Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM

Vue.js&mdash;&mdash;vue-router 60分钟快速入门

概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版.乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue