angularjs 學習筆記

文檔 https://code.angularjs.org/1.3.8/docs/api/ng/function/angular.bootstrap

function

angular.bootstrap();  //猜測是 綁定 ng-app 這個指令的,  

angular.bootstrap(element, [modules], [config]);  第一個參數,要綁定的元素,第二個參數要綁定的modules ,第三個參數 暫不明確

<!doctype html>

<html >
<body>
<div ng-controller="WelcomeController">
    {{greeting}}
</div>


<script src="framework/1.3.0.14/angular.min.js"></script>
<script>
    var app = angular.module('demo', [])
            .controller('WelcomeController', function($scope) {
                $scope.greeting = 'Welcome!';
            });
    angular.bootstrap(document, ['demo']);
</script>
</body>

</html>


angular.copy(source, [destination]);   複製 操作  source 源(包括任意類型) destination 目的地 (類型和源保持一致)

angular.element(document.querySelector('div')).attr("params","hahha"); 提供類似於jquery的寫法,但是用起來不怎麼好用,可能自己不太明白,

並且angularjs,不希望直接操控dom

angular.equals(o1, o2);  判斷兩個值相等 支持值類型、正則表達式、數組和對象。、

angular.extend(obj1,obj2)  合併對象,  將obj2對象合併到obj1。 如果保留obj1寫法: angular.extend({},obj1,obj2); 

angular.forEach(); 迭代器  

案例

 var user2={'title':'lisi','passsword':'lisi','centent':'centnt'};
                    var log=[];
                    angular.forEach(user2,function(value,key){
                        console.log(value+"---"+key);
                        this.push(value,key);
                    },log)
                    console.log(log);


angular.fromJson(json);  反序列化 json , 沒明白

angular.identity(value);  不懂

angular.injector(modules, [strictDi]); 不明白

angular.isArray(value); 判斷是不是數組

angular.isDate();  判斷是不是時間類型

angular.isDefined(); 判斷有沒有被引用 ,個人 理解 應該是判斷變量定義了有沒有賦值

angular.isElement(); 判斷是不是元素

angular.noop();  不懂

angular.toJson(obj, pretty); 沒懂

指令用法 

  <input type="text" ng-maxlength="20" required name="pname" ng-model="user.PATIENTNAME"/>
  <span class="error-tishi" ng-show="!myForm.pname.$valid">*請輸入正確姓名</span>

 input指令 ng-model 必填項 

textarea 和input 指令使用類似

select 標籤 裏面的 ng-Options 指令 和 類似於ng-reqpeat ,循環數組並將內容填充到 option 元素中。

ng-style 指令 類似於元素 中的style ,優點在於 值,可以設定

ng-bind 指令 和{{}}的區別,ng-bind 顯示的變量在angularjs 未加載完成,不會顯示

ng-bind-html 指令,功能類似於 jquery 的$().html(); 爲元素添加html代碼 ,使用之前需要 引入 angular-sanitize.min.js 文件,並且調用服務

var demoApp=angular.module('demoApp',['ngSanitize']);  ngSanitize 服務

ng-bind-template 可以使用 {{}}  

<pre ng-bind-template="{{salutation}} {{name}}!"></pre> 

ng-class指令  接收對象,鍵爲class類名,如果值爲true 則加入 ,否則不加入
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
<input Type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
ng-classEven  配合 ng-repeat 實現奇偶佈局  
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">  <li ng-repeat="name in names">   <span ng-class-odd="'odd'" ng-class-even="'even'">     {{name}}         </span>  </li></ol>
ngCloak 指令,防止angularjs未加載完{{name}} 頁面顯示問題
ng-copy  複製事件 綁定
ng-cut 剪切事件
ng-inculude 引入 一段文件
 <div class="slide-animate" ng-include="templates"></div>  $scope.templates='./tpls/caseList.html';
ng-list 不明白含義
ng-non-bindable 顯示源碼 對表達式不進行編譯
server服務 
$anchorScroll 滾動到指定服務

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章