资讯专栏INFORMATION COLUMN

angular2JS学习笔记1

figofuture / 3405人阅读

天才第一步,配置环境node,nvm,npm,webpack等。

1.创建一个文件夹angular2-app.内置文件有package.json , tsconfig.json , typings.json.

//typings.json
{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
  }
}
//package.json
{
  "name": "angular2-app",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently "npm run tsc:w" "npm run lite" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "systemjs": "0.19.26",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.10"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^0.7.12"
  }
}
//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

2.在当前目录下运行(确保node已经打开)

npm install

然后就可以看到根目录下多了一个文件夹node_modules和typings.

3.根目录下新建文件夹app
这里先写入两个文件app.component.ts和main.ts

//app.component.ts
import {Component} from "angular2/core";

@Component({
    selector: "my-app",
    template: "

My First Angular 2 App

" }) export class AppComponent { constructor(){} }
//main.ts
import {bootstrap}    from "angular2/platform/browser";
import {AppComponent} from "./app.component";
bootstrap(AppComponent);

4.在根目录下建立文件index.html和styles.css

//index.html

  
    Angular 2 QuickStart
        
    
    
    
    
    
       
    
    
    
    
    
    
  
  
  
    
  Loading~~~~
  

//styles.css
/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* 
 * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
 * for the full set of master styles used by the documentation samples
 */

5.在根目录下终端运行

npm start

这时就会自动跳转到页面:

此时,我们的第一个angular2页面就完成啦

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79220.html

相关文章

  • postgresql学习笔记---安装和psql基本操作

    本文是PostgreSQL修炼之道这本书的学习笔记,记录下疑惑或不解的地方. 这里也列一些资源: 官方文档:http://www.postgresql.org/files/documentation/pdf/9.4/postgresql-9.4-A... 中文文档:http://www.php100.com/manual/PostgreSQL8/ 阮一峰的博客:http://www.ruanyif...

    GeekQiaQia 评论0 收藏0
  • 深度学习研究综述

    摘要:此原因在一定程度上阻碍了深度学习的发展,并将大多数机器学习和信号处理研究,从神经网络转移到相对较容易训练的浅层学习结构。深度学习算法可以看成核机器学习中一个优越的特征表示方法。 摘要:深度学习是一类新兴的多层神经网络学习算法。因其缓解了传统训练算法的局部最小性, 引起机器学习领域的广泛关注。首先论述了深度学习兴起渊源, 分析了算法的优越性, 并介绍了主流学习算法及应用现状,最后总结当前存在的...

    jokester 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<