Practice with Angular 2 Part II - Simple Application Angular 2
In this the article, I want to show you guy how to start up with Angularjs 2, if you already complete read my previous articles Practice with Angular 2 Part I - TypeScript you have heard about types script. Before we start it, we will first step into Packages and Loading to prepare for our ...
In this the article, I want to show you guy how to start up with Angularjs 2, if you already complete read my previous articles Practice with Angular 2 Part I - TypeScript you have heard about types script. Before we start it, we will first step into Packages and Loading to prepare for our Angularjs project.
With our first set up we need to use 5 files that allow to create the simple project in angular js 2:
- index.html
- package.json
- tsconfig.json
- typings package
- systemjs.config.js Let’s create new folder project that is called angular2-learning by using command line:
$ mkdir angular2-learning
Go into that folder angular2-learning, and create the new file index.html for show view.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Angular 2 App!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<style>body { padding: 50px 0; }</style>
<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>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.error(err); });
</script>
</head>
<body class="container">
I am the app!
</body>
</html>
- package.json: dependencies for angular 2.
{
"name": "angular2-learning",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "concurrently "npm run tsc:w" "npm run lite"",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/core-js": "^0.9.46",
"@types/jasmine": "^2.8.6",
"@types/node": "^9.4.6",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.7.2"
},
"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/router": "~3.1.1",
"@angular/upgrade": "~2.1.1",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
}
}
However you don’t want to start follow our recommend above you can find out by your self with the lastest version of quickstart package.json.
- tsconfig.json: Typescript configurations.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"lib": ["es2015", "dom"]
}
}
No need to install the typings package. Now those packages are available via npm. To install everything, run:
$ npm install --save-dev typescript @types/node @types/jasmine @types/core-js
- systemjs.config.js : using for Angular CLI, it means everything is taken care of by the CLI. You really shouldn't even need to configure or think about your build or amd. The CLI takes care of that for you. You can read more from here systemjs.config.js.
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
After that our project will be look like this image
From the command line, go into that folder and run:
npm install
You should now see node_modules and typings folders. Now start up your project and you're caught up!
npm start
You can see the application as image:
Getting started with Angular 2 requires three major files.
- app.component.ts: The main component that encompasses our entire app.
- app.module.ts: The top level module for our app. The module defines a certain section of our site. In this case, our entire site is the module.
- main.ts: This is where we bootstrap our app. This is similar to using ng-app in Angular 1.
We start to create app folder bring us for our angular app.
mkdir app
On the app folder we create the new file that is called app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div class="jumbotron">
<h1>Welcome to Our App!</h1>
</div>
`,
styles: [`
.jumbotron { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }
`]
})
export class AppComponent {}
We will create the new file that is called Modules . @NgModule is the decorator that gives us an Angular 2 module. Angular 2 module's are the way that we can bundle sections of our applications into a singular focused package.
A module can include many parts including other modules (imports), components and/or directives (declarations), and services used to access data (providers).
Modules are defined using:
- imports: Other modules (either Angular 2 or custom built) that are also bundled parts of our application
- declarations: These are any components or declarations that you want access to in your application
- providers: These are services and used as a singular place to access and manipulate certain data. ie a UserService to hit a user API.
Create create file app.module.ts in app folder.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule
],
declarations: [ AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
On our app we are going to use Bootstrap, In angular1 we would to use ng-app, but in Angularjs2 we will use file that is called main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Now we go to file index.html and we replace I am the app! with code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Angular 2 App!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<style>body { padding: 50px 0; }</style>
<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>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.error(err); });
</script>
</head>
<body class="container">
<my-app></my-app>
</body>
</html>
Now we can see our Angularjs2 Application:
With article above you can know how to config your project for angularjs 2 with the simple config. However we will continue to deep of angularjs2 with next article. By other hand you can use this config to start the angularjs2 without using any framework.
- AngularJS Quick Start
- Source Code
