Take you closer to Angularjs-Introduction to Basic functions

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:

 
 
 
  
  
 
   
 
    
AngularJS
 
    
. NET
 
    
Summary
 
   
 
   
 
    
Module
 
    
Assembly
 
    
Application Development Module
 
   
 
   
 
    
Controller
 
    
ViewModel
 
    
Controller, starting to the different levels of organizational action
 
   
 
   
 
    
Scope
 
    
DataContext
 
    
To provide binding data for a view
 
   
 
   
 
    
Filter
 
    
Valueconverter
 
    
To modify data before data is transferred to the view
 
   
 
   
 
    
directive
 
    
Component
 
    
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:
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 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.