Angular 2 учебник
Начало работы с Angular 2

замечания

Версии

Установите угловое с угловым кли

Этот пример представляет собой быструю настройку Angular 2 и как создать быстрый пример проекта.

Предпосылки:

• Node.js v4 или выше.
• npm v3 или больше или пряжа .

Откройте терминал и выполните команды один за другим:

npm install -g @angular/cli

или же

yarn global add @angular/cli

в зависимости от вашего выбора менеджера пакетов.

Предыдущая команда устанавливает @ angular / cli глобально, добавляя исполняемый файл ng к PATH.

Чтобы настроить новый проект

Перейдите с помощью терминала в папку, в которой вы хотите настроить новый проект.

Запустите команды:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Вот и все, теперь у вас есть простой пример проекта с угловым 2. Теперь вы можете перейти к ссылке, отображаемой в терминале, и посмотреть, что она работает.

Чтобы добавить к существующему проекту

Перейдите в корень вашего текущего проекта.

Выполните команду:

ng init

Это добавит необходимые строительные леса в ваш проект. Файлы будут созданы в текущем каталоге, поэтому обязательно запустите его в пустой директории.

Выполнение проекта локально

Чтобы видеть и взаимодействовать с вашим приложением во время работы в браузере, вы должны запустить локальный сервер разработки, в котором размещаются файлы для вашего проекта.

ng serve

Если сервер успешно запущен, он должен отображать адрес, на котором работает сервер. Обычно это:

http://localhost:4200

Исходя из этого, этот локальный сервер разработки подключается с помощью Hot Module Reloading, поэтому любые изменения в html, машинописном тексте или css приведут к тому, что браузер будет автоматически перезагружен (но может быть отключен по желанию).

Создание компонентов, директив, труб и услуг

Команда ng generate <scaffold-type> <name> (или просто ng g <scaffold-type> <name> ) позволяет автоматически генерировать угловые компоненты:

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component

Существует несколько возможных типов лесов, которые могут генерировать угловые cli:

Вы также можете заменить имя типа своей первой буквой. Например:

ng gm my-new-module для создания нового модуля или ng gc my-new-component для создания компонента.

Строительство / Пакетирование

Когда вы все закончите создание своего веб-приложения Angular 2, и вы хотите установить его на веб-сервере, таком как Apache Tomcat, все, что вам нужно сделать, это запустить команду сборки либо с установленным флагом, либо без него. Производство будет минимизировать код и оптимизировать производственные параметры.

ng build

или же

ng build --prod

Затем зайдите в корневой каталог проектов для папки /dist , которая содержит сборку.

Если вы хотите получить преимущества небольшого пакета продуктов, вы также можете использовать компиляцию шаблона Ahead-of-Time, которая удаляет компилятор шаблона из окончательной сборки:

ng build --prod --aot

Тестирование устройства

Угловой 2 обеспечивает встроенное модульное тестирование, и каждый элемент, созданный угловым кли, генерирует базовый модульный тест, который можно расширить. Модульные тесты записываются с использованием жасмина и выполняются через Карму. Чтобы начать тестирование, выполните следующую команду:

ng test

Эта команда выполнит все тесты в проекте и будет повторно выполнять их каждый раз при изменении исходного файла, будь то тест или код из приложения.

Для получения дополнительной информации также посетите страницу angular-cli github

Начало работы с Angular 2 без углового кли.

Угловой 2.0.0-rc.4

В этом примере мы создадим «Hello World!». приложение с одним корневым компонентом ( AppComponent ) для простоты.

Предпосылки:

• Node.js v5 или новее
• npm v3 или новее

Примечание. Вы можете проверить версии, запустив node -v и npm -v в консоли / терминале.

Шаг 1

Создайте и введите новую папку для своего проекта. Назовем это angular2-example .

mkdir angular2-example
cd angular2-example

Шаг 2

