zoukankan      html  css  js  c++  java
  • angular2 启动步骤

    以下内容转自网络

    1. 创建项目文件夹

    创建一个新的文件夹来保存你的项目,比如一开始有个self就好了

    2.安装基础库

    首先确保已经安装了node.js

    我们使用 npm package manager  来安装需要的开发库和开发工具。

    打开终端窗口,输入下面的命令。

    npm install

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

    之后再执行下面的命令

    npm init -y
    npm i angular2@2.0.0-alpha.44 --save --save-exact
    npm i live-server --save-dev

    这些命令将会创建名为 package.json 的项目文件,安装相应的软件包,现在的 package.json 看起来应该如下所示。

    复制代码
    {
      "name": "angular2-getting-started",
      "version": "1.0.0",
      "dependencies": {
        "angular2": "2.0.0-alpha.44"
      },
      "devDependencies": {
        "live-server": "^0.8.1"
      }
    }
    复制代码

    还需要一个 scripts 的配置节,找到并替换为如下的内容, 如果在你的文件中没有这个配置节, 那就加上好了.

    "scripts": {
        "start": "live-server"
      }

    3. 第一个 Angular Component

    添加一个名为 app.js 的文件,输入下面的内容。

    复制代码
    var AppComponent = ng
      .Component({
        selector: 'my-app',
        template: '<h1>My First Angular 2 App</h1>'
      })
      .Class({
        constructor: function () { }
      });
    复制代码

    我们正在创建一个名为 AppComponent 的可视组件,通过使用全局的 ng 命名空间下的 Component 和 Class 方法来完成。

    var AppComponent = ng
        .Component({...})
        .Class({...})

    Component 方法需要一个包含两个属性的配置对象。selecter 属性告诉 Angular 需要控制名为 "my-app" 的元素。一旦遇到 my-app 元素,Angular 将会创建和显示 AppComponent 实例

    template 属性定义了组件的可视外观。在这个示例中,我们使用了内联的模板,我们也可以把这个模板调整到一个模板文件中,然后通过 templateUrl 来关联模板文件的名称来使用它。

    我们使用 Class 方法实现这个组件本身的内容,可以定义属性,方法并绑定到这个视图

    现在的组件是一个最小化的实现,构造函数中没有内容。在以后的示例中,我们会看到很多有趣的内容。

    4. 启动应用

    我们需要在应用中做点什么,在 app.js 的最后,添加下面的内容。

    document.addEventListener('DOMContentLoaded', function() {
      ng.bootstrap(AppComponent);
    });

    我们等到浏览器通知我们说,内容已经加载完成了,然后再调用 bootstrap 方法。

    bootstrap 方法通知 Angular 使用 AppComponent 作为应用的根来启动应用,

    应该可以猜到, 在应用变得复杂的情况下, 我们会创建一个 Component 的树来完成复杂的工作.

     Wrapped in an IIFE

    我们不希望污染全局命名空间,但是,现在还不需要应用到命名空间,我们直接使用 IIFE ( Immediately Invoked Function Execution ) 来封装我们的代码。

    复制代码
    (function() {
    var AppComponent = ng
      .Component({
        selector: 'my-app',
        template: '<h1>My First Angular 2 App</h1>'
      })
      .Class({
        constructor: function () { }
      });
    document.addEventListener('DOMContentLoaded', function() {
      ng.bootstrap(AppComponent);
    });
    })();
    复制代码

     5. 创建 index.html

    在项目文件夹中添加名为 index.html 的页面,内容如下:

    复制代码
    <html>
      <head>
        <title>Angular 2 QuickStart</title>
        <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
        <script src="app.js"></script>
      </head>
      <body>
        <my-app></my-app>
      </body>
    </html>
    复制代码

    在 head 中,我们的应用加载了两个脚本

    angular2.sfx.dev.js, Angular2 的开发库

    app.js, 我们刚刚开发的脚本。

    在 body 中,使用了名为 <my-app> 的元素,这是应用的根的占位,Angular 将在这里显示我们的应用。

  • 相关阅读:
    教你取得计算机的所有权(可删除和打开或复制系统文件)
    为什么人口红利不能解决中国危机?
    开发者需要知道的11条HTML5小常识
    高性能CSS(四)
    8个应该去逛逛JQuery的学习网站
    用PHP调用证件识别接口识别本地图片
    Android开发有用的三方网站
    手机话费充值和手机流量充值 API
    Android开发之短信验证码示例
    微信小程序(应用号)开发新闻客户端的实战课程
  • 原文地址:https://www.cnblogs.com/weblv/p/6419226.html
Copyright © 2011-2022 走看看