ngAnimate can be used with various directives like ngRepeat, ngView, ngInclude, ngIf, ngMessage etc.
In this post we will use animations with ngView
Here we are using Brackets IDE from Adobe, but you are free to use others, for example, Sublime Text, WebStorm from JetBrains etc.
Single-page application (or SPA) are applications that are accessed via a web browser like other websites but offer more dynamic interactions resembling native mobile and desktop apps. The most notable difference between a regular website and SPA is the reduced amount of page refreshes. SPAs have a heavier usage of AJAX- a way to communicate with back-end servers without doing a full page refresh to get data loaded into our application. As a result, the process of rendering pages happens mostly on the client-side.
Figure: Angular Tutorial – Single Page Application
For example, if you go through Gmail, you will notice that while opening mail from the inbox will only fetch the email and display it in place of the e-mail list. The rest of the components like sidebar, navigation bar etc. are not reloaded. It only refreshes the DOM (Document Object Model) for the required section. So, this reduces the overhead loading of the website.
Figure: Angular Tutorial – Angular Features
- Progressive web apps
It uses modern web platform capabilities to deliver an app-like experience. It gives high performance, offline, and zero-step installation. So, working with Angular is pretty much easy.
You can build native mobile apps with strategies using Ionic Framework, NativeScript, and React Native.
Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you’ve learned for the web plus.
Speed and Performance
- Code generation
You can use any technology with Angular for serving the application like node.js, .NET, PHP and other servers.
- Code splitting
Angular apps load quickly with the new Component Router, which delivers automatic code-splitting, so users only load code required to render the view they request.
Quickly create UI views with simple and powerful template syntax.
- Angular CLI
Command line tools: You can easily and quickly start building components, adding components, testing them, and then, instantly deploy them using Angular CLI.
Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs like Microsoft’s VS Code.
Full Development Story
With Karma for unit tests, you can identify your mistake on the fly and Protractor makes your scenario tests run faster and in a stable manner.
Building Blocks of Angular
The main building blocks of Angular are:
- Data binding
- Dependency injection
Figure: Angular Tutorial – Architecture
Next, in our Angular Tutorial, let us talk about each of them in detail. Let us first understand, what are modules?
Angular apps are modular and to maintain modularity, we have Angular modules or you can say NgModules. Every Angular app contains at least one Angular module, i.e. the root module. Generally, it is named asAppModule. The root module can be the only module in a small application. While most of the apps have multiple modules. You can say, a module is a cohesive block of code with a related set of capabilities which have a specific application domain or a workflow. Any angular module is a class with @NgModule decorator.
- declarations: The classes that are related to views and it belong to this module. There are three classes of Angular that can contain view: components, directives and pipes. We will talk about them in a while.
- exports: The classes that should be accessible to the components of other modules.
- imports: Modules whose classes are needed by the component of this module.
- providers: Services present in one of the modules which is to be used in the other modules or components. Once a service is included in the providers it becomes accessible in all parts of that application
- bootstrap: The root component which is the main view of the application. This root module only has this property and it indicates the component that is to be bootstrapped.
If you are not using a framework, you have to push data values into the HTML controls and turn user responses into some actions and value updates. Writing such push/pull logic is tedious, error-prone, and a nightmare to read. Angular supports data binding, a mechanism for coordinating parts of a template with parts of a component. You should add binding markup to the template HTML to tell Angular how to connect both sides.
Figure: Angular Tutorial – Data Binding