Learning of ANGULARJS controllers and Angularjs filters (3)

The previous simple learning angularjs expression and instructions, it can be said about Angularjs have a certain understanding of it, hey, the following to summarize the study of ANGULARJS controller and filter Oh.

The AngularJS controller, in fact, is a regular JavaScript object. To control the data for the ANGULARJS application.

First, the ANGULARJS controller

<1>, AngularJS Controller

The results of browsing in the browser are:

The angularjs application is controlled by the controller, and the Ng-controller directive defines the application controller, which is a JavaScript object created by the constructor of the standard JavaScript object.

The ANGULARJS application is defined by Ng-app, the application runs within <div>, ng-controller= "MyC" familiarity is a angularjs instruction. Used to define a controller, the MYC function is a JavaScript function. Use the $scope object to invoke the controller. In Angularjs, the $scope is an application image (which belongs to the application variables and functions); The controller's $scope (equivalent scope, control range) is used to hold the model (models) object in Angularjs, and the controller creates two properties in scope ( FirstName and LastName), the Ng-model directive binds the input domain to the controller's properties (FirstName and LastName).

<2>, Controller method

The Results of browsing in the browser are:

A controller object with two properties, LastName and FirstName, is demonstrated in an instance of <1>. Controller can also have methods (variables and functions), we can compare the above two instances.

The above HTML and script is rendered in a page, if we refer to an external JS file then only need such a simple reference, as follows:

The Myc.js file is as follows:

This is also very convenient to implement.

Second, AngularJS filter

filters can be added to expressions and directives using a pipe character (|).

<1> According to the instructions above, we set the pinyin of the last instance name to the first name and then a case for the final value of the FullName.

The results of browsing in the browser are:

The Results of browsing in the browser are:

<1>, according to the instructions above, the currency filter formats the numbers as currency:

                 

<3> Add filters to instructions

                 

<4> selective filtering in the input text box

                   in the browser, the result is:

The above examples are shown in the use of several filters, the last one is in a comprehensive use of these several methods. Well, today I learned here, hehe, tomorrow continue Oh.

Learning of ANGULARJS controllers and Angularjs filters (3)