AngularJS-Next big frame

AngularJS

Angularjs is the next big web App.

Angularjs If you're designing for a web app, it's HTML. With data binding, MVW, MVVM, MVC, declarative templates for dependency injection, and excellent testability are all done with pure client-side JavaScript! AngularJS is a JavaScript MVC framework that creates rich client applications that are well-organized, rigorously tested, versatile, powerful, and flexible. You still need to have a server backend, but most of the user interaction logic will be gracefully placed on the client.

Angularjs is an open-source Web application framework that is maintained by Google and the community, it can create single-page applications, and a page application requires only Html,css and JavaScript on the client. Its goal is to enhance the functionality of the page's model-view-control (MVC) to simplify development and testing.

It is a refreshing new module Web application built on a thick client. A robust framework is built on the commercial application network. It encourages best practices, develops models and develops high-quality, maintainable, modular applications. Its team is world class and the community is excellent, and it combines the best features to create Web apps.

AngularJS allows you to write client-side Web applications if you have a smart browser. It allows you to use old-fashioned HTML as your template language, allowing you to extend the HTML syntax to express your application components clearly and concisely. It automatically synchronizes your UI (the view layer) with data from your JavaScript object (the model layer) through two-way data binding. To help you better build your application and more convenient testing, Angularjs tells the browser how to rely on injection and control inversion. It helps to improve the ease of allowing asynchronous callbacks and delays, making client navigation and deep linking use hash bang format addresses and HTML5 Pushstat with server-side communication.

The Angular offers:

• Introduction of structural models (MVC,SPA, etc.)

• Enhanced HTML support for new features.

• Avoid direct DOM manipulation to avoid the difficulty of debugging non-traceable code.

• Includes low coupling and high reusability

• Application internal Rule Testing

• View templates closer to server-side templates

AngularJS is based on declarative programming patterns that users can develop based on business logic. This framework completes the automatic data synchronization mechanism by populating the HTML content and doing two-way data binding. Finally, the AngularJS enhanced DOM operation enhances testability.

Design intent:

• Decouple DOM operations from the application. Enhanced testability.

• Applying testability is just as important as developing code. The complexity of the test is strongly related to the design structure of the code.

• The client is decoupled from the server. The concurrency processing mechanism is implemented to enhance the reusability of code.

• guide you through the development process: from the UI to the business logic to the end of the test session.

Architecture

Key features of the ANGULARJS

Testability, Dependency injection, separation of logical/view layers, and co-ordination between designers and developers are some of the things developers look forward to in a framework. Angular absolutely satisfies the above requirements. In the JS field, the angular can be adapted to the refreshing demands of this writing look amazing.

Bidirectional data binding:

Data binding is probably the coolest and most useful feature in Angularjs. It will save you a lot of boilerplate code writing. A typical Web application can contain up to 80% of the code base, such as traversing, manipulating, and listening to the DOM. Data binding makes it not necessary to write this code so you can focus on your application.

Consider the model of your application for single source trust. Your model is where you go to read or update everything in the application. This projection is seamless and does not cost you a single pawn. ANGULARJS bidirectional data binding handles synchronization between the DOM and the model, and vice versa.

Template

In Angularjs, the template is the native HTML. Made a view-based enhancement. The best thing about this is that the workflow for developers and designers is being narrowed. Designers work on HTML to complete the design, development directly on the HTML for the corresponding functional development.

1234567

<div ng-controller="AlbumCtrl">  <ul>    <li ng-repeat="image in images">      "{{image.thumbnail}}" alt="{{image.description}}">    </li>  </ul></div>

Mvc

Angularjs introduced the MVC pattern of software design. This is benevolent see for the user. Angularjs is not full MVC but MVVM (Model-view-viewmodel).

• Model

The model is that data models are some JavaScript objects. There is no need to inherit from the parent class, or the proxy wrapper or use Getter/setter. Using vanilla JavaScript is easy and convenient.

• View

A view is an object that provides special data or methods to support a particular scene.

