Is Angular worthy

futape / angularjs-in-one-day-german

Preface

This is a German translation of the article Ultimate guide to learning AngularJS in one day Motto by Todd, published October 2, 2013.
This document was published on September 11, 2015 under a Creative Commons BY 4.0 license.

What is AngularJS?

Angular is a client-side MVC / MVVM framework written in JavaScript, which is used for the development of modern single page web applications (and websites). This article is a complete crash course based on my experiences, recommendations, and best practices from working with Angular.

terminology

Angular has a short learning curve at the beginning, which will be riddled with ups and downs as you learn beyond the basics. The most important thing is to get used to the terminology and to understand what it means in the sense of "MVC to think". MVC stands for Model-View-Controller. In the following, I explain the basic APIs that Angular provides to users, as well as some information on terminology.

MVC

You have probably heard of MVC as a tool used by many programming languages ​​to structure and architecture applications / software. Here is a brief summary of what each component means:

  • Model: The data (structure) behind a certain area of ​​the application. Usually exchanged as JSON in Angular. If you are new to JSON, it is best to find out more about it first, as it is a fundamental means of exchanging information between the server and the view in Angular. For example, a collection of User IDs can be represented as the following model:

    This data can either be queried from the server via XHR (XMLHttp Request) - as you would use the function in jQuery, Angular provides you - or it can be embedded directly into the HTML code of the website (for example when the page is processed by PHP and reading out the information from a database). Changes to the model can then be made and sent back to the server or database.

  • View: The description of the view is simple: It is your HTML code and / or the output rendered (by Angular). When using an MVC framework, model data is downloaded and analyzed, on the basis of which the view / HTML and the information displayed are then updated.

  • Controller: Just like the name suggests - they control. To be more precise, they control data. Controllers are the direct link between server and View, the Middle Man, which takes care of the processing and updating of the data via the communication between the server and the client.

Preparing an AngularJS project - the basic structure

First, the basic structure of the Angular project must be set up. This is made up of several components, including the declaration to define the application Controller, which communicates with the view, and some DOM bindings as well as the integration of Angular itself. The following is an exemplary basic structure:

HTML with information:

An Angular Module and Controller:

Before you can start working on the app, you need a Angular Module which will house the entire logic of the app. There are several ways to declare modules. Multiple method calls can be chained together in the following ways (I don't particularly like this type of notation):

Defining a global module instead has proven to be the best or better practice in Angular projects I've worked on. Missing semicolons and accidentally breaking the "chain" turned out to be counterproductive and prone to unnecessary compilation errors. Instead, define a global module:

Each new file accesses this