笔记之_java的angularjs整理

Posted 2020-10-15 莫轩ASL

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 实例
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div> 


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 定义了控制器。
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>
ng-repeat 指令会重复一个 HTML 元素
<div data-ng-app="" data-ng-init="names=[‘Jani‘,‘Hege‘,‘Kai‘]">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li data-ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>
可以使用 .directive 函数来添加自定义的指令。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
以下实例方式也能输出同样结果:
元素名：<runoob-directive></runoob-directive>
属性：<div runoob-directive></div>
类名：<div class="runoob-directive"></div>
注释：<!-- directive: runoob-directive -->

通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
restrict 值可以是以下几种:
    E 作为元素名使用
    A 作为属性使用
    C 作为类名使用
    M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
    $scope.name = "John Doe";
});
</script>

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
    $scope.name = "John Doe";
});
</script>

提示信息会在 ng-show 属性返回 true 的情况下显示。
<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):
<form ng-app="" name="myForm" ng-init="myText = ‘[email protected]‘">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

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 对象当作一个参数传递:
<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 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用
<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click=‘sayHello()‘>点我</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>



AngularJS 应用组成如下：
    View(视图), 即 HTML。
    Model(模型), 当前视图中可用的数据。
    Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。