Đã đăng vào thg 2 26, 2018 5:11 SA 3 phút đọc

685

Practice with Angular 2 Part II - Simple Application Angular 2

Bài đăng này đã không được cập nhật trong 6 năm

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 Angularjs project.

Setting Up From Scratch

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>

    <!-- css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
    <style>body { padding: 50px 0; }</style>

    <!-- js -->
    <!-- load the dependencies -->
    <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>

    <!-- load our angular app with systemjs -->
    <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:

First Angular 2 App

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>

      <!-- css -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
      <style>body { padding: 50px 0; }</style>

      <!-- js -->
      <!-- load the dependencies -->
      <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>

      <!-- load our angular app with systemjs -->
      <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:

Conclusion

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.

Document:

AngularJS

Practice with Angular 2 Part II - Simple Application Angular 2

Setting Up From Scratch

First Angular 2 App

Conclusion

Document:

Mục lục