angularJs基础
AngularJs是为了克服Html在构建应用上的不足而设计的。Html是一门很好的为静态文件展示设计的声明式语言，但是要构建web应用的话就显得乏力了。所以我做了一些工作来让浏览器做我瞎向要的事。
很久没有写过东西了，感觉写东西都不知道从哪里开始了，还是先写点技术性的吧，angularJs--我喜欢把它叫做“俺哥啦Js”
1.简单介绍使用ng-app
决定了angularJs的作用域范围，你可以如下使用
代码如下：
<html ng-app>
....
</html>
来让angularjs渲染整个页面，你也可以使用
代码如下：
<div ng-app="myapp">
...
</div>
来渲染其中的一部分。
2.ng-model
ng-model,当你的数据模型被改变的时候，譬如ng-model="test",其中这个test的数值被改变的时候，{{test}}的值也将跟随改变，也就是连接到ng-model中的test也跟随改变，如下
代码如下：
<!doctype html>
<html>
<head>
<script src="angular.min.js" ></script>
<title>learing argularJs</title>
</head>
<body ng-app>
<input ng-model='test'>{{test}}
</body>
</html>
3.angular.module
这个主要做模板的注册，创建和索引，譬如我们ng-app想把这个注册成为一个服务就要用，当我们引用索引一个模块的时候也要使用
代码如下：
angular.module(name,[requires],[configFn]);
#name 类型string创建的名称，自己定义
#require 简单理解就是你需要包含的使用木块，譬如ngRoute路由模块
#configFn 可以选配的功能模块，功能和module.config类似
4.controller
controlller英文是控制器，是angular.Module的方法controller(name,constructor);其中那么是controller的名字，constructor是控制器构造函数，我们利用一段代码来来说明
代码如下：
<!doctype html>
<html>
<head>
<script src="angular.min.js"><script>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("mytest",function($scope){
$scope.test="你好，张强"
})；
</script>
<title>learning angularjs</title>
</head>
<body ng-app="myapp" ng-controller="mytest">
<input ng-model='test'>{{test}}
</body>
</html>
5.value
value也是angular.model中的方法value(name,object);其中那么是service的名称，object是服务器实例对象，这个时候我们可以把上面的代码修改成这样：
代码如下：
<!doctype html>
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('myapp',[])
.value('testvalue','word');
app.controller('mytest',function($scope,testvalue){
$scope.test="hello "+ testvalue;
});
</script>
<title>learing argularjs--widuu</title>
</head>
<body ng-app='myapp' ng-controller='mytest' >
<input ng-model='test'>{{test}}
</body>
</html>
5.factory
factory也是angular.Module中的方法factory(name, providerFunction);;其中name是service的名称，providerFunction是函数用于创建新的服务器对象,这个时候我们就可以把上边的代码修改正成这样
<!doctype html>
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('myapp',[])
.value('testvalue','widuu')
.factory('testfactory',function(testvalue){
return{
lable:function(){
return "this can output : hello "+ testvalue;
}
}
});
app.controller('mytest',function($scope,testvalue,testfactory){
$scope.test = "hello "+ testvalue;
$scope.output = testfactory.lable();
});
</script>
<title>learing argularjs--widuu</title>
</head>
<body ng-app='myapp' ng-controller='mytest' >
<input ng-model='test'>{{test}}
{{output}}
</body>
</html>
6.provider
provider也是angular.Module中的方法provider(name, providerType);其中name是service的名称，providerFunction是函数用于创建新的服务器对象,这个跟factory差不多，我们现在用provider重写
<!doctype html>
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('myapp',[])
.value('testvalue','widuu')
.provider('testprovider',
function(){
this.lable = "this will output : hello widuu";
this.$get = function () {
return this;
}
}
);
app.controller('mytest',function($scope,testvalue,testprovider){
$scope.test = "hello "+ testvalue;
$scope.output = testprovider.lable;
});
</script>
<title>learing argularjs--widuu</title>
</head>
<body ng-app='myapp' ng-controller='mytest' >
<input ng-model='test'>{{test}}
{{output}}
</body>
</html>
7.service
service也是angular.Module中的方法service(name, constructor);其中name是service的名称，constructor一个将被实例化的构造函数,这个跟factory差不多，我们现在用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','widuu')
.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();
});
</script>
<title>learing argularjs--widuu</title>
</head>
<body ng-app='myapp' ng-controller='mytest' >
<input ng-model='test'>{{test}}
{{output}}
</body>
</html>
8.constant
constant也是angular.Module中的方法constant(name, object);其中name是常量的名称，而object是常量的值，我们可以这样写的
<!doctype html>
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('myapp',[])
.value('testvalue','widuu')
.constant('count',23)
.service('testservice',
function(testvalue,count){
this.lable = function(){
return "this will output:hello "+testvalue+",age is "+count;
}
}
);
app.controller('mytest',function($scope,testvalue,testservice){
$scope.test = "hello "+ testvalue;
$scope.output = testservice.lable();
});
</script>
<title>learing argularjs--widuu</title>
</head>
<body ng-app='myapp' ng-controller='mytest' >
<input ng-model='test'>{{test}}
{{output}}
</body>
</html>
今天就先写到这里。拜拜
angularJs基础的更多相关文章
- AngularJS基础入门初探
一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
- AngularJS基础知识1
一.angularJS简介 1.什么是 AngularJS? AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.AngularJS是协助搭建单页面工程 ...
- AngularJS基础概念
作用域.控制器.指令 作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方. 作用域是应用状态的基础.基于动 ...
- AngularJs基础总结(1.4版本)
注明:现在用的是最新的1系列1.4版本. 一.细节方面入手: 1,ng-app根节点,一般别写在html上面,最多也就写在body就行了,因为我们难免会忘记这个写在哪里,然后复制一些案例代码却总报错. ...
- Angularjs基础教程
Angularjs-基础教程 一些angualr的基础概念,适合入门. 1.下载 推荐 bower 或 npm 安装. bower install angular bower install angu ...
- AngularJS基础总结
w3shools angularjs教程 wiki <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...
- Angularjs基础（学习整理）
AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. ...
- 3天学习完AngularJS基础内容小结
简介:AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. 一.AngularJS大致功能模块 二.页面交互变得简单 1.示例:计算价格 <htm ...
- 一步一步弄懂angularJS基础
问题1:ng-app指令的使用以及自定义指令 <!doctype html> <!--这里的ng-app的属性值就是模块的名称,也就是 angular.module("My ...
- AngularJS基础知识2
一.angularJS双向数据绑定 利用双向数据绑定,不仅能把数据模型的变化同步到视图上面,还可以利用双向数据绑定的特性来做一些样式上面的控制. 双向数据绑定用处很多,不仅仅是像知识点1中的那个例子, ...
随机推荐
- SOAP（简单对象访问协议）
ylbtech-Miscellaneos:SOAP(简单对象访问协议) A,返回顶部 1, 简单对象访问协议是交换数据的一种协议规范,是一种轻量的.简单的.基于XML(标准通用标记语言下的一个子集)的 ...
- Audio 的一些小笔记
1.在做项目的过程中,对于volume 我们有一个volume curve,就是 0~63 step,每个step对应一个dB值,例如0step对应-90dB, 63 step对应0dB.关于这个0d ...
- php 二维数组排序，多维数组排序
对2维数组或者多维数组排序是常见的问题,在php中我们有个专门的多维数组排序函数,下面简单介绍下: array_multisort(array1,sorting order, sorting type ...
- PC机上的COM1口和COM2口
现在PC机一般有两个串行口COM1和COM2. 串口叫串行接口 串口与并口不同之处:数据和控制信息时一位接一位地传送出去的,虽然速度慢,但传送距离较并口会更长,因此若要进行较长距离的通行时,应该使用串 ...
- ubuntu12.04 安装mac主题
1.下载主题包我把主题上传到了csdn的资源栏目,下载地址:http://download.csdn.net/detail/chenjiebin/4531537 2.将/mac/sharc/theme ...
- Windows MFC 两个OpenGL窗口显示与线程RC问题
问题为:背景界面是一个OpenGL窗口(对话框),在其上弹出一个OpenGL窗口(模态对话框)时, 1.上方的OpenGL窗口能响应鼠标操作等并刷新: 2.当移动或放大缩小上方的OpenGL窗口时,其 ...
- css狂记
接着上一篇 html狂记,同样是DIV+CSS传统站点开发,同样只是收集.整理... CSS 背景属性(Background) 属性 描述 CSS background 在一个声明中设置所有的背景属性 ...
- Node.js 自学之旅
学习基础,JQuery 原生JS有一定基础,有自己一定技术认知(ps:原型链依然迷糊中.闭包6不起来!哎!) 当然最好有语言基础,C#,java,PHP等等.. 最初学习这个东西的原因很简单,在园子里 ...
- Thinkphp源码分析系列（九）–视图view类
视图类view主要用于页面内容的输出,模板调用等,用在控制器类中,可以使得控制器类把表现和数据结合起来.下面我们来看一下执行流程. 首先,在控制器类中保持着一个view类的对象实例,只要继承自控制器父 ...
- 用rpm -e 将yum命令删除了，如何修复
系统环境: 物理机:Windows 10 家庭中文版 虚拟机:VMware Workstation 10 Linux发行版本:CentOS 6.5 相关信息查询: 首先查询,系统安装的yum包的信息: ...