angular2快速构建项目

最新推荐文章于 2020-11-30 16:58:36 发布

frontend_frank

最新推荐文章于 2020-11-30 16:58:36 发布

阅读量224

点赞数

本文链接：https://blog.csdn.net/frontend_frank/article/details/102459947

版权

从零开始，创建一个超级简单的angular2.0的应用。

文件结构：

0?wx_fmt=png

a.png

1、创建一个新的文件夹，作为我们的项目目录

$ mkdir angular2-quickstart
$ cd angular2-quickstart

2、添加我们需要的库

我们推荐使用npm来获取和管理我们的开发库。
（1）：添加一个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"
  }
}

（2）：打开终端窗口执行以下命令:

$ npm install

3、添加组件文件夹

$ mkdir app
$ cd app

4、添加组件文件

现在添加一个文件名为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 = {}));

接下来，看看我们都做了哪些工作？
（1）：我们使用IIFE（立即调用函数）定义了一个全局变量app，其中若不存在就传空对象。

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

（2）：通过全局变量app我们输出AppComponent作为外部使用

app.AppComponent =

（3）：用Class预定义了一些对象和方法，方便后续使用，在这里我们定义了一个空的构造函数

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

（4）：我们用ng.core.Component()定义angular组件，它是一个对象，其中ng.core.Component()有两个参数：一个是选择器，另一个是模板

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

5、添加一个ngmodule

angular应用程序是由包含所有组件和其他部分的模块组成
（1）：创建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 = {}));

6、Bootstrap it!

（1）：添加一个新的文件main.js：

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

（2）：我们需要满足两个条件才能启动应用程序：
1）、Angular的platformBrowserDynamic().bootstrapModule函数
2）、我们刚刚写的应用程序根模块。

7、在根目录下添加index.html，注意是根目录

<!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="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.umd.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>

8、在根目录下添加styles.css，注意是根目录

h1 {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 250%;
}
body {
    margin: 2em;
}

9、运行

打开终端窗口并输入此命令：

$ npm start

推荐公众号：前端达人专注分享当下最实用的的前端技术！ 640?wx_fmt=jpeg

长按二维码点选（识别图中二维码）

frontend_frank

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular2快速构建项目

从零开始，创建一个超级简单的angular2.0的应用。文件结构：a.png1、创建一个新的文件夹，作为我们的项目目录$ mkdir angular2-quickstar...
复制链接

扫一扫