Angularjs-基础教程
一些angualr的基础概念，适合入门。
1.下载
推荐 bower 或 npm 安装。
bower install angular
bower install angular-route
2.简单介绍使用
1.ng-app
决定了angularjs的作用域范围，你可以如下使用
//让angularjs渲染整个页面
<html ng-app>
...
</html>
//让angular只作用于某div,渲染页面的一部分
<div ng-app='myapp'>
...
</div>
2.ng-model
模型和视图的双向数据绑定. ng-model 称为指令 {{test}} 插值表达式,实际上也是一个指令
譬如<input type="text" ng-model='test' /> <p>{{test}}</p> ,当你在文本框输入时，数据模型被改变，{{test}}的值跟着改变。
<!doctype html>
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
</head>
<body ng-app>
<input ng-model='test' >
<p>{{test}}</p>
</body>
</html>
3.angular.module
语法：angular.module(moduleName, [requires], [configFn]); 用于创建、获取模块。
var app = angular.module(name, [requires], [configFn]);
//name 创建或获取的模块名
//requires 依赖的模块数组，['ngRoute','ngAnim',..]
//configFn 配置函数，同module.config
4.controller
控制器和作用域对象是一一对应的，控制器内定义为作用域初始化数据和方法
mycontroller = mymodule.controller('name', Constructor); //传入控制器名 和 控制器构造函数
<!doctype html>
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('TestCtrl',function($scope){
$scope.test="hello word";
});
</script>
</head>
<body ng-app='myapp' ng-controller='TestCtrl' >
<input ng-model='test'>{{test}}
</body>
</html>
5.value
value方法是定义服务的方式之一，类似 constant,factory,service
//name是service的名称，object是值,
mymodule.value(name, object); // 其实就是配置模块内的变量和它的值
<!doctype html>
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
</head>
<body ng-app='myapp' ng-controller='mytest' >
<input ng-model='test'>{{test}}
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.value('testvalue','word');
//使用value方法定义的服务
app.controller('mytest',function($scope,testvalue){
$scope.test="hello "+ testvalue;
});
</script>
</body>
</html>
5.factory
语法 mymodule.factory(serciceName, providerFn); 调用工厂函数providerFn，返回的对象即为对应的服务。
<!doctype html>
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('myapp',[])
.value('user','sindy')
.factory('greetSvc',function(user){
return{
greeting:function(){
return "this can output : hello "+ user;
}
}
});
app.controller('mytest',function($scope,user,greetSvc){
$scope.test = "hello "+ user;
$scope.output = greetSvc.greeting();
});
</script>
</head>
<body ng-app='myapp' ng-controller='mytest' >
<input ng-model='test'>{{test}}
</p>
{{output}}
</body>
</html>
6.provider
语法： mymodule.provider(serviceName, providerFn); 实际上通过 new providerFn().$get()，来获得对应的服务, 跟 service方式定义服务的原理比较类似。
<!doctype html>
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('myapp',[])
.value('testvalue','sindy')
.provider('testprovider',
function(){
this.lable = "this will output : hello sindy";
this.$get = function () {
return this;
}
}
);
app.controller('mytest',function($scope,testvalue,testprovider){
$scope.test = "hello "+ testvalue;
$scope.output = testprovider.lable;
});
</script>
</head>
<body ng-app='myapp' ng-controller='mytest' >
<input ng-model='test'>{{test}}
</p>
{{output}}
</body>
</html>
7.service
语法： mymodule.service(serviceName, constructor); , 实际上通过 new constructor() 来获得对应的服务。
var app = angular.module('myapp',[])
.value('testvalue','sindy')
.service('testservice',
function(testvalue){
this.lable = function(){
return "this will output:hello "+testvalue;
}
}
);
app.controller('mytest',function($scope,testvalue,testservice){
$scope.test = "hello "+ testvalue;
$scope.output = testservice.lable();
});
8.constant
语法：mymodule.constant(serviceName, object); 模块内定义常量
var app = angular.module('myapp',[])
.value('user','sindy')
.constant('country','china')
.service('greetSvc',
function(user, country){
this.hello = function(){
return "hello everyone, I am " + user + ", come from " + country;
};
}
);
app.controller('myctrl',function($scope,user,greetSvc){
$scope.test = "hello "+ user;
$scope.output = greetSvc.hello();
});
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular定义服务的方式</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<style type="text/css">
body{font-size:20px;}
.dashed{border-bottom:1px dashed #555; padding:20px;}
p{line-height:2;}
input[type="text"]{padding:5px; /*height:30px;*/ line-height:30px; min-300px; font-size:20px; font-weight:thin;}
h1{border-top:1px solid hotpink;}
</style>
</head>
<body ng-app="myapp">
<script type="text/javascript">
// angular.module(modulename,requires,[configFn]);
//注意： Array: requires参数是必须的
mymodule = angular.module('myapp',[]);
// mymodule.controller(name, constructor);
mymodule.controller('myctrl', function($scope){ //内置对象 带$前缀
$scope.test = "hello angularjs!";
});
// 配置模块中可用的变量 指定它的值，变量可以注入各个controller中
//mymodule.value(name,obj)
mymodule.value('myname', 'alice');
// 以注入方式使用模块定义的变量
mymodule.controller('myctrl2', function($scope, myname){//注入模块定义的变量
$scope.username = myname + ', sindy';
});
// 创建服务 providerFn执行的结果 赋值给声明的模块变量name
// mymodule.factory(name, providerFn)
mymodule.factory('mysvc', function(myname){//注入模块定义的变量
return {
hi: function(){
return "hi, nice to meet you! i'm " + myname;
}
};
});
// 使用服务 注入方式
mymodule.controller('myctrl3', function($scope, myname, mysvc){
$scope.username = myname;
$scope.greeting = mysvc.hi();
});
// 其实value, factory, provider都是创建模块内的变量和方法
// value, factory返回的是值 (各种类型 string, obj, fn); provider是构造函数，在被注入使用时会自动new providerFn().$get()
// 所以 value, factory, provider的作用都是定义模块内的数据和方法， 以便被内部的控制器使用(注入方式)
// mymodule.provider(name, constrctor){
// 创建provider
mymodule.provider('myprd', function(){//这个构造函数内不能注入变量
// this.username = myname;
this.hi = function(){
return 'hello, glad to see you, i am ';
};
this.$get = function(){ return this; };
});
//provider方法内部的执行过程应该类似这样的：
/*mymodule.provider(prdname, fn){
prdname = (new fn()).$get();
}*/
mymodule.controller('myctrl4', function($scope, myname, myprd){
$scope.username = myname;
$scope.greeting = myprd.hi();
});
//service 和 provider差不多，只是service可以注入模块内定义的变量
//mymodule.service(name, construction){ name constction感觉就是函数名和函数体的关系
//创建service
mymodule.service('svc',function(myname){
this.username = myname;
this.hi = function(){ return "so happy to see you again~~, " + myname; };
});
// mymodule.service内部的执行过程应该类似这样：
/*mymodule.service(svcname,fn){
svcname = function(myname){ return new fn(myname) ;}('sindy'); //用自执行匿名函数包装 new fn(para),para由依赖系统注入自执行匿名函数
}*/
// 使用service
mymodule.controller('myctrl5', function($scope, myname, svc){
$scope.username = myname;
$scope.greeting = svc.hi();
});
// 在模块内定义常量
// mymodule.constant(name, obj);
mymodule.constant('age', 25);
// 使用常量 跟value, factory, provider, service等模块内数据一样，通过注入的方式使用
mymodule.controller('myctrl6', function($scope, age, myname){
$scope.howold = "you are " + age + " years old.";
$scope.username = myname;
});
</script>
<div ng-controller="myctrl">
<h1>双向数据绑定</h1>
<p><input type="text" ng-model="test" /> {{test}}</p>
</div>
<div ng-controller="myctrl2">
<h1>mymodule.value</h1>
<p><input type="text" ng-model="username" /> myname is:{{username}}</p>
</div>
<div ng-controller="myctrl3">
<h1>mymodule.factory</h1>
<h3 class="dashed">{{username}}</h3>
<input type="text" ng-model="greeting" />
</div>
<div ng-controller="myctrl4">
<h1>mymodule.provider</h1>
<h3 class="dashed">{{username}}</h3>
<input type="text" ng-model="greeting" />
</div>
<div ng-controller="myctrl5">
<h1>mymodule.service</h1>
<h3 class="dashed">{{username}}</h3>
<input type="text" ng-model="greeting" />
</div>
<div ng-controller="myctrl6">
<h1>mymodule.constant</h1>
<h3 class="dashed">{{username}} {{howold}} </h3>
</div>
</body>
</html>