Introduce you to AngularJS-basic functions

AngularJS is a Web application development framework launched by Google. It provides a series of well-compatible and scalable services, including data binding, DOM operations, MVC design patterns, and module loading. This article focuses on the use of AngularJS commands. Before we enter the topic, we will quickly browse the basic usage of AngularJS.

AngularJS is not just a class library, but a complete framework. It avoids interaction between multiple class libraries and requires you to be familiar with the tedious work of multiple interfaces. It is designed by Google Chrome developers and leads the next generation of Web application development. Maybe we won't use AngularJS for five or ten years, but its design will continue.

Developers familiar with AngularJS will be excited by the custom commands of AngularJS (which is equivalent to custom controls on the. NET platform. Custom commands allow you to expand HTML tags and features. Commands can be reused and used across projects.

Custom commands have been widely used. It is worth mentioning the-Wijmo control set. It contains nearly 50 AngularJS-based controls. Wijmo is an HTML5 front-end control set used to create desktop and mobile Web applications. From interactive charts to powerful table controls, Wijmo contains almost everything we need. You can learn more about Wijmo from the official website. Therefore, Wijmo is a good reference example for learning AngularJS:

It is very easy to create custom commands. Commands can be tested and maintained and reused in multiple projects.

To use AngularJS, you must reference the script file on the HTML page and add the ng-app feature to the HTML or Body tag. The following is a simple example of using AngularJS:

  <Script src = "http://code.angularjs.org/angular-1.0.1.js"> </script>          
{Msg }}
  

After AngularJS is loaded, it searches for the ng-app feature in the document. This label is usually set to the main module of the project. Angular operates the document once it is found.

In this example, the ng-init feature initializes a msg variable "grape city control team blog". The ng-model feature binds it to the input control in two directions (note: braces are bound tags ). AngularJS parses this tag and updates the msg text value in real time as the input value changes. You can view the effect from the link: Click to enter

AngularJS Module

The module is the root of AngularJS. It includes configuration, control, filtering, factory mode, commands, and other modules.

If you are familiar with the. NET platform, but initially learn about Angular. The following table provides a brief comparison to help you understand the role playing situation in Angular:

AngularJS	. NET	Summary
Module	Assembly	Application Development Module
Controller	ViewModel	Controller, enabling the organizational functions between different layers
Scope	DataContext	Bind data to a view
Filter	ValueConverter	Modify data before data is transferred to the view
Directive	Component	Reusable UI elements can also be understood as front-end plug-ins
Factory, service	Utility classes	Provide services for other module Elements

For example, the following code creates a module using controllers, filters, and commands:

// the main (app) modulevar myApp = angular.module("myApp", []);// add a controllermyApp.controller("myCtrl", function($scope) {    $scope.msg = "grapecity team blog";});// add a filtermyApp.filter("myUpperFilter", function() {    return function(input) {        return input.toUpperCase();    }});// add a directivemyApp.directive("myDctv", function() {    return function(scope, element, attrs) {        element.bind("mouseenter", function() {            element.css("background", "yellow");        });                    element.bind("mouseleave", function() {            element.css("background", "none");        });                }});

In the preceding example, the first parameter of the module method is the module name, and the second parameter is its list of dependent modules. We have created an independent module that does not depend on other modules. Therefore, the second parameter is an empty array (note: this parameter is required even if it is null. Otherwise, this method is used to retrieve the previous module with the same name ). This part will be elaborated in subsequent articles.

The controller constructor obtains the $ scope object, which is used to store all interfaces and methods exposed by the controller. Scope is transmitted from Angular to the view and command layer. In this example, the controller adds the msg attribute to the scope object. An application module can contain multiple controllers. Each controller performs its own duties and controls one or more views.

The filter constructor returns a method to change the display mode of input text. Angular provides many built-in filters. You can also add custom filters. The operation method is the same for Angular built-in filters. In this example, small-to-UPPERCASE conversions are implemented. Filter not only formats text values, but also modifies arrays. AngularJS built-in formatting filters include number, date, currency, uppercase, and lowercase. The array filters Include filter, orderBy, and limitTo. Parameters need to be set for Filter, and the syntax format is also fixed:SomeValue|FilterName:FilterParameter1:FilterParameter2....

The directive constructor returns a method used to pass an element and modify it based on the parameters in the scope. In this example, the mouseenter and mouseleave events are bound to switch to text highlighting. This is a simple command, and the subsequent sections will show you how to create complex commands.

The following is a page built using a module:

        
        {{msg | myUpperFilter }}    

You can view the effect from the link: Click to enter

Note that the module, controller, and filter parameters in the application are used as feature values. They represent JavaScript objects, so the names are case sensitive. The command name is also a property value. It is parsed as an HTML Tag, so it is case sensitive. However, AngularJS will automatically convert these features to lowercase letters. For example, the "myDctv" command is changed to "my-dctv" (just like the built-in instructions ngApp, ngController, and ngModel are converted to "ng-app", "ng-controller", and "ng-model ".

Project Organization Structure

AngularJS allows you to create large Web projects. You can split a project into multiple modules and split a module into multiple module files. At the same time, you can organize these files according to your usage habits.

List A typical project structure:

Root
Default.html
Styles
App.css
Partials
Home.html
Product.html
Store.html
Scripts
App. js
Controllers
ProductCtrl. js
StoreCtrl. js
Directives
GridDctv. js
ChartDctv. js
Filters
FormatFilter. js
Services
DataSvc. js
Vendor
Angular. js
Angular. min. js

Suppose you only want to use one module in the project, you can define it as follows:

// app.jsangular.module("appModule", []);

If you want to add elements to a module, you can add them to the module by calling the module by name. For example:FormatFilter. jsThe file contains the following elements:

// FormatFilter. js // obtain the module var app = angular by name. module ("appModule"); // Add filterapp to the module. filter ("formatFilter", function () {return function (input, format) {return Globalize. format (input, format );}}})

If your application contains multiple modules, add references to other modules when adding modules. For example, an application contains three modules: app, controls, and data:

// App. js (the module named app depends on the controls and data modules) angular. module ("app", ["controls", "data"]) // controls. js (the controls module depends on the data module) angular. module ("controls", ["data"]) // data. js (the data module has no dependencies and the array is empty) angular. module ("data", [])

The ng-app command must be declared on the application's homepage. AngularJS automatically adds the required reference:

...

After the above declaration, you can use the elements declared by the other three modules on all pages.

In this article, we understand the basic usage and structure of AngularJS. In the next chapter, we will explain the basic concepts of commands and create some instances to help you understand the role of commands.