筆記之_java的angularjs整理

標籤：on()   get   --   ons   min   運算子   conf   restrict   資訊   

Angularjs隱藏欄位不能取值Responseentity兩種傳遞json的方式，在MVC中Use strictstrict 模式是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請求的參數。 GETdata：字串或者對象，作為請求資訊資料的資料。 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-pristineScope(範圍) 是應用在 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 運算式支援過濾器。

 

筆記之_java的angularjs整理