The View object is $scope. $scope is a simple JS object that provides some simple APIs to monitor its state.

• Business Control

The controller sets the initial state of the $scope object and subsequent action associations.

• Page

The. Angularjs handles the presentation of the associated business logic in HTML mode.

This lays out the architecture of the application. $scope object has a reference relationship to the data, the controller defines the behavior, the view handles the layout of the page, and the corresponding processing jumps.

Dependency Injection

AngularJS provides a subsystem that relies on injection to help developers reduce development complexity and improve test efficiency. Dependency Injection Decouples The business code from the configuration implementation, improving the testability of the code.

With Di you do not have to create the specified object dependencies each time, but later configure. This allows you to allocate it on demand without having to make or find it yourself. Just like saying "Hey I need X", Di will help you create and send it to you.

Benefits that can be experienced with dependency injection include:

• Code is easier to maintain.

• The API is more concise and abstract.

• The code is easier to test.

• The code is more modular and more reusable.

Instructions

Directives can be used to create custom HTML tags that can be used as new custom controls. They can also be used to "render" elements that have certain behavior, or they can manipulate DOM properties in some interesting ways. An instruction is something that introduces a new syntax. By combining separate components into one component, this way of creating an application makes adding, modifying, and deleting pages incredibly simple. Directives are a very powerful and unique feature of ANGULARJS.

From a higher level, the instructions on the DOM element (such as attributes, element names, annotations, or CSS) are passed to the AngularJS's HTML compiler ($compile) to pass the specified function to the DOM element or to the child element.

Angular has many such built-in directives, such as Ngbind, Ngmodel, and Ngview.y, which can also be customized, and the HTML compiler automatically establishes the instruction map for DOM elements when the Angular is started.

Test

AngularJS realized that the code that JS writes needs to be tested. This was at the beginning of the AngularJS design, so the angular of the testability is self-evident.

JS is an explanatory dynamic language, the design of the corresponding test must not be underestimated.

AngularJS is designed entirely on the basis of measurable foundations. It provides end-to-end unit testing. The API documentation is a detailed test coverage description.

AngularJS Bootstrap Process

Learning curve

Just beginning to learn augular that developing applications requires a considerable programming foundation. I have to say that this is really a great development framework that requires developers to design low-coupling and maintainable applications. The complexity of using ANGULARJS is like using Php,ruby on rails and so on, all need to deal with dependency injection, routing, domain value and so on. It's not a new technology either. Angular just carry on.

JS MVC Frameworks

MVC (Model-View-controller) is a set of design patterns that can be applied hierarchically. Decouple the data (model) from the user view (view), process the business logic through the intermediate controller (Controllers), user input, and the corresponding logical jump. The modern JS framework provides easy operation as well as SOC (business separation) to better implement MVC.

MVC has a lot of benefits for JS-improved high-reliability code. has been tested in a number of languages and is highly reliable.

The three-tier structure implemented by MVC:

1. Model: Is the part of your application that handles application data logic.
   Typically, model objects are responsible for accessing data in the database.

2. View: Is the part of the application that handles the display of data.
   Typically views are created from model data.

3. Control: Is the part of the application that handles user interaction.
   Usually the controller is responsible for reading data from the view, controlling user input, and sending data to the model.

JavaScript ' MVC ' can help build our code, but it's not as good as a book. Some frameworks put controllers in view mode (such as backbone.js) and some frames are all mixed together. Besides there are other MVC patterns, like MVP (Model-view-presenter) and MVVM (Model-view ViewModel). Even with the MVC design model, different languages have different implementations. Like, some MVC implementations will have their own view change controller or controller view. These frameworks are called mv* frameworks, meaning that you will have models, views, but there are other parts.

