angularjs基础教程


Posted in Javascript onDecember 25, 2014

很久没有写过东西了,感觉写东西都不知道从哪里开始了,现在还是先写点技术性的吧,angularjs?我兄弟把它叫成“俺哥啦js”

1.下载

官方网址:https://angularjs.org/ 
CDN:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js

2.简单介绍使用 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" type="text/javascript"></script>

        <title>learing argularjs--widuu</title>

    </head>

    <body ng-app>

    <input ng-model='test' >{{test}}

    </body>

</html>

angularjs基础教程

3.angular.module

这个主要是做模块的注册,创建和索引,譬如我们ng-app想把这个注册成为一个服务就要用,当我们引用索引一个模块的时候也要使用

angular.module(name, [requires], [configFn]);

#name       类型string创建的检索模块的名称

#requires   简单理解就是你需要包含的使用模块,譬如ngRoute路由模块

#configFn   可以选配的功能模块,功能和module.config类似

4.controller

controller是angular.Module中的方法controller(name, constructor);其中name是controller的名字,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('mytest',function($scope){

            $scope.test="hello word";

        });

        </script>

        <title>learing argularjs--widuu</title>

    </head>

    <body ng-app='myapp' ng-controller='mytest' >

    <input ng-model='test'>{{test}}

    </body>

</html>

angularjs基础教程

5.value

value也是angular.Module中的方法value(name, object);其中name是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}}

    </p>

        {{output}}

    </body>

</html>

angularjs基础教程

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}}

    </p>

        {{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}}

    </p>

        {{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}}

    </p>

        {{output}}

    </body>

</html>

angularjs基础教程

今天就写到这里,然后以后继续.

Javascript 相关文章推荐
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
jQuery中detach()方法用法实例
Dec 25 #Javascript
jQuery中remove()方法用法实例
Dec 25 #Javascript
jQuery中replaceWith()方法用法实例
Dec 25 #Javascript
jQuery中before()方法用法实例
Dec 25 #Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 #Javascript
jQuery中after()方法用法实例
Dec 25 #Javascript
jQuery中prepend()方法用法实例
Dec 25 #Javascript
You might like
PHP实现网上点歌(二)
2006/10/09 PHP
adodb与adodb_lite之比较
2006/12/31 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python删除服务器文件代码示例
2018/02/09 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python把1变成01的步骤总结
2019/02/27 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
给老婆大人的检讨书
2014/02/24 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
职业规划实施方案
2014/06/10 职场文书
学校清明节活动总结
2014/07/04 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
营业员岗位职责范本
2015/04/14 职场文书
公司周年庆寄语
2019/06/21 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers