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基础教程的更多相关文章

  1. AngularJS 基础教程二:

    5.过滤器 过滤器的主要功能是格式化数据 可以使用Angular提供的过滤器,也可以自定义过滤器 Angular过滤器: currency(货币).date(日期).filter(子串匹配).json ...

  2. AngularJS基础总结

    w3shools    angularjs教程  wiki   <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...

  3. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  4. AngularJS基础入门初探

    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...

  5. matlab基础教程——根据Andrew Ng的machine learning整理

    matlab基础教程--根据Andrew Ng的machine learning整理 基本运算 算数运算 逻辑运算 格式化输出 小数位全局修改 向量和矩阵运算 矩阵操作 申明一个矩阵或向量 快速建立一 ...

  6. <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫

    并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...

  7. Memcache教程 Memcache零基础教程

    Memcache是什么 Memcache是danga.com的一个项目,来分担数据库的压力. 它可以应对任意多个连接,使用非阻塞的网络IO.由于它的工作机制是在内存中开辟一块空间,然后建立一个Hash ...

  8. Selenium IDE 基础教程

    Selenium IDE 基础教程 1.下载安装     a 在火狐浏览其中搜索附件组件,查找 Selenium IDE     b 下载安装,然后重启firefox 2.界面讲解      在菜单- ...

  9. html快速入门(基础教程+资源推荐)

    1.html究竟是什么? 从字面上理解,html是超文本标记语言hyper text mark-up language的首字母缩写,指的是一种通用web页面描述语言,是用来描述我们打开浏览器就能看到的 ...

随机推荐

  1. 记录一个php强制下载文件函数

    整理个经常用的强制下载文件的函数,之前就说把一些常用的东西整理出来结果老是没时间,最近陆续把这些东西整理下. public function download() { $id = $this-> ...

  2. 动态改变ComboBox下拉框的宽度

    在C++Builder中有时下拉框的内容比较长,标准长度下根本显示不完,可以调用PostMessage()方法来实现 ::PostMessage(comb->Handle,CB_SETDROPP ...

  3. Log4Net Config Appender

    整理了下以前项目中使用的Log4Net的Appender. 1:只记录在一个文件下的 <appender name="RollingFileAppenderFileSize" ...

  4. Invalid signature file digest for Manifest main attributes

    Solving a Spark error: Invalid signature file digest for Manifest main attributes When using spark-s ...

  5. Android 数据库ORM框架GreenDao学习心得及使用总结<二>

    转:http://blog.csdn.net/xushuaic/article/details/24496191 第五篇 查询 查询会返回符合某些特定标准的实体.你可以使用原始的SQL定制查询语句,或 ...

  6. Struts2部分标签

    由于Struts多用OGNL语言所以使用给类标签之前需引入<%@taglib prefix="s" uri="/struts-tags"%> 1.f ...

  7. opengl笔记

    GL_ARRAY_BUFFER(表示顶点数据) GL_ELEMENT_ARRAY_BUFFER(表示索引数据) GL_PIXEL_UNPACK_BUFEER( 表示传递给O p e n G L 的像素 ...

  8. 黑马程序员-- C语言交换两个整数变量值几种函数比较

    总结了C语言中几种交换两个整数数值的函数,欢迎交流 #include <stdio.h> 使用多种交换变量值的函数比较 方法一:使用第三方临时变量 这种函数a,b只是值传递,实质上不能修交 ...

  9. codeigniter使用mongodb/redis

    ci2.x版本,使用mongodb,需要安装pecl-php-mongo扩展(github上很多扩展已不可用,找到个可用版本纪录于此),添加到php.ini中 使用如下 public function ...

  10. html5 绘制集合图形

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...