注:引入angular.js后直接在脚本里调用以下api
1.angular.bind(obj,fn,args);{概括:为标签对象手动绑定一个函数
obj:一般为name的标签对象。代码:var obj={name:"btn"};
fn:为obj对象要绑定的方法。代码:var fn=function(args){alert(args);}
args:为fn提供的参数,可以直接传入参数,也可以在调用此bind方法时传入参数
}
案例代码:
<script type="text/javascript">
var obj={name:"btn"};
var fn=function(args){
alert(args);
}
var bind=angular.bind(obj,fn,"123");
function aaakk(){
bind();
}
</script>
<input type="button" name="btn" value="123" οnclick="aaakk()">
2.angular.bootstrap(element,["moduleName"],args);{概括:手动angular的初始化,等于自动初始化ng-app="test"
element:标签对象,
moduleName:手动angular的初始化需要的一个module,
args:可以在调用此方法时传参数,也可以不传入
}
案例代码:
js:
{
var app=angular.module("test",[]);
app.controller("mycontr",function($scope){
$scope.hello="456";
});
以上部分代码与自动初始化时不变
angular.bootstrap(document,["test"]);
//可以调用此方法时为hello传入默认值
注:使用了此方法就可以代替在标签上写ng-app="test"
Html:
<div ng-controller="mycontr">
{{hello}}
</div>
}
3.angular.copy(source,destination){概括:一个可以复制对象的api
source:被复制的来源目标
destination:可选参数,如果没有,则返回一个拷贝对象,如果有,则将拷贝的对象赋给它
}
代码案例:
{
js:
function ExampleController($scope){//angularjs中的控制器简易写法
$scope.master= {};
var test1;
var test3=null;
var test2 = "a";
$scope.update = function(user) {
$scope.master= angular.copy(user);//没有第二个参数返回copy对象
};
$scope.reset = function() {
angular.copy($scope.master, $scope.user);//有第二个参数直接给作用域中的user
};}
html:
<div ng-controller="ExampleController">
<form novalidate class="simple-form">
Name: <input type="text" ng-model="user.name" /><br />
E-mail: <input type="email" ng-model="user.email" /><br />
Gender:
<input type="radio" ng-model="user.gender" value="male" />
male
<input type="radio" ng-model="user.gender" value="female" />
female
<br />
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>
</form>
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>
}
4.angular.element(element);{概括:获取一个dom的方法
element:对象
}
代码案例:
{
js:
function ElementControl($scope){
var obj=angular.element("#pone");
$scope.gotos=function(){
console.log("123");
};
}
HTML:
<div ng-controller="ElementControl">
<div id="pone">12321132</div>
<button value="按下" ng-click="gotos()">button</button>
</div>
}
5.angular.equals(o1,o2);{概括:比较两个对象、值或表达式是否相等
o1:对象1
o2:对象2
}
代码案例:
{
js:
{
}<script type="text/javascript">
angular.module("test",[]);
function equalsController($scope){
$scope.name="angular.equals";
var masters={};
masters=angular.copy($scope.name);
$scope.masters=masters;
$scope.show=function(){
var da=angular.equals($scope.name,$scope.masters);
alert(da);
}
</script>
}
HTML:
{
<body ng-app="test">
<div ng-controller="equalsController">
<p>{{ name}}</p>
<p>{{masters}}</p>
<button ng-click="show()">show</button>
</div>
</body>
}
}
6.angular.extend(dst,src...);{概括:dst可以继承后面所有的所有
dst:容器对象
src:要被继承的目标对象,可以是多个
}
代码案例:{
js:{
$scope.extend=function(){
$scope.body={//body这个对象有一个cry方法
cry:function(){
alert("cry");
}
}
$scope.equData={};//在作用域中声明一个空对象
angular.extend($scope.equData,$scope.body);//可以多继承和单继承
$scope.equData.cry();//调用继承了的方法
}
}
html:{
<button ng-click="extend()">继承方法</button>
}
}
7.angular.foreach(list,fn);{概括:循环遍历数组或者集合
list:可以是数组或集合数据源
fn:函数,数组时的函数写法:fn(array[i],index,array)。集合时的函数写法:fn(value,key)
}
代码案例:{
js:{
$scope.foreach2=function(){
var list={name:'张三',age:'20',sex:'男'};
angular.forEach(list,function(val,key){
alert(key+","+val);
});
};
}
html:{
<p>遍历list键值对{name:'张三',age:'20',sex:'男'}</p>
<buttonng-click="foreach2()">angular.foreach2</button>
}
}
8.angular.fromJson(jsonString);{概括:将传入的json字符串转为json对象
jsonString:json字符串
}
代码案例:{ 注:这里传入的json字符串格式必须是外面单引号,内部双引号,否则会出错
js:
$scope.fromjson=function(){
var json='{"name":"张三","age":"20","sex":"男"}';
var obj=angular.fromJson(json);
alert("姓名:"+obj.name+",年龄:"+obj.age+",性别:"+obj.sex);
}
html:
<p>json字符串转对象'{"name":"张三","age":"20","sex":"男"}'</p>
<button ng-click="fromjson()">angular.fromJson</button>
}
9.angular.isArray(value);{概括:判断是否是数组
value:array数组
}
代码案例:{
js:
$scope.isArray=function(){
var array=["a","b","c"];
var da=angular.isArray(array);
alert(da);
};
html:
<div>数组["a","b","c"];</div>
<div><input type="button" ng-click="isArray()" value="angular.isArray"/></div>
}
10.angular.isDate(val);{概述:判断是否是日期
用法同isArray
}
11.angular.isDefined(val);{概述:判断是否为defined,否则为undefined
用法同isArray
}
12.angular.isElement(val){概述:判断是否是标签
用法同isArray
}
......省略以下同种方法
13.angular.lowercase(string);{概述:转小写
var sd="DASKDNadladlsa";
var djk=angular.lowercase(sd);
alert(djk);
}
14.angular.module(moduleName,[]){概括:允许我们定义自己的模块,这个模块具有被注入到其他模块中使用
moduleName:当前模块的名称
[]:这里可以是其他的模块命名,不为空之后就能使用被注入进来的模块中元素了。
代码:{
angular.module("app", [ "controls", "data"])
// controls.js (controls 模块依赖于data 模块)
angular.module("controls", [ "data" ])
// data.js (data 模块没有依赖项,数组为空)
angular.module("data", [])
}
}
15.angular.toJson(json,pretty){概括:json对象转字符串
json:json对象
pretty:控制输出的字符串格式
代码:{
angular.toJson({name:'xxx'});
//$ "{"name":"xxx"}"
angular.toJson({name:'xxx'},true);
//$ "{
//$ "name": "xxx"
//$ }"
angular.toJson({name:'xxx'},10);
//$ "{
//$ "name": "xxx"
//$ }"
}
}
................下一章angular_directive指令.....
- 常见内置指令:
- ng-app 指定应用根元素,至少有一个元素指定了此属性。
- ng-controller 指定控制器
- ng-show 控制元素是否显示,true显示、false不显示
- ng-hide 控制元素是否隐藏,true隐藏、false不隐藏
- ng-if 控制元素是否“存在”,true存在、false不存在
- ng-src 增强图片路径
- ng-href 增强地址
- ng-class 控制类名
- ng-include 引入模板
- ng-disabled 表单禁用
- ng-readonly 表单只读
- ng-checked 单/复选框表单选中
- ng-selected 下拉框表单选中
- ng-init 初始化数据