深入理解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 将在这里显示我们的应用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解用webpack2搭建angular2的项目

    webpack2和angular2搭建的项目 github地址:项目链接 npm install,安装依赖包 npm run dev,启动本地工程,在localhost:1699进行预览 package.json { "name": "angular-webpack", "version": "1.0.0", "description": "webpack2 & angular2"

  • Angularjs---项目搭建图文教程

    Angularjs---项目搭建图文教程

    开发工具采用WebStorm,没破解,使用了过期策略:安装之后不着急打开程序,先设置系统日期为未来的某个日期,比如2020年.然后再打开程序,试用.然后再改回来系统日期.虽然每次打开WebStorm都会提示: 不过不影响使用,点击"OK"继续吧. 项目采用anguarjs seed项目作为基础框架,搭建完成之后如下: .bowerrc的配置如下: { "directory": "app/lib"} 3. app中的各view拆分成不同的目录存放,

  • angularjs学习笔记之完整的项目结构

    angularjs学习笔记之完整的项目结构

    今天的主要讲解部分有以下几点:1.演示一个完整的项目结构 2.$scope的含义 3.模块化和依赖注入. 一.演示一个完整的项目结构. 下面的所有这些代码,都是转载于@大漠穷秋 老师的.我转载来之后放到了github上,大家可以去这个链接看源代码.一边看,一边学习,效果最好了---- 下面我们来看这个截图, 这就是一个完整的angularjs项目应该有的目录结构.下面我来讲解每一个文件夹对应的分别是什么含义. 1.css:不用说了,就是放一些css的样式文件. 2.framework:这里一般放

  • 详解如何构建Angular项目目录结构

    详解如何构建Angular项目目录结构

    在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文件又有什么意义,文件中的代码又起到什么作用. 首先看一下整体的目录结构: 可以看到,命令行工具自动生成了很多文件和目录,我们来说说这些目录是干什么的 首层目录: node_modules 第三方依赖包存放目录 e2e 端到端的测试目录 用来做自动测试的 src 应用源代码目录 .angular-cli.json Angular命令行工具的配置

  • Angular 4环境准备与Angular cli创建项目详解

    Angular 4环境准备与Angular cli创建项目详解

    本文介绍的是为Angular4.0准备环境和学会使用Angular cli来创建项目的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍: 1.环境准备: 1)在开始工作之前我们必须设置好开发环境, 如果你的机器上还没有安装Node.js和npm,请安装他们 (这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以了) npm install -g cnpm --registry=https://registry.npm.taobao.org 然后我们可

  • 详解webpack+es6+angular1.x项目构建

    详解webpack+es6+angular1.x项目构建

    技术栈概述 ES2015(ES6) 大名ES2015,顾名思义是 ECMAScript 在2015年6月正式发布的一套标准.小名ES6,意为ECMAScript第六次变更.(JavaScript 是 ECMAScript 规范的一种实现).如今已慢慢替代ES5,成为JS主流的开发规范,新增很多语法糖,大大提高开发效率. webpack 一款模块化的构建工具,对ES6的构建更加友好,不详细介绍了. angular 一款MV*框架,本次用的是angular的1.6.4版本,即angular1.x版本

  • angular学习之从零搭建一个angular4.0项目

    angular学习之从零搭建一个angular4.0项目

    话说现在angular更新迭代太快了,从前几年用angular版本去搭建项目时还是1.x版本,到现在都已经是angular4.0了(直接跳过了3.0),由于公司要求用到angular4.0,所以就不能只是了解一下了,谁让我那么热爱学习了(咳咳!此处有一个推眼镜的动作),废话不多说,直接上手,首先用到的工具会有angular4.0.angular-cli.npm(v3.10.8).node(v6.2.0) 上述node和npm包管理器版本是我本机的版本号,这个版本不要太低应该都没问题 angula

  • 深入理解angular2启动项目步骤

    深入理解angular2启动项目步骤

    1. 创建项目文件夹 创建一个新的文件夹来保存你的项目,比如一开始有个self就好了 2.安装基础库 首先确保已经安装了node.js 我们使用 npm package manager  来安装需要的开发库和开发工具. 打开终端窗口,输入下面的命令. npm install 如果在执行npm install命令时没有出现npm ERR!,一起都好.可能会有几个npm WARN消息,这也没有影响. 我们会经常在一连串的gyp ERR!(gyp: generate your project)消息后看

  • SpringBoot项目运行jar包启动的步骤流程解析

    SpringBoot项目在开发中,方便快捷,有一点原因就是SpringBoot项目可以打jar包运行:把jar包直接扔服务器上,然后运行jar包就能访问项目接口了.下面介绍SpringBoot项目打jar包运行的步骤流程: 一.我们所熟悉的是在开发环境下,直接用开发工具来运行那个启动类,然后就能启动这个项目: 开发环境下启动项目 二. SpringBoot项目打jar包方法: [1]在cmd界面中,进入项目的本地存储地址 cmd命令下进入项目地址 [2]运行maven的打包命令,mvn clea

  • node创建Vue项目步骤详解

    vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟. Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用. 首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js. 如何查看node是否安装或者node版本呢? 进入cmd,输入命令 node -v,回车查看.node最好使用新一些的版本,否则后续

  • 使用IDEA启动项目遇见ClassNotFoundException的解决方案

    一. 错误现象 本地开发 SpringBoot 项目的时候,在集成 MyBatis 查询数据库的时候,使用 IDEA 启动项目的时候,有时候会遇见如下的报错: Caused by: java.sql.SQLException: com.mysql.jdbc.Driver  at com.alibaba.druid.util.JdbcUtils.createDriver  ......  Caused by: java.lang.ClassNotFoundException: com.mysql.

  • 如何搭建一个完整的Vue3.0+ts的项目步骤

    相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正式版本).所以Vue3.0的学习是我们必然的趋势,今天,主要分享一下Vue3.0的详细搭建过程,希望可以为初入Vue3的小伙伴有所帮助. 我们现在开始进入今天的主题啦~~ 一.安装 1. 安装nodejs 此处提供nodejs下载地址: https://nodejs.org/zh-cn/download/ 大家根据自己电脑的配置选择适配的 LTS(

  • 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    目录 引言 一.vue3全家桶模板介绍 1.版本依赖 2.全家桶内置集成 二.安装 tive-cli 命令行工具 三.生成项目 四.项目体验 引言 随着Vue3 和 Vite 版本的不断更新完善,开发体验有了质的飞跃.因此,越来越多的大厂也逐步拥抱 Vue3. 利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目,但是作为Vue全家桶的 vue-router.vuex.axios等成员,需要自己一个一个去配置.于是便自行开发了本文讲到的 tive-cli 脚手架模板工具,只需短短几个

  • 解决MyEclipse下启动项目时JBoss内存溢出的问题

    解决MyEclipse下启动项目时JBoss内存溢出的问题

    配置1: -Xms64m -Xmx512m 配置2: -c default -b 0.0.0.0 -Xmx1024M -Xms512M -XX:MaxPermSize=256m 以上这篇解决MyEclipse下启动项目时JBoss内存溢出的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • SREng用法简要说明图文教程(如何获得日志/删启动项目/服务/驱动/BHO等）

    SREng用法简要说明图文教程(如何获得日志/删启动项目/服务/驱动/BHO等）

    -----------------------------------teYqiu[天下无毒]原创文章,转载请标明.http://hi.baidu.com/teyqiu百度知道反病毒知识专家崔衍渠 授权. 『转载请保留所有版权信息及链接』-----------------------------------本文原始链接地址为:http://hi.baidu.com/teyqiu/blog/item/f706213fc52346ec54e72351.html请保留此链接以方便查看到我的最新更新.

  • SREng用法简要图文说明[如何获得日志/删启动项目/服务/驱动/BHO等]

    SREng用法简要图文说明[如何获得日志/删启动项目/服务/驱动/BHO等]

    一.软件的下载 2006-12-25 SRENG 2.3正式发布!<--- 目前的最新版本1. SRENG的官方下载地址(免费软件) http://www.kztechs.com/sreng/download.html 2. SREng下载链接 (文件名:SREng[teyqiu].com)http://ishare.sina.com.cn/cgi-bin/fileid.cgi?fileid=1155409如果需要输入授权号 输入如下信息: 复制代码 代码如下: 用户名:teyqiu 授权号:2

  • eclipse/IDEA配置javafx项目步骤(图文教程)

    在配置javafx之前,需要到Oracle或openJFX的官网下载javafx压缩包并解压,解压路径最好和Java的jdk放在同一目录方便寻找,在下载解压javafx包之后,开始配置javafx项目: 一:eclipse如何配置javafx 1.安装e(fx)clipse 在安装e(fx)clipse之前eclipse是没有创建javafx项目这一选项的 新建项目选择其它(CTRL + N),在选项卡里面并没有javafx项目选项 这时需要我们安装e(fx)clipse插件:在eclipse菜

随机推荐