For a long time AngularJS is a very standard MVC (or in the client implementation of this piece), but in later time with code refactoring and an API rewrite, it is now more MVVM mode – $scope object is considered a view model and then is called the controller's functional module wrapper. There are some benefits in distributing this to MV mode. It will help developers to develop framework-based code using a simple API. It is also possible to unify the development of the consensus. The idea of using MVC is to decompose the structure and then decide which mv* frame to use by setting parameters, Igor Minar (Core ANGULARJS team) declares Angularjs as MVW framework-model-view-whatever. Whatever is a custom requirement.

Why use the JS MVC framework

Take a look at the differences between using MVC and the traditional development model

Traditional Web applications

The traditional mode processing business requests are all placed on the server side, the front section is just the page interaction (thin client, Fat server). This will have the following issues:

• Weak distributed processing – servers handle a lot of business, and the performance is worrying.

• corresponding pressure – the response speed of traditional applications is a mishap.

• It is more complicated to develop the application of –C/S structure with complex degree. Because each request response involves an interactive design, it is prone to error. The unresolved framework for this problem is endless, but usability needs to be refined.

• Risk of attack – mixed business code and interactive code increase the probability of the code being attacked. It is not easy to control security in highly complex applications.

• The load on the server is too large – all client requests need to be processed by the server, which means that all sessions wait 30 minutes before being released, when the customer request has been processed, but the system resources are still in use, greatly reducing system performance and scalability.

• Offline processing – Having offline processing capability is the competitive edge of Web applications, especially in applications that handle a large number of client requests, and offline processing of some of the business is essential.

• Weak interoperability – Code logic is difficult to split due to promiscuous writing, and extended functionality becomes complex.

JSMVC WEB Application

The JS MVC Web application architecture focuses on transferring the server-side logic processing to clients and implementing thin client Web applications. The benefits of the Client/server model's processing logic and the code being delegated to the browser are:

• Extensibility: It's easy to see the benefits of using client-side processing in terms of scalability. As the server processing power remains the same, the more customers use the application, the more client machines can be used (until you buy more servers).

• Real-time user response: The client code can immediately react to the user's input without waiting for the network to be transmitted.

• Well-structured programming model: The user interface effectively separates the business logic of the application. Such a model provides a more concise approach to security. All requests made through the user interface, we can conduct security checks before the data passes through various interfaces. The use of complex analysis processes makes security analysis more complex. On the other hand, with a clear Web services interface, there is a clear gateway security work and security analysis more simple and intuitive, vulnerabilities can be quickly found and corrected.

• Client state Management: Maintaining temporary session state information on the client can reduce the memory load on the server. This also allows customers to take advantage of more restful interactions to further improve scalability and time to use caching.

• Offline Applications-If the code for most applications is already running on the client, creating an offline version of the application can be sure to make it easier.

• Interoperability: By interacting with structured data and minimal APIs, it's easier to connect additional consumers and producers to interact with existing systems.

In order to develop and implement a client Web application, we need to organize our project structure so that it is easier to manage and maintain later. When an application has more than dozens of lines of script, the application becomes more and more difficult to manage if the functionality between its components is not handled separately. When we started developing a Web application, we might find it simple to do it through a DOM manipulation library (such as jquery) and some useful plugins. This makes it easy for us to be masked by the application of jquery's nested callback function and the DOM element without any organizational structure. To avoid the previously mentioned problem, we use spaghetti code, a term describing codes that is difficult to read and difficult to maintain because of lack of organizational structure. Like using the DOM operations library such as jquery and some other utility libraries, we can make it easier to build a Web page. However, these libraries do not work when we build the Web application.

Web applications are not like a normal web page, they tend to interact with users and need to communicate with back-end servers in real time. If you're not working with the MVC framework, you'll end up writing confusing, unstructured, non-maintainable, non-testable code. To avoid "spaghetti" code, JavaScript developers must first understand what this pattern provides. This allows us to see what these frameworks can do to make things different.

When building a single-page application using JavaScript, you may find yourself writing a lot of code that can compose a MV * framework, regardless of whether you have a complex user interface or just to reduce the number of HTTP requests. In the beginning, it's not a very difficult thing to use your own way to avoid "spaghetti" code writing an application framework, but it's not likely to write code levels like Angular/backbone.

