The angularjs arrangement of the _java of notes

Angularjs hidden fields cannot take values
Responseentity two ways to pass json in MVC
Use strict mode is javascript check for duplicate keys, for declaring variables, duplicate parameters
Js is not compiled on the server, el expressions are compiled on the server
: After the method
1. AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds element values (such as the value of an input field) to an application.
The ng-bind directive binds application data to an HTML view.
ng-init directive initializes AngularJS application variables
The ng-repeat directive repeats an HTML element
2.AngularJS expressions
AngularJS expressions are written in double curly brackets: {{expression}}.
AngularJS expressions bind data to HTML, which is similar to the ng-bind directive.
AngularJS will "output" data where the expression is written.
AngularJS expressions are much like JavaScript expressions: they can contain literals, operators, and variables.
Instance {{5 + 5}} or {{firstName + "" + lastName}}
3.AngularJS applications
AngularJS Module (Module) defines AngularJS applications.
AngularJS Controller is used to control AngularJS applications.
The ng-app directive defines the application, and ng-controller defines the controller.
4.AngularJS module definition application:
var app = angular.module (‘model name’, []);
Register the controller in the Module
app.controller (‘Unique controller name’, function ($ scope) {
$ scope.name = "Xiao Zhang";
$ scope.age = 36;
});
5. The ng-repeat instruction repeats an HTML element:
    ng-repeat = "Variable name in array object"
6, ng-click click event
7.AngularJS filters
AngularJS filters can be used to transform data:
Filter Description
currency Format numbers as currency.
filter selects a subset from the array items.
lowercase formats the string as lowercase.
orderBy arranges an array based on an expression.
uppercase Formats a string as uppercase.
Filters in expressions
Filters can be added to expressions with a pipe character (|) and a filter. .
(The following two examples, we will use the person controller mentioned in the previous section)
The uppercase filter formats the string to uppercase:
AngularJS examples
<div ng-app = "myApp" ng-controller = "personCtrl">
<p> Name is {{lastName | uppercase}} </ p>
</ div>


