Angularjs基础教程
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>
Angularjs基础教程的更多相关文章
- AngularJS 基础教程二:
5.过滤器 过滤器的主要功能是格式化数据 可以使用Angular提供的过滤器,也可以自定义过滤器 Angular过滤器: currency(货币).date(日期).filter(子串匹配).json ...
- AngularJS基础总结
w3shools angularjs教程 wiki <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- AngularJS基础入门初探
一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
- matlab基础教程——根据Andrew Ng的machine learning整理
matlab基础教程--根据Andrew Ng的machine learning整理 基本运算 算数运算 逻辑运算 格式化输出 小数位全局修改 向量和矩阵运算 矩阵操作 申明一个矩阵或向量 快速建立一 ...
- <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫
并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...
- Memcache教程 Memcache零基础教程
Memcache是什么 Memcache是danga.com的一个项目,来分担数据库的压力. 它可以应对任意多个连接,使用非阻塞的网络IO.由于它的工作机制是在内存中开辟一块空间,然后建立一个Hash ...
- Selenium IDE 基础教程
Selenium IDE 基础教程 1.下载安装 a 在火狐浏览其中搜索附件组件,查找 Selenium IDE b 下载安装,然后重启firefox 2.界面讲解 在菜单- ...
- html快速入门(基础教程+资源推荐)
1.html究竟是什么? 从字面上理解,html是超文本标记语言hyper text mark-up language的首字母缩写,指的是一种通用web页面描述语言,是用来描述我们打开浏览器就能看到的 ...
随机推荐
- 记录一个php强制下载文件函数
整理个经常用的强制下载文件的函数,之前就说把一些常用的东西整理出来结果老是没时间,最近陆续把这些东西整理下. public function download() { $id = $this-> ...
- 动态改变ComboBox下拉框的宽度
在C++Builder中有时下拉框的内容比较长,标准长度下根本显示不完,可以调用PostMessage()方法来实现 ::PostMessage(comb->Handle,CB_SETDROPP ...
- Log4Net Config Appender
整理了下以前项目中使用的Log4Net的Appender. 1:只记录在一个文件下的 <appender name="RollingFileAppenderFileSize" ...
- Invalid signature file digest for Manifest main attributes
Solving a Spark error: Invalid signature file digest for Manifest main attributes When using spark-s ...
- Android 数据库ORM框架GreenDao学习心得及使用总结<二>
转:http://blog.csdn.net/xushuaic/article/details/24496191 第五篇 查询 查询会返回符合某些特定标准的实体.你可以使用原始的SQL定制查询语句,或 ...
- Struts2部分标签
由于Struts多用OGNL语言所以使用给类标签之前需引入<%@taglib prefix="s" uri="/struts-tags"%> 1.f ...
- opengl笔记
GL_ARRAY_BUFFER(表示顶点数据) GL_ELEMENT_ARRAY_BUFFER(表示索引数据) GL_PIXEL_UNPACK_BUFEER( 表示传递给O p e n G L 的像素 ...
- 黑马程序员-- C语言交换两个整数变量值几种函数比较
总结了C语言中几种交换两个整数数值的函数,欢迎交流 #include <stdio.h> 使用多种交换变量值的函数比较 方法一:使用第三方临时变量 这种函数a,b只是值传递,实质上不能修交 ...
- codeigniter使用mongodb/redis
ci2.x版本,使用mongodb,需要安装pecl-php-mongo扩展(github上很多扩展已不可用,找到个可用版本纪录于此),添加到php.ini中 使用如下 public function ...
- html5 绘制集合图形
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...