We'll find that more people tend to build an application instead of trying to combine DOM operations libraries, templates, and routes together. The mature MV * Framework usually includes not only a lot of similar functional code that you find yourself writing, but also a lot of problems that you have encountered and have solved. The framework saves you a lot of time, which is where the framework cannot underestimate the value.

Today's browsers offer a rich set of features that are becoming more powerful, making it possible not only to build sophisticated Web applications in JavaScript, but also to become increasingly popular. According to the HTTP archive data, the size of the JavaScript code deployed this year has increased by 45%.

With the popularity of JavaScript climbing, our client applications are much more complex than before. An application development requires multiple developers to work together, so it is important to write maintainable and reusable code in the new Web application era. Design patterns are important for writing maintainable and reusable code. Over the past few years, there have been a lot of JavaScript MVC frameworks that have been designed and developed, such as Angularjs,backbone.js, Ember.js, and many other frameworks. While they all have their unique advantages, each framework encourages developers to follow a certain form to write more structured JavaScript code.

When to use a JS mv* framework

If you're building an app and its clients have many heavyweight features that are hard to handle with pure JavaScript, you should consider using an MVC framework. If you choose an error, you will miss the functionality provided by the MVC framework and fall into the position of reinventing the wheel.

It is important to note that if you build an application that has many heavyweight features on the server side (that is, view generation/presentation logic) and does not have much interaction with the client, you will find that using the MVC framework is like overkill. A better choice in that case is to manipulate the library with a simpler DOM with little additional functionality.

The following list is not exhaustive, but we hope it will provide a good reason to help you decide whether an MVC framework should be used in your application:

• Your app needs to connect asynchronously to the background

• Your app has this feature, it doesn't need to reload the entire page (for example, add a comment to the blog, no lower limit scrolling)

• Most views or data operations will be done in the browser, not on the server side

• The same data needs to be rendered in different ways on the page

• Your app has a lot of trivial interactions to modify data (buttons, switches)

Examples of better Web applications that meet these conditions are Google Docs,gmail or Spotify.

Client/server architecture for Web applications

The world has been changed and some of the applied logic has been moved to the client. This scenario is described here when we need to somehow process all the data from the server. The JS MVC Framework encourages moving the presentation logic from the server side to the client, implementing RIA (Rich-internet-apllication), a client/server architecture under a traditional Web application, and a client/server architecture under JS MVC based on Web applications.

MVC on the client side can handle the entire MVC stack. If you use both server and client MVC, you will replicate your model and path. MVC on the client side basically allows you to connect your server to the client. Why does your server send the view layer? Why not send a JSON-formatted model and load it to the client side to let the client render the view. You can even set a route for it in the future. Why does the server handle routing? The client can do this. Just allow the client to access your restful database, and you don't need any server-side MVC.

One of the more popular patterns that contain client-side services is that the backend RESTful API sends data model clients through JSON using the MVC pattern processing app.

Client-side MVC with Server-side RESTful API

Data Flow

Comparison of Angularjs and other JS MVC frameworks

In the battle with other JS MVC frameworks, Angularjs has won. It has proven itself to be the most mature of all JS MVC frameworks. Here is the data for argument

Community support

(Data from github.com)

(Data from stackoverflow.com)

Over time, the trend of interest

(August 2011-June 2014)

(Previous year)

Usage statistics

Feature comparison

Getting Started with users

Job trends

Compare Angularjs and Dojo-like enterprise-class Toolsets (Toolkit)

Dojo Toolkit:

Dojo Toolkit is an open source modular JavaScript class library dedicated to simplifying cross-platform javascript/ajax applications and websites. Dojo is a JavaScript framework for large-scale client Web development. For example, dojo extracts an API collection that masks various browser differences.  In addition, Dojo's functionality includes the framework for defining modular code and managing their interdependencies; Provides a build toolset that can be used to optimize JavaScript and CSS code, generate documents, and run a single test; Support internationalization, localization and accessibility (accessibility); Provides a rich range of common tool classes and user interface components (widgets).

