首页
所有分类
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不是基础的基础
Dec 24 Javascript
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)
Jun 21 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
全面分析JavaScript 继承
May 30 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
封装一下vue中的axios示例代码详解
Feb 16 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
caddy(1) Slave(1) Master(1) variables(1) 表约束(2) 封装(1) ESXI(1) transaction(1) 主从复制(1) 百度地图(1)
You might like
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
一些mootools的学习资源
2010/02/07 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
js实现楼层导航功能
2017/02/23 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中类型关系和继承关系实例详解
2015/05/25 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python中数组和矩阵乘法及使用总结（推荐）
2019/05/18 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
python绘制规则网络图形实例
2019/12/09 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
美国宠物用品网站：Value Pet Supplies
2018/03/17 全球购物
俄罗斯药房连锁店：ASNA
2020/06/20 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
化学教师自荐信范文
2013/12/28 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
欢迎领导标语
2014/06/27 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Linux中各个目录的作用与内容
2022/06/28 Servers