Take you closer to Angularjs-Introduction to Basic functions

Take you closer to the ANGULARJS series:

1. Take you closer to Angularjs-Introduction to Basic functions
2. Take you closer to ANGULARJS-experience Instruction Example
3. Take you closer to Angularjs-create your own definition directives

------------------------------------------------------------------------------------------------

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 onboarding. This article focuses on the use of the ANGULARJS directive, and before we enter the topic, we will explore the basic usage of ANGULARJS at high speed.

AngularJS is not just a library of classes, but rather provides a complete framework. It avoids the need for you to interact with multiple class libraries and to familiarize yourself with the tedious work of multiple sets of interfaces. It is designed by Google Chrome 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 always be followed.

Knowing the developer of Angularjs, you are sure to be excited about the ability of ANGULARJS to define its own directives, which are functionally equivalent to its own defined controls under the. NET Platform. Define your own directives to allow you to extend HTML tags and features. Instructions can be reused and can be used across projects.

Its own definition of the directive has been widely used, which is worth mentioning is the-wijmo control set. It includes 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 almost includes everything we need. Learn about Wijmo's many other information from the official website. So, Wijmo is a very good example of learning Angularjs:

It is very easy to create your own definition directives. Instructions can be tested, maintained, and reused across multiple projects.

With Angularjs, you need to refer to the script file on the HTML page, adding 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 feature. 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 attribute 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. Ability to view effects from Links: Click to enter
AngularJS Module
Module can be said to be the root of angularjs. It includes configuration, control, filtering, Factory mode, instructions, and other modules.
Suppose you are familiar with. NET platform, but initial learning angular. The following table 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
 
    
change data before transferring data to a 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 shown above is the name of the modules, and the second is its list of dependent modules. We have created a standalone module that does not depend on other modules. So the second parameter is an empty array (note: Even if it is empty, we must fill in this number.) Otherwise, the method goes back to retrieve the previous module with the same name). This part will be elaborated in the article that perhaps.
The controller constructor gets the $scope object, which stores the interfaces and methods exposed by all controllers. 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 include 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 at the same time, you can add your own definition filter, the same way 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 be set, and the syntax format is fixed:somevalue | filtername:filterParameter1:filterParameter2....
The directive constructor returns a method that passes an element and changes it according to the parameters in the scope. In the demo sample we have bound the MouseEnter and MouseLeave events to toggle the text highlighting. This is a simple-to-use instruction that will show you how to create some complex instructions in the section that might be.
The following pages are built using modules:
 <  body  ng-app  = "myApp"   Ng-controller  = "Myctrl"     >  <  input  ng-model  = "MSG"     />  <  p  MY-DCTV  >   </ p  >  </ body  >  
Ability to view effects from Links: 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 distinguished by uppercase and lowercase. The name of the directive is also the property value, which is parsed as an HTML tag, so it is also distinguished by uppercase and lowercase. But Angularjs will voluntarily convert these features to lowercase, such as "MYDCTV" instructions into "MY-DCTV" (like the built-in instruction 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 documents 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 want to use only one module in your project, so you can define:
// App.js angular.module ("Appmodule", []);
Assuming that you want to add elements to the module, you can call the module by name to join it. For example: The formatfilter.js file includes the following elements:
// Formatfilter.js // get module by name var app = Angular.module ("Appmodule"); // adding the filter to the module function () {  returnfunction(input, format) {    return  Globalize.format (input, format);   }})
Let's say your app includes multiple modules, and be aware of adding references to other modules when adding modules. For example, an application 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 main page of the application needs to declare the NG-APP directive, AngularJS will voluntarily join the required reference:
<ng-app= "app">... </ HTML >
With the above statement, you will be able to 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 section, we will elaborate on the main instruction concepts, and at the same time, create instances to help you understand the role of instructions.
Take you closer to Angularjs-Introduction to Basic functions