• Community support

	AngularJS	Dojo
Followers/Favorites	25760	300
Fork Count	9136	216
Contributing people	877	59
Number of Releases	92	147

• Mvc

The angular development team has introduced MVC design patterns into angular in many ways, so that development must follow this MVC design pattern as well. Angularjs does not implement MVC in a traditional way, but is closer to MVVM (Model-view-viewmodel), and is sometimes collectively referred to as mv*. MVC is at the heart of angular, and angular provides native support for MVC design patterns that can be easily applied to the development of Web applications.

Dojo's Toolkit provides a standalone toolkit for the JS application to implement MVC. Dojo does not provide a complete MVC implementation for the JS application, but rather uses the MVC tools/components in it, depending on the needs of the application itself. The package that dojo provides for MVC functionality is DOJOX/MVC. This DOJOX/MVC package focuses on client view-to-model data binding, provides support for data binding/controller in a view only, and does not provide support across multiple view at the application level (for example , navigation (Navigation) support.

In dojo, the level of focus in an MVC application, such as routing or navigation, must be handled with another package (Dojox/app), and in the ANGULARJS framework, these concerns are handled by the framework itself.
The status of the Dojox/mvc module is now still "experimental", so it is still unstable, as the following article says (http://dojotoolkit.org/reference-guide/1.10/dojox/ Index.html#dojox-index), while angular is a more validated, stable and mature JS MVC framework.

• SPA

Angularjs is a popular full-featured spa framework. Some inherent features of ANGULARJS support the development of single-page applications. Angular supports the spa with the following features:

• Inline view (Nested views)

• Controller inheritance

• Routing (Routing)

Dojo implements its goal of building a single-page application through its Dojox/app package. This package is a small application framework that provides a set of classes for managing the lifecycle and behavior of single-page applications deployed on mobile devices or desktop systems. The application framework is designed to simply configure a configuration file that is composed of potentially nested views and facilitates transitions between these views.

Using angular to develop a single-page application, you can integrate the entire framework well, while the framework provides MVC features such as routing, controllers, views and single-page application patterns are tightly integrated. Dojox/app in Dojo is a standalone component that does not combine single page applications with MVC, so DOJOX/MVC must be managed by configuration Dojox/app when used, which is self-contained and easy to use in angular.

• UI Widgets and libraries

Dojo provides a large number of widgets (user interface components) supported by the underlying system. The UI library for dojo is called Dijit, using a separate namespace of "Dijit".

Angular does provide a set of UI widgets, but there is not a wide range of Dojo offers. Angular allows free access to popular third-party UI libraries. It provides a UI library called "Angular-ui", This library contains widgets and modules for a variety of popular third-party libraries. Where the Ui-bootstrap module takes all widgets of the BOOTSTRCP framework as angular instructions.

Because Dojo is a toolset, any one of its tools can be used independently of the dojo ecosystem. Therefore, Dojo's Dijit and other popular UI and widget libraries, such as jQueryUI and other jquery or JS plugins, can be packaged as instructions , used in the angular application.

• RESTful interation

Angularjs uses the Angular-resource (Ngresource) module to provide restful interactivity, a module that represents a rest resource and provides a helper method (Get/post/put/delete) To easily implement restful interactions. Additional optional modules are also available.

Dojo uses Dojo/store/jsonrest to provide restful interactivity. It is a lightweight object storage implementation that is used by HTTP clients that have the ability to interact with restful data.

Both ANGULARJS and dojo provide roughly the same amount of restful interactivity.

• Maintainability

ANGULARJS provides features that enable applications with a large number of code bases to be maintainable. These features are as follows:

• AngularJS encourages and enhances the minimization of DOM operations, it is recommended to show DOM operations only in the instructions used in HTML. This avoids the "spaghetti" resulting from the massive use of DOM and DOM events Code. This code is difficult to debug and track in large Web applications. The angular directive also adds HTML semantics.

• Angular provides some features like modules that allow application developers to package different parts of the application logic into modules to increase the modularity and maintainability of the application.

• Angular provides the intrinsic nature of the Di (Dependency injection) design pattern, which helps the application maintain modularity and legibility.

• The project structure framework is already available for ANGULARJS and can be used to develop maintainable enterprise Web applications.

Dojo does not provide the technology to minimize DOM manipulation, so DOM manipulation increases the likelihood of a "spaghetti"-like code for large Web applications, and also affects the maintainability of the application. Dojo Support Module (AMD), but does not provide a DI schema for the Web application.

• Data binding and view templating

The data center principles of a commercial Web application require data and UI updates from the model. For a commercial web application, dynamic views must be created by relying on model data. Angular provides a fairly simple and existing technique for declarative writing to bind to a dynamic view of the module's data. In angular, view templating is written using HTML that contains augular proprietary elements and attributes. Using HTML as a templated language, for Developers, Easier to create and understand views. Angular combines information templates from models and controllers to render dynamic views that users see in a browser. Angular uses a two-way binding feature to keep the UI and model synchronized.

The same features can also be used in dojo, but they are not well-coordinated with the Dojo toolset, and lack the simplicity and nuance of this feature.

• Declarative user Interface

AngularJS enhanced the declarative design of the HTML view (declarative). In the view layer, using HTML as the template language makes it quite easy to develop a view, but also becomes easy to understand and, in view semantics, beneficial to other developers. Angular provides a feature called "directives", which can improve the customization of HTML according to the needs of the domain.

Declarative design (declarative) can be run in a dojo application by using the Data-* property, but it is not the same as angular's "directives" feature.

• Support AngularJS for better IDE and browser debugging

Netbeans IDE also provides built-in support for Angularjs, which makes it easy to develop Web applications using ANGULARJS. (Http://wiki.netbeans.org/NetBeans_80_NewAndNoteworthy#JavaScript)

The angular team also created a plugin called Batarang for Google Chrome, which improves the debugging experience for developing applications using angular. This plugin is designed to simplify the detection of performance bottlenecks and provide a GUI to debug applications.

• It's hard to keep the code consistent across large teams when using Dojo

The programming model in Dojo is to use widgets, and when they are expanded, they enclose your code. You are still programming to manipulate the DOM, connect/Register/unregister events. DOJOX/MVC does not generate modular code. There are 2 or 3 different ways to do the same thing in dojo. Some of them are even bad practices, but they have not been cleared. It's hard to enforce code unification in large teams, Because Dojo does not provide a holistic framework for modular and unified Web applications.

ANGULARJS provides a comprehensive framework that includes the core and planning model of MVC, with uniformity, comprehension, and modularity. ANGULARJS only provides nested controllers for the model. Good testing of application isolation sections. well-defined correlation. Most of the time you don't write code to manipulate the DOM itself. But you can do this when you create an instruction (component). There's no namespace clutter. Your objects never appear in the global namespace, as if everything is encapsulated in the angular application. The MVC pattern is the core. Your application is a set of controllers, services, filters and custom directives.

Summarize

This article intends to let us know that the future of Web applications is in sight. and try to outline a correct and instructive way to structure and design a Web application that adapts to the web world. This article outlines the use of the client JS mv* framework and explains why Web applications organized with the client-side MVC framework are ideal for Web applications.

This article focuses on analyzing and summarizing the contrast in the mature client MVC framework and provides some comparative statistics to help you and your team make decisions and choose the client-side MVC framework that works for your Web application.

This article is biased towards the ANGULARJS framework, and you can have different preferences. To me, Angularjs is my personal preference, which in my eyes is unmatched by other client-side MVC frameworks.

Original address: Http://www.codeproject.com/Articles/799241/AngularJS-The-next-BIG-thing

AngularJS-Next big frame