angularjs2 java_笔记之_java的angularjs整理

Angularjs隐藏域不能取值

Responseentity两种传递json的方式，在MVC中

Use strict严格模式是javascript检查重复键、为申明变量、重复参数

Js不在服务器编译，el表达式要在服务器编译

：后为方法1、AngularJS 通过 ng-directives(ng-指令) 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

ng-init 指令初始化 AngularJS 应用程序变量

ng-repeat 指令会重复一个 HTML 元素2、AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{5 + 5 }} 或 {{ firstName + " " +lastName }}3、AngularJS 应用

AngularJS 模块(Module) 定义了 AngularJS 应用。

AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。4、AngularJS 模块定义应用:

var app= angular.module('模型名称', []);

Module中去注册控制器

app.controller('唯一的控制器名称', function($scope) {

$scope.name= "小张";

$scope.age= 36;

});5、ng-repeat 指令会重复一个 HTML 元素：

ng-repeat=”变量名 in 数组对象”6、ng-click 点击事件7、AngularJS 过滤器

AngularJS 过滤器可用于转换数据：

过滤器 描述

currency 格式化数字为货币格式。

filter 从数组项中选择一个子集。

lowercase 格式化字符串为小写。

orderBy 根据某个表达式排列数组。

uppercase 格式化字符串为大写。

表达式中添加过滤器

过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。.

(下面的两个实例，我们将使用前面章节中提到的 person 控制器)

uppercase 过滤器将字符串格式化为大写：

AngularJS 实例

姓名为 {{ lastName | uppercase }}

8、AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

使用格式：//简单的 GET 请求，可以改为 POST

$http({

method:'GET',

url:'/someUrl'})

.then(function successCallback(response) {//请求成功执行代码

}, function errorCallback(response) {//请求失败执行代码}

);

简写方法

POST 与 GET 简写方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);

$http.post('/someUrl', data, config).then(successCallback, errorCallback);

method：字符串，请求方法。

url：字符串，请求地址。

params：字符串或者对象，将使用paramserializer序列化并且作为GET请求的参数。 GET

data：字符串或者对象，作为请求信息数据的数据。 POST

$http({

method:”POST”,

url:”url”,

data: ”//your data”

})

$http.get(URL,{

params: {"id":id

}

})

angularjs单独使用：

通过http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js下载angularjs文件

1、ng-app=" "定义angularJS的使用范围；2、ng-init="变量=值;变量='值'"初始化变量的值，有多个变量时，中间用分号隔开；3、ng-model="变量"定义变量名；4、ng-bind="变量"绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。

ng-init="quantity=1;cost=5"ng-bind="quantity * cost"ng-init="person={firstName:'John',lastName:'Doe'}

{{ person.lastName }}

HTML5 允许扩展的(自制的)属性，以 data-开头。

AngularJS 属性以 ng- 开头，但是您可以使用 data-ng-来让网页对 HTML5 有效。

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

app.controller('myCtrl', function($scope) {

$scope.firstName= "John";

$scope.lastName= "Doe";

});ng-repeat 指令会重复一个 HTML 元素

使用 ng-repeat 来循环数组

• {{ x }}

可以使用 .directive 函数来添加自定义的指令。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以- 分割, runoob-directive:

app.directive("runoobDirective", function() {return{

template :"

自定义指令!

"};

});以下实例方式也能输出同样结果:

元素名：属性：

通过添加 restrict 属性,并设置只值为"A", 来设置指令只能通过属性的方式来调用:

app.directive("runoobDirective", function() {return{

restrict :"A",

template :"

自定义指令!

"};

});restrict 值可以是以下几种:

E 作为元素名使用

A 作为属性使用

C 作为类名使用

M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

名字:

app.controller('myCtrl', function($scope) {

$scope.name= "John Doe";

});双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：

名字:

你输入了: {{name}}

app.controller('myCtrl', function($scope) {

$scope.name= "John Doe";

});提示信息会在 ng-show 属性返回 true的情况下显示。

Email:

不是一个合法的邮箱地址

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):Email:

编辑邮箱地址，查看状态的改变。

状态

Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。

Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。

Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。

Valid:true (如果输入的值是合法的则为 true)。

Dirty:false (如果值改变则为 true)。

Touched:false (如果通过触屏点击则为 true)。

ng-model 指令根据表单域的状态添加/移除以下类：

ng-empty

ng-not-empty

ng-touched

ng-untouched

ng-valid

ng-invalid

ng-dirty

ng-pending

ng-pristine

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

{{carname}}

app.controller('myCtrl', function($scope) {

$scope.carname= "Volvo";

});scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用

{{greeting}}

点我

app.controller('myCtrl', function($scope) {

$scope.name= "Runoob";

$scope.sayHello=function() {

$scope.greeting= 'Hello ' + $scope.name + '!';

};

});AngularJS 应用组成如下：

View(视图), 即 HTML。

Model(模型), 当前视图中可用的数据。

Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

AngularJS 表达式 与 JavaScript 表达式

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。