angularjs 学习笔记

最新推荐文章于 2025-02-20 22:56:07 发布

原创最新推荐文章于 2025-02-20 22:56:07 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

25 篇文章

订阅专栏

本文深入探讨AngularJS中bootstrap函数的用法及其与指令的交互，包括如何通过bootstrap函数绑定ng-app指令，以及详细解释AngularJS核心函数如copy、element、equals、extend等的用途。同时，展示如何在HTML中利用AngularJS的指令如ng-controller、ng-model等进行DOM操作，以及AngularJS在数据绑定、模板渲染等方面的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文档 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 滚动到指定服务