Take you closer to Angularjs-Introduction to Basic functions

Source: Internet
Author: User

Angularjs is a Web application development framework launched by Google. It provides a range of well-compatible and extensible services, including data binding, DOM manipulation, MVC design patterns, and module loading. This article focuses on the use of ANGULARJS directives, and we will quickly explore the basic usage of ANGULARJS before we enter the topic.

AngularJS is more than just a class library, it provides a complete framework. It avoids you interacting with more than one class library and requires familiarity with the tedious work of multiple sets of interfaces. It is designed by Google Chrome's developers to lead the next generation of Web application development. Perhaps we will not use ANGULARJS for 5 or 10 years, but the essence of its design will continue to be used.

For developers who understand ANGULARJS, you are sure to be excited about the Angularjs custom directive, which functions as a custom control under the. NET Platform. Custom directives allow you to extend HTML tags and features. Directives can be reused and can be used across projects.

Custom directives have been widely used, and it is worth mentioning that the-wijmo control set. It contains nearly 50 models based on the Angularjs control. Wijmo is the HTML5 front-end control set for creating desktop and mobile Web applications. From interactive charts to powerful tabular controls, Wijmo contains almost everything we need. You can learn more about Wijmo from our official website. So, Wijmo is a good reference example for learning Angularjs:

It is very easy to create custom directives. Directives can be tested, maintained, and reused across multiple projects.

With Angularjs, you need to refer to the script file in the HTML page and add the Ng-app feature to the HTML or body tag. Here is a simple example of using Angularjs:

"http://code.angularjs.org/angular-1.0.1.js "></script>  "msg = ' Grape City Control Team blog ' ">    <input ng-model="msg" />    <p>{{msg}}</p >  </body>

When Angularjs is loaded, it searches the document for the Ng-app attribute. This label is usually set to the main module of the project. Once found, the Angular will operate on the document.

In this example, the Ng-init feature Initializes a msg variable "Grape City Control Team Blog", and the Ng-model feature binds it to the input control in two-way (note: Curly braces are bound tokens). AngularJS will parse this tag and update the MSG literal value in real time as the input value changes. You can see the effect from the link: Click to enter

AngularJS Module

Modules can be said to be the root of angularjs. It includes configuration, control, filtering, Factory mode, instructions, and other modules.

If you are familiar with. NET platform, but initial learning angular. The table below is a brief comparison to help you understand the role-playing situation in angular:






Application Development Module



Controller, starting to the different levels of organizational action



To provide binding data for a view



To modify data before data is transferred to the view



Reusable UI elements that can also be understood as front-end plug-ins

Factory, Service

Utility classes

Providing services for other module elements

For example, the following code creates a module using a controller, a filter, and a directive:

//The main (app) modulevarMyApp = Angular.module ("MyApp", []);//Add a controllerMyapp.controller ("Myctrl",function($scope) {$scope. msg= "Grapecity Team Blog";});//Add a filterMyapp.filter ("Myupperfilter",function() {    return function(input) {returninput.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");                }); }});

The first parameter of the module method in the example above is the name of the block, and the second parameter is its list of dependent modules. We have created a separate module that does not depend on other modules. So the second argument is an empty array (note: Even if it is empty, we must fill in this parameter.) Otherwise, the method goes back to retrieve the previous module with the same name). This section will be discussed in detail in the following articles.

The controller constructor gets the $scope object, which stores all the interfaces and methods exposed by the controller. Scope is passed by angular to the view and instruction layers. In this example, the controller adds the MSG attribute to the scope object. An application module can contain multiple controllers, each of which controls one or more views.

The filter constructor returns a method to change how input text is displayed. Angular provides a lot of built-in filter, and you can also add a custom filter that works the same as Angular built-in filter. In this example, a lowercase to uppercase conversion is implemented. Filter can not only format text values, but also change arrays. The AngularJS built-in format filter has number, date, currency, uppercase, and lowercase. The array filter has filter, LimitTo, and. The filter needs to set parameters, and the syntax format is fixed:somevalue | filtername:filterParameter1:filterParameter2....

The directive constructor returns a method that is used to pass an element and modify it according to the parameters in scope. In the example we have bound the MouseEnter and MouseLeave events to toggle the text highlighting. This is a simple, functional instruction that will show you how to create some complex instructions in subsequent chapters.

Here is the page built using the module:

 <  body  ng-app  = "myApp"   Ng-controller  = "Myctrl"     >  <  input  ng-model  = "MSG"     />  <  p  MY-DCTV  >   </ p  >  </ body  >  

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

Note that the module, controller, and filter are applied as attribute values in the application. They represent JavaScript objects, so names are case-sensitive. The name of the directive is also a property value, which is parsed as an HTML tag and is therefore case-sensitive. But Angularjs will automatically convert these features to lowercase, such as "MYDCTV" instructions into "MY-DCTV" (like the built-in instructions Ngapp, Ngcontroller, and Ngmodel will be converted to "Ng-app", "Ng-controller", and "Ng-model".

Project Organizational Structure

Use Angularjs to create large Web projects. You can split the 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:


Suppose that if you only want to use a module in your project, you can define this:

// App.js angular.module ("Appmodule", []);

If you want to add elements to the module, you can call the module to add them by name. For example, the formatfilter.js file contains the following elements:

// Formatfilter.js // get module by name var app = Angular.module ("Appmodule"); // to add a filter to the module function () {  returnfunction(input, format) {    return  Globalize.format (input, format);   }})

If your app contains more than one module, be aware of adding references to other modules when adding modules. For example, an app consists of three module apps, controls, and data:

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

The NG-APP directive needs to be declared in the main page of the app, and AngularJS will automatically add the required references:

<ng-app= "app">... </ HTML >

With the above statement, you can use the other three module declared elements on all pages.

In this article, we understand the basic usage and structure of ANGULARJS. In the next section, we will elaborate on the basic instruction concept, while creating some examples to help you understand the role of instructions.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.