Angular JS 2.0 Hello World 入门案例

因为以前一直没有接触过前端这边，但是现在感觉比较流行的就是前后端分离，所以还是想花点时间学学Angular JS，首先就从Hello Word 开始吧!

1 首先是安装node.js 这里就不赘述了，不知道的小伙伴可以自行百度（node.js的安装）

然后建立文件夹作为angular JS的工作区间我是在F盘建立文件夹（F:\angular_workspace）

2 在工作区下面新建一个json文件（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"
  }
}

　　3 打开 CMD并进入工作空间，然后执行命令 npm install

4 在工作区中建立文件夹 app，然后新建几个文件

1） 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 = {}));

　　2）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 = {}));

　　3）main.js

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

5 在工作区间的根目录下建立首页文件和样式

1）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">


<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>

<script src='app/app.component.js'></script>
<script src='app/app.module.js'></script>
<script src='app/main.js'></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>

</html>

　　2）style.css

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

body {
margin: 2em;
}

　　6 然后打开CMD 到根目录下输入命令 npm start

然后浏览器会自动打开，此时我们的第一个angularJS 的程序就完成了

参考博客 https://www.jianshu.com/p/f2c1861d9d49

posted @ 2018-06-01 16:10 小琪子阅读(133) 评论(0) 收藏举报

刷新页面返回顶部

小琪子

Angular JS 2.0 Hello World 入门案例

公告