"AngularJS"--1 first knowledge AngularJS

　　With excitement and disturbed mood, began to learn Angularjs journey, long ago heard this front-end framework, but because they have not engaged in related work, so also did not study. This time just learn angularjs, directly review the front-end knowledge. At present here is still a weakness, slowly in-depth study.

Angularjs is Google's excellent front-end framework, which has been applied to multiple products.

Through the study of w3cschool.cc, a simple understanding of the use of its methods, but the principle has not been understood.

　　

Angularjs compared to other frameworks, there are some features:

1 MVVM

2 modularity

3 Automated bidirectional data binding

4 Semantic Tags

5 Dependency Injection

Because many concepts are not understood, these features are not understood. In the future will be through learning, slowly in-depth study.

　　

Through the simple study, the general understanding of the ANGULARJS syntax and use, including the following content:

1 expressions

Common JS expressions are supported, and expressions are used with {{}}.

<div ng-app= "" >  <p> my first expression: {{5 + 5}}</p></div>

2 Instructions

The data is bound and defined by specific label designations, and crawling

<div ng-app= "" ng-init= "Firstname= ' John '" >  <p> try to enter:</p> <p> name in the input box  : <input type = "text" ng-model= "FirstName" ></p>  <p> you entered as: {{FirstName}}</p></div>

Ng-app Defining the ANGULARJS application

Ng-init Initializing Application variables

Ng-model Get program variables

Ng-bind Binding Data variables

3 Controller

Control the application through the controller. The method and the creation of the variable are accomplished through constructors.

Where PersonController is equivalent to the constructor method function, the parameter $scope replaces the specified element label.

<div ng-app= "" ng-controller= "PersonController" ><input type= "text" ng-model= "Person.firstname" ><br><input type= "text" ng-model= "Person.lastname" ><br><br>+ "" +  Person.lastname}}</div><script>function  personcontroller ($scope) {    = {         "John",        "Doe"    };} </script>

4 Filter

Through the filter, complete the specific sorting or filtering, case conversion and so on.

Convert currency numbers into currency formats

<div ng-app= "" ng-controller= "Costcontroller" > quantity:<input type= "number" ng-model= "Quantity" > Price:<input type= "number" ng-model= "Prices" ><p> Total Price = {{(quantity * prices) | currency}}</p></ Div>

Filter selects a subset from the data item

<div ng-app= "" ng-controller= "Namescontroller" ><p> input filter: </p><p><input type= "Text" Ng-model= "Name" ></p><ul>  <li ng-repeat= "x in Names | filter:name | By: ' Country '" >     | Uppercase) + ', ' + X.country}}  </li></ul></div>

Sort by order

<div ng-app= "" ng-controller= "Namescontroller" ><p> Loop object:</p><ul>  <li ng-repeat= "x in Names | By: ' Country ' >    + ', ' + X.country}}  </li></ul><div>

Lowercase uppercase uppercase and lowercase conversions

<div ng-app= "" ng-controller= "PersonController" ><p> name {{Person.lastname | uppercase}}</p></ Div>

　　

5 http

Get the specified file contents via HTTP

<div ng-app= "" ng-controller= "Customerscontroller" > <ul>  <li ng-repeat= "x in Names" >     + ', ' + X.country}}  </li></ul></div><script>function Customerscontroller ($scope, $http) {   $http. Get ("Http://www.w3cschool.cc/try/angularjs/data/Customers_ json.php ")    . Success (function(response) {$scope. names = response;});} </script>

6 table

Table Presentation via Ng-repeat

<div ng-app= "" ng-controller= "Customerscontroller" > <table>  <tr ng-repeat= "x in Names" >    <td>{{x.name}}</td>    <td>{{x.country}}</td>  </tr></table></div >

7 HTML DOM

Controls the node through the properties of the DOM element. Example: ng-disabled ng-show

<div ng-app= "" ><p><button ng-disabled= "Myswitch" > Point me! </button></p><p><input type= "checkbox" ng-model= "Myswitch" > button </p></div >

　　

The above is a simple learning content, tomorrow plan to learn the next w3cshcool.cc content

"AngularJS"--1 first knowledge AngularJS