Прежде чем мы начнем писать наш код приложения, мы добавим следующие 4 файла: package.json , tsconfig.json , typings.json и systemjs.config.js .

Отказ от ответственности: те же файлы можно найти в официальном 5-минутном старте .

package.json - Позволяет загружать все зависимости с помощью npm и обеспечивает простое выполнение скриптов, чтобы упростить жизнь для простых проектов. (Вы должны в будущем использовать что-то вроде Gulp для автоматизации задач).

{
  "name": "angular2-example",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "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.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json - настраивает транспилятор TypeScript.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json - typings.json библиотеки распознавания TypeScript, которые мы используем.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

systemjs.config.js - Настраивает SystemJS (вы также можете использовать webpack ).

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application's 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);

Шаг 3

Давайте установим зависимости, набрав

npm install

в консоли / терминале.

Шаг 4

Создайте index.html внутри папки с angular2-example .

<html>
  <head>
    <title>Angular2 example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <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>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app></my-app>
  </body>
</html>

Ваше приложение будет отображаться между тегами my-app .

Тем не менее, Angular все еще не знает, что делать. Чтобы сказать это, мы определим AppComponent .

Шаг 5

Создайте подпапку под названием app где мы можем определить компоненты и сервисы , составляющие наше приложение. (В данном случае, это будет просто содержать AppComponent код и main.ts .)

mkdir app

Шаг 6

Создайте файл app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <ul>
        <li *ngFor="let message of messages">
            {{message}}
        </li>
    </ul>
  `
})
export class AppComponent { 
    title = "Angular2 example";
    messages = [
        "Hello World!",
        "Another string",
        "Another one"
    ];
}

Что происходит? Во-первых, мы импортируем декоратор @Component который мы используем, чтобы дать Angular HTML-тег и шаблон для этого компонента. Затем мы создаем класс AppComponent с переменными title и messages которые мы можем использовать в шаблоне.

Теперь давайте посмотрим на этот шаблон:

<h1>{{title}}</h1>
<ul>
    <li *ngFor="let message of messages">
        {{message}}
    </li>
</ul>

Мы отображаем переменную title в теге h1 а затем *ngFor список, показывающий каждый элемент массива messages , используя директиву *ngFor . Для каждого элемента массива *ngFor создает переменную message которую мы используем в элементе li . Результатом будет:

<h1>Angular 2 example</h1>
<ul>
    <li>Hello World!</li>
    <li>Another string</li>
    <li>Another one</li>
</ul>

Шаг 7

Теперь мы создаем файл main.ts , который будет первым файлом, на который смотрит Angular.

Создайте файл app/main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

Мы импортируем функцию bootstrap и класс AppComponent , а затем AppComponent bootstrap чтобы сообщить Angular, какой компонент использовать в качестве корня.

Шаг 8

Пришло время запустить ваше первое приложение. Тип

npm start

в вашей консоли / терминале. Это запустит подготовленный скрипт из package.json который запустит Lite-сервер, откроет ваше приложение в окне браузера и запустит транспилятор TypeScript в режиме просмотра (файлы .ts будут переданы и браузер обновится при сохранении изменений) ,

Что теперь?

Ознакомьтесь с официальным руководством Angular 2 и другими темами в документации StackOverflow .

Вы также можете редактировать AppComponent для использования внешних шаблонов, стилей или добавления / редактирования переменных компонента. Вы должны увидеть свои изменения сразу после сохранения файлов.

Сохранение Visual Studios в синхронизации с обновлениями NPM и NODE

Шаг 1. Найдите вашу загрузку Node.js, как правило, она устанавливается под файлами C: / program / nodejs

Шаг 2. Откройте Visual Studios и перейдите к «Инструменты»> «Параметры».

Шаг 3: В окне параметров перейдите к разделу «Проекты и решения> Внешние веб-инструменты»

Шаг 4: Добавьте новую запись с вашим местоположением файла Node.js (C: / program files / nodejs), ВАЖНО используйте кнопки со стрелками в меню, чтобы переместить ссылку на верхнюю часть списка.

Шаг 5: Перезапустите Visual Studios и запустите npm install, против вашего проекта, из окна командной строки npm

Пройдя через этот досадный прокси-сервер

Если вы пытаетесь получить сайт Angular2 на рабочем компьютере Windows на XYZ MegaCorp, есть вероятность, что у вас возникают проблемы с прокси-сервером компании.

Есть (по крайней мере) два менеджера пакетов, которым необходимо пройти через прокси:

1. NPM
2. типизации

Для NPM вам нужно добавить следующие строки в файл .npmrc :

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/

Для Typings вам нужно добавить следующие строки в файл .typingsrc :

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
rejectUnauthorized=false

Эти файлы, вероятно, еще не существуют, поэтому вы можете создавать их в виде пустых текстовых файлов. Они могут быть добавлены в корень проекта (то же самое место, что и package.json или вы можете поместить их в %HOMEPATH% и они будут доступны для всех ваших проектов.

Бит, который не является очевидным, и является основной причиной того, что люди считают, что настройки прокси-сервера не работают, это %5C который является URL-кодированием для \ для разделения имен доменов и пользователей. Спасибо Стиву Робертсу за это: использование npm за корпоративным прокси .pac

Начало работы с Angular 2 с помощью backend узла node.js / expressjs (включен пример http)

Мы создадим простой «Hello World!». приложение с Angular2 2.4.1 (изменение @NgModule ) с помощью узла node.js (expressjs).

Предпосылки

• Node.js v4.xx или выше
• npm v3.xx или выше или пряжа

Затем запустите npm install -g typescript или yarn global add typescript для установки машинописных файлов по всему миру

Дорожная карта

Шаг 1

Создайте новую папку (и корневой каталог нашего back-end) для нашего приложения. Назовем это Angular2-express .

командной строки :

mkdir Angular2-express
cd Angular2-express

Шаг 2

Создание package.json (для зависимостей) и app.js (для самозагрузки) для нашего node.js приложения.

package.json:

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.13.3",
    "express": "^4.13.3"
  }
}

app.js:

var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');

server.listen(process.env.PORT || 9999, function(){
    console.log("Server connected. Listening on port: " + (process.env.PORT || 9999));
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );

app.use( express.static(__dirname + '/front' ) );

app.get('/test', function(req,res){ //example http request receiver
  return res.send(myTestVar);
});

//send the index.html on every page refresh and let angular handle the routing
app.get('/*',  function(req, res, next) {
    console.log("Reloading");
    res.sendFile('index.html', { root: __dirname }); 
});

Затем запустите npm install или yarn чтобы установить зависимости.

Теперь наша внутренняя структура завершена. Давайте перейдем к интерфейсу.

Шаг 3

Наш интерфейс должен находиться в папке с именем front внутри нашей Angular2-express .

командная строка:

mkdir front
cd front

Точно так же, как мы сделали это с нашим back-end, нашему интерфейсу нужны файлы зависимостей. Давайте продолжим и создадим следующие файлы: package.json , systemjs.config.js , tsconfig.json

package.json :

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/platform-server": "^2.4.1",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.2",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "typescript": "2.0.2"
  }
}

systemjs.config.js:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    defaultJSExtensions:true,
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*"
  ]
}

Затем запустите npm install или yarn чтобы установить зависимости.

Теперь, когда наши файлы зависимостей завершены. Перейдем к нашему index.html :

index.html:

<html>
  <head>
    <base href="/">
    <title>Angular2-express</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <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>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Теперь мы готовы создать наш первый компонент. Создайте папку с именем app в нашей front папке.

командная строка:

mkdir app
cd app

Давайте main.ts следующие файлы с именем main.ts , app.module.ts , app.component.ts

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from "@angular/http";

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ 
    BrowserModule,
    HttpModule    
  ],
  declarations: [ 
    AppComponent
  ],
  providers:[ ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

app.component.ts:

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'my-app',
  template: 'Hello World!',
  providers: []
})
export class AppComponent { 
  constructor(private http: Http){
    //http get example
    this.http.get('/test')
     .subscribe((res)=>{
       console.log(res);
     });
  }
}

После этого скомпилируйте файлы машинописных файлов в файлы javascript. Перейдите на 2 уровня вверх от текущего каталога (внутри папки Angular2-express) и выполните приведенную ниже команду.

командная строка:

cd ..
cd ..
tsc -p front

Структура нашей папки должна выглядеть так:

Angular2-express
├── app.js
├── node_modules
├── package.json
├── front
│   ├── package.json
│   ├── index.html
│   ├── node_modules
│   ├── systemjs.config.js
│   ├── tsconfig.json
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.component.js.map
│   │   ├── app.component.js
│   │   ├── app.module.ts
│   │   ├── app.module.js.map
│   │   ├── app.module.js
│   │   ├── main.ts
│   │   ├── main.js.map
│   │   ├── main.js

Наконец, внутри папки Angular2-express запустите команду node app.js в командной строке. Откройте свой любимый браузер и проверьте localhost:9999 чтобы увидеть свое приложение.

Давайте погрузиться в Angular 4!

Угловое 4 теперь доступно! На самом деле Angular использует semver с угловым 2, что требует увеличения основного числа при введении изменений. Угловая команда отложила функции, которые вызывают нарушения, которые будут выпущены с помощью Angular 4. Угловая 3 была пропущена, чтобы выровнять номера версий основных модулей, потому что у маршрутизатора уже была версия 3.

Согласно команде «Угловая», приложения с угловым 4 будут занимать меньше места и быстрее, чем раньше. Они отделили пакет анимации от пакета @ angular / core. Если кто-то не использует анимационный пакет, значит, дополнительное пространство кода не закончится в процессе производства. Синтаксис привязки шаблона теперь поддерживает синтаксис if / else. Угловая 4 теперь совместима с последней версией TypScript 2.1 и 2.2. Итак, Angular 4 станет более захватывающим.

Теперь я покажу вам, как настроить Angular 4 в вашем проекте.

Давайте начнем Угловую настройку тремя способами:

Вы можете использовать Angular-CLI (интерфейс командной строки), он будет устанавливать для вас все зависимости.

• Вы можете перейти от углового 2 к угловому 4.

• Вы можете использовать github и клонировать Angular4-шаблон. (Это самый простой.)

• Угловая настройка с использованием Angular-CLI (интерфейс командной строки).

Прежде чем вы начнете использовать Angular-CLI, убедитесь, что на вашем компьютере установлен узел. Здесь я использую узел v7.8.0. Теперь откройте терминал и введите следующую команду для Angular-CLI.

npm install -g @angular/cli

или же

yarn global add @angular/cli

в зависимости от используемого менеджера пакетов.

Давайте установим Angular 4 с помощью Angular-CLI.

ng new Angular4-boilerplate

cd Angular4-schemeplate Мы все настроены для Angular 4. Его довольно простой и простой метод.

Угловая настройка путем перехода от углового 2 к угловому 4

Теперь посмотрим на второй подход. Я покажу вам, как перенести Angular 2 на Angular 4. Для этого вам нужно клонировать любой проект Angular 2 и обновлять зависимости Angular 2 с помощью функции Angular 4 Dependency в вашем package.json следующим образом:

"dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/core": "^4.0.1",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/router": "4.0.2",
    "typescript": "2.2.2"
   }

Это основные зависимости для Angular 4. Теперь вы можете установить npm и затем запустить npm для запуска приложения. Для справки мой package.json.

Угловая настройка из проекта github

Перед началом этого шага убедитесь, что у вас установлена ​​git на вашем компьютере. Откройте ваш терминал и клонируйте угловой4-шаблон, используя команду:

[email protected]:CypherTree/angular4-boilerplate.git

Затем установите все зависимости и запустите его.

npm install

npm start

И вы закончили настройку Angular 4. Все шаги очень просты, поэтому вы можете выбрать любой из них.

Структура каталога углового4-шаблона

Angular4-boilerplate
-karma
-node_modules
-src
   -mocks
   -models
      -loginform.ts
      -index.ts
   -modules
      -app
        -app.component.ts
     -app.component.html
      -login
    -login.component.ts
    -login.component.html
    -login.component.css
      -widget
     -widget.component.ts
     -widget.component.html
     -widget.component.css
    ........    
   -services
       -login.service.ts
    -rest.service.ts
   -app.routing.module.ts
   -app.module.ts
   -bootstrap.ts
   -index.html
   -vendor.ts
-typings
-webpack
-package.json
-tsconfig.json
-tslint.json
-typings.json 

Основное понимание структуры каталогов:

Весь код находится в папке src.

папка «mocks» предназначена для макетов данных, которые используются в целях тестирования.

model содержит класс и интерфейс, которые используются в компоненте.

modules содержит список компонентов, таких как приложение, логин, виджет и т. д. Все компоненты содержат файлы машинописных, html и css. index.ts предназначен для экспорта всего класса.

services содержит список служб, используемых в приложении. Я разделял службу отдыха и обслуживание различных компонентов. В службе отдыха есть различные методы http. Служба входа в систему работает как посредник между компонентом входа и службой отдыха.

Файл app.routing.ts описывает все возможные маршруты для приложения.

app.module.ts описывает модуль приложения как корневой компонент.

bootstrap.ts будет запускать все приложение.

Папка webpack содержит файл конфигурации webpack.

Файл package.json предназначен для всех списков зависимостей.

karma содержит конфигурацию кармы для модульного теста.

node_modules содержит список пакетов.

Давайте начнем с компонента входа. В login.component.html

<form>Dreamfactory - Addressbook 2.0 
 <label>Email</label> <input id="email" form="" name="email" type="email" /> 
 <label>Password</label> <input id="password" form="" name="password" 
 type="password" /> 
 <button form="">Login</button>
</form>

В login.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Form, FormGroup } from '@angular/forms';
import { LoginForm } from '../../models';
import { LoginService } from '../../services/login.service';

@Component({
    selector: 'login',
    template: require('./login.component.html'),
    styles: [require('./login.component.css')]
})
export class LoginComponent {

    constructor(private loginService: LoginService, private router: Router, form: LoginForm) { }

    getLogin(form: LoginForm): void {
      let username = form.email;
      let password = form.password;
      this.loginService.getAuthenticate(form).subscribe(() => {
          this.router.navigate(['/calender']);
      });
    }
}

Нам нужно экспортировать этот компонент в index.ts.

export * from './login/login.component';

нам нужно установить маршруты для входа в app.routes.ts

const appRoutes: Routes = [
   {
       path: 'login',
       component: LoginComponent
   },
   ........
   {
       path: '',
       pathMatch: 'full',
       redirectTo: '/login'
   }
];

В корневом компоненте, файле app.module.ts вам просто нужно импортировать этот компонент.

.....
import { LoginComponent } from './modules';
......
@NgModule({
    bootstrap: [AppComponent],
    declarations: [
       LoginComponent
       .....
       .....
       ]
      ..... 
  })
  export class AppModule { }

и после этого установить npm и запустить npm. Ну вот! Вы можете проверить экран входа в свой локальный хост. В случае каких-либо трудностей вы можете обратиться к угловому4-шаблону.

В принципе, я могу чувствовать меньше строительный пакет и более быстрый отклик с помощью приложения Angular 4. И хотя я нашел точно подобный Angular 2 в кодировании.