首页
所有分类
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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
javascript 文档的编码问题解决
Mar 01 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
Bootstrap table学习笔记（2） 前后端分页模糊查询
May 18 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
微信小程序实现刷脸登录
May 25 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
使用layui实现树形结构的方法
Sep 20 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
Git(3) swing(1) SandBox(1) calc(1) NTP(1) K8s(1) Windows Server 2022(3) OpenFeign(1) Windows Server(4) webpack(1)
You might like
php 生成随机验证码图片代码
2010/02/08 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
php计算title标题相似比的方法
2015/07/29 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
Python字符遍历的艺术
2008/09/06 Python
Python的迭代器和生成器
2015/07/29 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
Nike加拿大官网：Nike.com (CA)
2019/04/09 全球购物
Brasty罗马尼亚：购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
2014两会学习心得：榜样精神伴我行
2014/03/17 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
遗愿清单观后感
2015/06/09 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript
vscode内网访问服务器的方法
2022/06/28 Servers