angularjs2java_笔记之_java的angularjs整理

Angularjs隐藏域不能取值

Responseentity两种传递json的方式&＃xff0c;在MVC中

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

Js不在服务器编译&＃xff0c;el表达式要在服务器编译

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

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

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

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

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

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

AngularJS 表达式写在双大括号内&＃xff1a;{{ expression }}。

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

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

AngularJS 表达式 很像 Javascript 表达式&＃xff1a;它们可以包含文字、运算符和变量。

实例 {{5 &＃43; 5 }} 或 {{ firstName &＃43; " " &＃43;lastName }}3、AngularJS 应用

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

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

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

var app&＃61; angular.module(&＃39;模型名称&＃39;, []);

Module中去注册控制器

app.controller(&＃39;唯一的控制器名称&＃39;, function($scope) {

$scope.name&＃61; "小张";

$scope.age&＃61; 36;

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

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

AngularJS 过滤器可用于转换数据&＃xff1a;

过滤器 描述

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

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

lowercase 格式化字符串为小写。

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

uppercase 格式化字符串为大写。

表达式中添加过滤器

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

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

uppercase 过滤器将字符串格式化为大写&＃xff1a;

AngularJS 实例

8、AngularJS XMLHttpRequest

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

使用格式&＃xff1a;//简单的 GET 请求&＃xff0c;可以改为 POST

$http({

method:&＃39;GET&＃39;,

url:&＃39;/someUrl&＃39;})

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

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

);

简写方法

POST 与 GET 简写方法格式&＃xff1a;

$http.get(&＃39;/someUrl&＃39;, config).then(successCallback, errorCallback);

$http.post(&＃39;/someUrl&＃39;, data, config).then(successCallback, errorCallback);

method&＃xff1a;字符串&＃xff0c;请求方法。

url&＃xff1a;字符串&＃xff0c;请求地址。

params&＃xff1a;字符串或者对象&＃xff0c;将使用paramserializer序列化并且作为GET请求的参数。 GET

data&＃xff1a;字符串或者对象&＃xff0c;作为请求信息数据的数据。 POST

$http({

method:”POST”,

url:”url”,

data: ”//your data”

})

$http.get(URL,{

params: {"id":id

}

})

angularjs单独使用&＃xff1a;

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

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

ng-init&＃61;"quantity&＃61;1;cost&＃61;5"ng-bind&＃61;"quantity * cost"ng-init&＃61;"person&＃61;{firstName:&＃39;John&＃39;,lastName:&＃39;Doe&＃39;}

{{ person.lastName }}

HTML5 允许扩展的(自制的)属性&＃xff0c;以 data-开头。

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

AngularJS 表达式写在双大括号内&＃xff1a;{{ expression }}。

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

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

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

app.controller(&＃39;myCtrl&＃39;, function($scope) {

$scope.firstName&＃61; "John";

$scope.lastName&＃61; "Doe";

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

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

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

template :"

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

元素名&＃xff1a;属性&＃xff1a;

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

restrict :"A",

template :"

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

E 作为元素名使用

A 作为属性使用

C 作为类名使用

M 作为注释使用

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

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

app.controller(&＃39;myCtrl&＃39;, function($scope) {

$scope.name&＃61; "John Doe";

});双向绑定&＃xff0c;在修改输入域的值时&＃xff0c; AngularJS 属性的值也将修改&＃xff1a;

app.controller(&＃39;myCtrl&＃39;, function($scope) {

$scope.name&＃61; "John Doe";

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

不是一个合法的邮箱地址

编辑邮箱地址&＃xff0c;查看状态的改变。

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

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

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

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

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

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

ng-empty

ng-not-empty

ng-touched

ng-untouched

ng-valid

ng-invalid

ng-dirty

ng-pending

ng-pristine

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

Scope 是一个对象&＃xff0c;有可用的方法和属性。

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

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

app.controller(&＃39;myCtrl&＃39;, function($scope) {

$scope.carname&＃61; "Volvo";

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

app.controller(&＃39;myCtrl&＃39;, function($scope) {

$scope.name&＃61; "Runoob";

$scope.sayHello&＃61;function() {

$scope.greeting&＃61; &＃39;Hello &＃39; &＃43; $scope.name &＃43; &＃39;!&＃39;;

};

});AngularJS 应用组成如下&＃xff1a;

View(视图), 即 HTML。

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

Controller(控制器), 即 Javascript 函数&＃xff0c;可以添加或修改属性。

AngularJS 表达式 与 Javascript 表达式

类似于 Javascript 表达式&＃xff0c;AngularJS 表达式可以包含字母&＃xff0c;操作符&＃xff0c;变量。

与 Javascript 表达式不同&＃xff0c;AngularJS 表达式可以写在 HTML 中。

与 Javascript 表达式不同&＃xff0c;AngularJS 表达式不支持条件判断&＃xff0c;循环及异常。

与 Javascript 表达式不同&＃xff0c;AngularJS 表达式支持过滤器。