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-width: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>