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:
<Html>
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
. 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:
<body ng-app="myApp" ng-controller="myCtrl"> <input ng-model="msg" /> <p my-dctv > {{msg | myUpperFilter }} </p></body>
You can view the effect from the link: Click to enter
// 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
