自己创建一个angular2工程（起步阶段）

Posted 2022-12-03 川衡

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己创建一个angular2工程（起步阶段）相关的知识，希望对你有一定的参考价值。

如何自己创建angular2工程：

1、创建工程名（包名）
2、在工程名下创建package.json typings.json tsconfig.json system.config.js 请从官网上下载具体所需
3、使用npm 安装依赖主要是添加开发需要的依赖的包和库

4、创建app子目录
5、创建 appComponent 应用根组件导入angular 和装饰器
6、创建app.module 把元数据传给ngModule装饰器
7、添加main.ts 引入两样东西来启动应用
8、添加index.html 宿主页面
9、快速启动npm start

package说明

//处理常用的开发任务
  "scripts": 
    //npm start - 同时运行编译器和一个服务器，它们都工作在“监视模式”下
    "start": "tsc && concurrently \\"npm run tsc:w\\" \\"npm run lite\\" ",
    //npm run lite 运行 lite-server
    "lite": "lite-server",
    //npm run postinstall - 当 npm 安装完当前包时，它会被自动调用。这里的这个脚本会安装 typings.json 中定义的 TypeScript 定义文件
    "postinstall": "typings install",
    //npm run tsc - 运行一次 TypeScript 编译器
    "tsc": "tsc",
    //在“监视模式”下运行 TypeScript 编译器，进程持续运行，等待 TypeScript 文件的变化，一旦变化，就重新编译它们。
    "tsc:w": "tsc -w",
    //npm run typings - 单独运行 typings 工具
    "typings": "typings"
  ,
  在正式开放中请勿 带注释 此处只是为了方面大家阅读

appComponentp 组成

//通过 import语句来 引入所需的文件
import  Component  from '@angular/core';

//装饰器告诉angular使用哪个模板 以及怎样创建这个组件 把元数据关联到组件类上
//介绍一个元数据对象作为参数
@Component(
    //css选择器
    selector:'my-app',
    //此组件的模板
    template:'<h1>pppppppppp</h1>'
)
//一个组件类 通过他的模板控制外观和行为 并导出
export class Appcomponent

Angular 应用都是模块化的。它们由很多职责明确的文件组成。 Angular 本身也是模块化的。它包括一系列的库模块，这些模块包括了一系列相关的特性，以便拿来构建应用程序。

app.module

//导入其他模块几乎每个应用的根模块都要导入 BrowserModule 模块。

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';

import  AppComponent  from './app.component';

@NgModule(
    imports: [BrowserModule],
    declarations: [AppComponent],//当前模块的组件和指令
    bootstrap: [AppComponent] //标记出根组件 启动时angular通过它来引导
)

export class AppModule

main

import  platformBrowserDynamic  from '@angular/platform-browser-dynamic';
import  AppModule  from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

前面提到的两样东西就是：

Angular 的浏览器 platformBrowserDynamic 函数
应用 module, AppModule 。

开发的最后一步就是添加宿主页面 index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <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/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err) console.error(err); );
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

为此一个简单的angular2我们搭建起来了，就可以通过npm start 运行起来了…不过有一个小小的建议在.ts文件的最前面最好不要写注释有时会引起一些莫名的错误。