Setup a local development environment

QUICKSTART

  1. create project name: <angular>
  2. create folder name: <src> in <angular>
  3. create folder name: <app> in <src>
  4. create file name: package.json

add the following content
{
“name”: “angular-quickstart”,
“version”: “1.0.0”,
“scripts”: {
“start”: “npm run lite”,
“lite”: “lite-server”
},
“license”: “MIT”,
“dependencies”: {
“@angular/common”: “~2.4.0”,
“@angular/compiler”: “~2.4.0”,
“@angular/core”: “~2.4.0”,
“@angular/forms”: “~2.4.0”,
“@angular/http”: “~2.4.0”,
“@angular/platform-browser”: “~2.4.0”,
“@angular/platform-browser-dynamic”: “~2.4.0”,
“@angular/router”: “~3.4.0”,
“@angular/upgrade”: “~2.4.0”,

“angular-in-memory-web-api”: “~0.2.4”,
“core-js”: “^2.4.1”,
“rxjs”: “5.0.1”,
“zone.js”: “^0.7.4”
},
“devDependencies”: {
“concurrently”: “^3.0.0”,
“lite-server”: “^2.2.2”
}
}

5. Run the following command

npm install

To be able to execute above command, we need to install Node.js
6. Create app.component.js in src/app .Paste the following content in app.component.js

(function(app) {
app.AppComponent =
ng.core.Component({
selector: ‘my-app’,
template: ‘<h1>Hello Angular</h1>’
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));

7. Create app.module.js in src/app. Paste the following content in 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 = {}));

 

8. Create main.js in src/app. Paste the following content in main.js

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

9. Create file index.html in app/ with the following content.

<html>
<head>
<title>Angular 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 –>
http://node_modules/core-js/client/shim.min.js

http://node_modules/zone.js/dist/zone.js

http://node_modules/rxjs/bundles/Rx.js
http://node_modules/@angular/core/bundles/core.umd.js
http://node_modules/@angular/common/bundles/common.umd.js
http://node_modules/@angular/compiler/bundles/compiler.umd.js
http://node_modules/@angular/platform-browser/bundles/platform-browser.umd.js
http://node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js

<!– 2. Load our ‘modules’ –>
http://app/app.component.js
http://app/app.module.js
http://main.js

</head>

<!– 3. Display the application –>
<body>
<my-app>Loading…</my-app>
</body>

</html>

 

10. Create file bs-config.json and paste the following content.

Configure the server

We’re going to use a static server called lite-server that loads index.html in a browser and refreshes the browser when application files change.

The static server will use the bs-config.json file as configuration. This files tells the server that src/ is the base directory to serve, and that any requests to node_modules/ should be routed to node_modules/ in the root directory instead of src/node_modules/

{
“server”: {
“baseDir”: “src”,
“routes”: {
“/node_modules”: “node_modules”
}
}
}

 

Run!

Open a terminal window and enter this command:

COPY CODE

npm start

That command runs lite-server.

 

More detail please click here: https://angular.io/docs/js/latest/quickstart.html

 

Advertisements
This entry was posted in Angular JS. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s