What is Angular?
Angular is the next version of the open source framework AngularJS. The code base was completely rewritten and now uses the TypeScript language as the base. With the introduction of tools such as the command line tool Angular-CLI, projects can be created, expanded and transferred to production faster. Angular JS (Version 1.x) also “Angular 2 .. +” is a TypeScript-based front-end web application framework.
Random points:
• The next version of the AngularJS framework
• Complete new development of the predecessor
• Has adopted many concepts from AngularJS
• Based on the TypeScript language
• Platform for the development of Web, Desktop and Mobile applications
• Aims at professional web development for enterprise applications
ANGULAR RESOURCES (Development)
IDEs:
Angular IDE von Webclipse
Built first and foremost for Angular. Turnkey setup for beginners; powerful for experts.
IntelliJ IDEE
Capable and Ergonomic Java * IDE
Visual Studio Code
VS Code is a Free, Lightweight Tool for Editing and Debugging Web Apps.
WebStorm
Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js
Tooling:
Angular CLI
The official Angular CLI makes it easy to create and develop applications from initial commit to production deployment. It already follows our best practices right out of the box!
Angular Playground
UI development environment for building, testing, and documenting Angular applications.
Angular Universal
Server-side Rendering for Angular apps.
Augury
A Google Dev Tools extension for debugging Angular applications
What do we need?
install Node.js and npm and an editor, for example Visual Studio Code
Run this command in your terminal to check if Node.js is installed: node -v
To confirm that you have installed npm, you can run this command in your terminal: npm -v
Extension with TypeScript for Visual Studio Code :
• TSLint
• Auto Import
• Angular Files
• angular2-inline
• Debugger for Chrome
Then we install Angular :
• npm install -g @angular/cli
• ng new my-app
• cd my-app
• ng serve
To do this, the app is compiled and the local server started: https://localhost:4200/
Development environment:
With this we show you how you can create a project with PHPStorm.
Please install PHPStrom
- click New Project
- click Angular CLI
- write your location and click on create
- You can see your project here: MeineApp2
here is an example of Angular-cli.json
example of a complete configuration:
- “$schema”: formal description of the structure of data.
- “project”: Name your app
- “apps”: the configuration
- “root”: Core directory
- “outDir”: The path to the output file directory.
- “assets”: Start-Anhalt
- “index”:Your Start-Website
- “main”: TypeScript-Date
- “polyfills”:Code snippet
- “test”: configure test
- “tsconfig”: TypeScript-Compiler-Configuration
here is an example of package.json
This file is used to provide npm with information to identify the project and deal with the project’s dependencies.
How can we use json package with ng serve?
With the command npm run you can see all scripts that are defined in the package.json file of the project.
- click Select Run / Debug Configuration
- click npm
- write your name and package.json as in the example
- click OK
2-You see here: npm run start
1-Click go
here is an example of app.module.ts and main.ts
loaded by AppComponent and AppModule
About Fellow Consulting
Fellow Consulting AG, based in Poing near Munich, has been advising clients on digitizing their business processes for more than 10 years.
We know how our customers can implement their digital vision. Together with our partners infor_ Amazon AWS, Microsoft Azure, SugarCRM, and Ephesoft, we bring the mission of digitalization to life.
We act as an operational and strategic specialist for our clients as well as a sparring partner for the everyday challenges of digital transformation.