您的位置：首页 > Web前端 > AngularJS

Angularjs基础教程

2016-04-07 13:55 666 查看

Angularjs-基础教程

一些angualr的基础概念，适合入门。

1.下载

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航