首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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基础教程

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

angularjs基础教程

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
JQuery datepicker 使用方法
May 20 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
javascript求日期差的方法
Mar 02 Javascript
理解AngularJs篇：30分钟快速掌握AngularJs
Dec 23 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
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
TableField(1) 子查询(1) mounted(1)  AD域(1) 日志格式分析(1) 组策略(1) destoon(1) create(1) nginx(76) Windows server 2012(17)
You might like
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php实现可运算的验证码
2015/11/10 PHP
php面向对象重点知识分享
2019/09/27 PHP
javascript全局变量封装模块实现代码
2012/11/28 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
Javascript动画效果（1）
2016/10/11 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
Python中的Numpy入门教程
2014/04/26 Python
python实现从web抓取文档的方法
2014/09/26 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
python如何进行矩阵运算
2020/06/05 Python
Office DEPOT法国官网：欧迪办公用品采购
2018/01/03 全球购物
中国旅游网站：途牛旅游网
2019/09/29 全球购物
2014年结对帮扶工作总结
2014/12/17 职场文书
2015年公务员工作总结
2015/04/24 职场文书
好员工观后感
2015/06/17 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
Javascript之datagrid查询详解
2021/09/15 Javascript