As a software developer, you have a big amount of choices. For me the world is like a big school: what do I learn next?
One framework that is currently getting a great popularity is Angular. The version numbers are increasing and the community is always growing.
But why should you use AngularJS? Is it easy for web app development?
Angular is a web framework for front-end development that offers all the general advantages of frameworks.
AngularJS framework simplifies repetitive tasks or removes them entirely. This means that functionality is available quickly and in the same way, is encapsulated and can be reused.
What are the advantages of web development with AngularJS?
Architecture
Angular uses a hierarchy of components for its architecture. Therefore, the core of every application is a component tree. Components always manage part of the view and can contain other components.
The components themselves are kept in MVC architecture. This architecture has the main advantage that the connection of logic and view occurs in a defined time and place. With a framework like Angular, this chaos is reduced by separating view and data.
Angular enables the data to be mocked at an early stage and interfaces to be defined in close cooperation with the back-end development department. Once the database (and web API) is up and running, the front-end can be used quickly.
If you don’t use a framework, view and logic are often undefined intertwined. One then often has the feeling that it is better to rewrite the whole project because one now knows the specifications … until the next necessary change is made.
However, Angular is not only restricted to components, but with several services offers the possibility of integrating any functionality that is detached from a view. Services here are simple TypeScript classes that can be fetched into the components via your own dependency injection system if required. A good example of service is a data service that regulates the request to web APIs and outputs data to the components.
Session storage would also be a service. Of course, the functionality itself can also be implemented in one component, but data functionality is probably used across components – the clue: Angular ensures good code through the extremely simple use of the dependency injection: the developer writes a service and stays ensured that the correct instance of the service is available in the component. Magic!
Functionality
Angular comes with a lot of standard functions. Above all, I am always amazed at how easily data is displayed in the view using the logic.
With automatic “binding” from view to logic (targeting events), from logic to view (targeting DOM properties) or two-way binding (both methods connected), Angular creates a very simple and efficient way to transfer dynamic data to one HTML template display. Displaying a variable data field in a heading can be done with a single expression in the template.
<p> I am a {{adjective}} text </p>
If the variable ‘adjective’ changes in the class, Angular automatically ensures that the DOM element is updated.
With such an expression it is just easy to deal with the whole UI and event handling with one input:
<input [(ngModel)] = “myInput” />
It is sufficient to create a variable called ‘myInput’. Angular uses a sophisticated change detection system to intercept the event of the user input (the user types in) and also to display the data in the input, for example if ‘myInput’ has been pre-assigned from the database.
Angular knows its domain well and ensures that http communication (with web APIs) is available as easily as possible. All standard http calls and various parameter settings are possible with the supplied http module, so that I would not think of a request that could not be triggered with it.
In addition, Angular uses the ‘rxJS’ library which, in contrast to promises, works with observables. Without going too far here, this approach is more modern and more extensive than promises.
Technology stack
Angular comes with its own CLI. As a professional front-end developer, this is one of the most important tools in my work. With the CLI (Command Line Interface), the Angular team has built an application that allows using simple commands to create an application, add components or services, start the application, test it and run it under different environments.
The CLI is a powerful tool for the developer (and I’m very grateful for it). Angular is based on the NodeJS stack, which means that when developing Angularjs applications, you will usually start your own web server locally, which compiles and outputs the source files. Of course, everything has a live sync: if you change the source files, Angular-CLI recognizes this and updates the build. Specifically, this means: change, save, see – very useful in the front-end world.
To manage development and project dependencies, webpack is commonly used, which manages node packages (npm). Downloading, updating and installing new packages is very easy – installing an application is done with a single command.
In addition, npm offers an enormous number of packages, from individual components with prefabricated functionality to entire CSS frameworks (bootstrap, material). Angular itself is also its own npm package.
Typescript is used on the logic page to write the Angular application itself – a language that is transpiled into Javascript and for which applies the following: Every Javascript expression is a valid Typescript expression (but not the other way around).
Adaptability
The creators of Angular have taken great care to make the implementation and structures of Angular always adaptable. For example, through the dependency injection, so-called providers can provide their own methods of how components and services are provided.
When using some other frameworks, I have often noticed that certain instructions or statements are (and must be) implemented over and over again. In Angular, only the entry point of the application is mandatory. For each component there are only links to the template & CSS file and the name that is required – the rest is a real Typescript class (without inheritance). However, if you write a service you are completely free to implement it. Likewise, templates and CSS have best practices and conventions, but with little or no compulsion.
Community
Last but not least, one of the nicest things about Angular: it’s damn popular.
Sure, Angular isn’t perfect, just like Google isn’t perfect, but like Google, Angular is just too damn common. And that has some advantages.
On the one hand, there is an enormous amount of help with problems that arise during development. Tutorials, resources, books or Stack Overflow entries as well as workshops and meetups.
On the other hand, it is ensured with great popularity that Angular will continue to be developed. Google does this not for charity, but, of course, to gain power. If the use of Angular falls below a certain value, it is no longer worthwhile to further development of the project. And we all know how quickly cool technologies sink into the Internet because nobody uses them anymore.
Conclusion
Personally, I have to say that I enjoy developing applications with Angular. I hope that you have finally found the answer to your question “AngularJS – is it easy for web app development?”. Much has not yet been mentioned in this article, for example the excellent option of automated testing (Jasmine, Karma, Protractor) or that you can easily develop cross-platform apps (Android, iOS) with Angular, but that would go beyond the scope.
I can only recommend everyone to give Angular a try and play around with it.
