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

  1. AngularJS基础入门初探

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

  2. AngularJS基础知识1

    一.angularJS简介 1.什么是 AngularJS? AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.AngularJS是协助搭建单页面工程 ...

  3. AngularJS基础概念

    作用域.控制器.指令 作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方. 作用域是应用状态的基础.基于动 ...

  4. AngularJs基础总结(1.4版本)

    注明:现在用的是最新的1系列1.4版本. 一.细节方面入手: 1,ng-app根节点,一般别写在html上面,最多也就写在body就行了,因为我们难免会忘记这个写在哪里,然后复制一些案例代码却总报错. ...

  5. Angularjs基础教程

    Angularjs-基础教程 一些angualr的基础概念,适合入门. 1.下载 推荐 bower 或 npm 安装. bower install angular bower install angu ...

  6. AngularJS基础总结

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

  7. Angularjs基础（学习整理）

    AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. ...

  8. 3天学习完AngularJS基础内容小结

    简介:AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. 一.AngularJS大致功能模块 二.页面交互变得简单 1.示例:计算价格 <htm ...

  9. 一步一步弄懂angularJS基础

    问题1:ng-app指令的使用以及自定义指令 <!doctype html> <!--这里的ng-app的属性值就是模块的名称,也就是 angular.module("My ...

  10. AngularJS基础知识2

    一.angularJS双向数据绑定 利用双向数据绑定,不仅能把数据模型的变化同步到视图上面,还可以利用双向数据绑定的特性来做一些样式上面的控制. 双向数据绑定用处很多,不仅仅是像知识点1中的那个例子, ...

随机推荐

  1. module

    扯淡的人 http://www.cnblogs.com/yuanchenqi/articles/5732581.html 不被调用的    要写在这下面 1 if __name__=="__ ...

  2. fontcreator制作iconfont(包含两个教程)

    第一步 在AI中画好矢量图,或者是在PS中将纯色的图片存成PNG格式,最好是放大很多倍的纯色图片.因为导入到fontcreator中会显得很小,如果不是矢量,图片拉大后就会有锯齿状. 第二步 选中AI ...

  3. Android高手速成

    第一部分 个性化控件(View)    http://www.cnblogs.com/huwei0814/p/3796659.html 第二部分 工具库    http://www.cnblogs.c ...

  4. 百度地图API功能集锦

    1.点个数太多导致加载缓慢的解决. 2.可视化区域内加载的解决. 3.自定义信息窗口解决. 4.区域/板块/商圈等的绘制功能解决. 基本包含了用到百度地图API会使用到的大部分常规性场景.(聚合点功能 ...

  5. Django 之 ForeignKey、ManyToMany的访问方式

    1.ForeignKey 情况I: from django.db import models class Blog(models.Model): pass class Entry(models.Mod ...

  6. Mac 配置Charles抓https的包

    安装Charles 这个简单,略过... 打开Charles,在Menu选择Help > Install Charles CA SSL Certificate Keychain Access(钥 ...

  7. 一段比较有意思的代码——介绍system verilog中的新增幅值语句

    system verilog中新加了很多幅值语句,虽然都只适用于阻塞幅值,但是在某些场合中非常实用. 下面是一段有意思的代码,覆盖了一些用法. package definitions; typedef ...

  8. Socket网络编程-基础篇

    Socket网络编程 网络通讯三要素: IP地址[主机名] 网络中设备的标识 本地回环地址:127.0.0.1 主机名:localhost 端口号 用于标识进程的逻辑地址 有效端口:0~65535 其 ...

  9. excel2003出现“向程序发送命令时出现错误”解决方法

    电脑已经预装了office2010,因为想要学习 <Excel 图标之道>,安装了Excel2003,刚刚安装好,打开出现“向程序发送命令时出现错误”,虽然点击确定就可以用了,可总是觉得不 ...

  10. 解决VML遭遇IE8和XHTML DOCTYPE时不能运行的问题（转）

    原文网址:http://blog.csdn.net/cuixiping/article/details/4227283  以下代码在IE运行正常 <!DOCTYPE HTML PUBLIC &q ...