8.AngularJS XMLHttpRequest
$ http is a core service in AngularJS for reading data from remote servers.
Use format:
// Simple GET request, can be changed to POST
$ http ({
    method: ‘GET’,
    url: ‘/ someUrl’
})
.then (function successCallback (response) {
        // Request successful code execution
    }, function errorCallback (response) {
        // Request failed to execute code}
);
Shorthand method
POST and GET shorthand method format:
$ http.get (‘/ someUrl’, config) .then (successCallback, errorCallback);
$ http.post (‘/ someUrl’, data, config) .then (successCallback, errorCallback);
method: String, the request method.
url: string, request address.
params: string or object, will be serialized using paramserializer and used as parameters of GET request. GET
data: string or object, as data for requesting information data. POST
$ http ({
    method: ”POST”,
    url: ”url”,
     data: ”// your data”
     })

$ http.get (URL, {
        params: {
            "id": id
        }
})







angularjs alone:
Download angularjs file via http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js
1. ng-app = "" defines the scope of use of angularJS;
2. ng-init = "variable = value; variable =‘ value ’” Initialize the value of the variable. When there are multiple variables, separate them with semicolons.
3. ng-model = "variable" defines the variable name;
4. ng-bind = "variable" Bind the variable name to get the data of the variable. The variable here is the variable name of Article 3. But generally use double curly braces to get the value of the variable, such as: {{variable}}.
ng-init = "quantity = 1; cost = 5"
ng-bind = "quantity * cost"
ng-init = "person = {firstName:‘ John ’, lastName:‘ Doe ’}
{{person.lastName}}
HTML5 allows extended (home-made) attributes to start with data-.
AngularJS attributes begin with ng-, but you can use data-ng- to make a web page valid for HTML5.
AngularJS expressions are written in double curly brackets: {{expression}}.
AngularJS expressions bind data to HTML, which is similar to the ng-bind directive.
AngularJS Controller is used to control AngularJS applications.
The ng-app directive defines the application, and ng-controller defines the controller.
<script>
var app = angular.module (‘myApp‘, []);
app.controller (‘myCtrl‘, function ($ scope) {
    $ scope.firstName = "John";
    $ scope.lastName = "Doe";
});
</ script>
The ng-repeat directive repeats an HTML element
<div data-ng-app = "" data-ng-init = "names = [‘ Jani ’,’ Hege ’,‘ Kai ’]">
  <p> Use ng-repeat to loop the array </ p>
  <ul>
    <li data-ng-repeat = "x in names">
      {{x}}
    </ li>
  </ ul>
</ div>
You can use the .directive function to add custom directives.
Use camel case to name a directive, runoobDirective, but when using it, you need to split it with-
<runoob-directive> </ runoob-directive>
<script>
var app = angular.module ("myApp", []);
app.directive ("runoobDirective", function () {
    return {
        template: "<h1> Custom directive! </ h1>"
    };
});
</ script>
The following example method can also output the same result:
Element name: <runoob-directive> </ runoob-directive>
Attribute: <div runoob-directive> </ div>
Class name: <div class = "runoob-directive"> </ div>
Comment: <!-Directive: runoob-directive->

By adding a restrict property and setting the value to "A", the directive can only be called via the property:
<runoob-directive> </ runoob-directive>
<div runoob-directive> </ div>
<script>
var app = angular.module ("myApp", []);
app.directive ("runoobDirective", function () {
    return {
        restrict: "A",
        template: "<h1> Custom directive! </ h1>"
    };
});
</ script>
The restrict value can be one of the following:
    E as element name
    A is used as an attribute
    C is used as a class name
    M is used as a comment
The default value of restrict is EA, that is, the instruction can be called by element name and attribute name.

The ng-model directive binds the value of the input field to a variable created by AngularJS.
<div ng-app = "myApp" ng-controller = "myCtrl">
    Name: <input ng-model = "name">
</ div>
<script>
var app = angular.module (‘myApp‘, []);
app.controller (‘myCtrl‘, function ($ scope) {
    $ scope.name = "John Doe";
});
</ script>

Two-way binding. When modifying the value of the input field, the value of the AngularJS property will also be modified:
<div ng-app = "myApp" ng-controller = "myCtrl">
Name: <input ng-model = "name">
<h1> You entered: ((name)) </ h1>
</ div>
<script>
var app = angular.module (‘myApp‘, []);
app.controller (‘myCtrl‘, function ($ scope) {
    $ scope.name = "John Doe";
});
</ script>

The prompt is displayed when the ng-show property returns true.
<form ng-app = "" name = "myForm">
    Email:
    <input type = "email" name = "myAddress" ng-model = "text">
    <span ng-show = "myForm.myAddress. $ error.email"> is not a valid email address </ span>
</ form>

The ng-model directive can provide status values (invalid, dirty, touched, error) for application data:
<form ng-app = "" name = "myForm" ng-init = "myText =‘ [email protected] ’">
Email:
<input type = "email" name = "myAddress" ng-model = "myText" required>
<p> Edit your email address to see the status change. </ p>
<h1> Status </ h1>
<p> Valid: {{myForm.myAddress. $ valid}} (true if the value entered is valid). </ p>
<p> Dirty: {{myForm.myAddress. $ dirty}} (true if the value changes). </ p>
<p> Touched: {{myForm.myAddress. $ touched}} (true if clicked via touch screen). </ p>

Valid: true (true if the value entered is valid).
Dirty: false (true if the value changes).
Touched: false (true if clicked with a touch screen).

The ng-model directive adds / removes the following classes based on the state of the form field:
    ng-empty
    ng-not-empty
    ng-touched
    ng-untouched
    ng-valid
    ng-invalid
    ng-dirty
    ng-pending
    ng-pristine

Scope is the link between HTML (view) and JavaScript (controller).
Scope is an object with methods and properties available.
Scope can be applied to views and controllers.
When you create a controller in AngularJS, you can pass the $ scope object as a parameter:
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1> {{carname}} </ h1>
</ div>
<script>
var app = angular.module (‘myApp‘, []);
app.controller (‘myCtrl‘, function ($ scope) {
    $ scope.carname = "Volvo";
});
</ script>

scope is a JavaScript object with properties and methods that can be used in views and controllers
<div ng-app = "myApp" ng-controller = "myCtrl">
    <input ng-model = "name">
    <h1> {{greeting}} </ h1>
    <button ng-click = ‘sayHello ()‘> click me </ button>
</ div>
<script>
var app = angular.module (‘myApp‘, []);
app.controller (‘myCtrl‘, function ($ scope) {
    $ scope.name = "Runoob";
    $ scope.sayHello = function () {
        $ scope.greeting = ‘Hello‘ + $ scope.name + ‘!’;
    };
});
</ script>



The AngularJS application is composed as follows:
    View, that is, HTML.
    Model, the data available in the current view.
    Controller, a JavaScript function, can add or modify attributes.

AngularJS expressions vs JavaScript expressions
Similar to JavaScript expressions, AngularJS expressions can contain letters, operators, and variables.
Unlike JavaScript expressions, AngularJS expressions can be written in HTML.
Unlike JavaScript expressions, AngularJS expressions do not support conditional evaluation, looping, and exceptions.
Unlike JavaScript expressions, AngularJS expressions support filters. 

The angularjs arrangement of the _java of notes