首页
所有分类
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实现键盘方向键翻页功能的代码
Jun 03 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
JS 树形递归实例代码
May 18 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
React传值 组件传值 之间的关系详解
Aug 26 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
数据库卡死(1) 全局锁(1) IP(1) 限速(1) 内置模块(1) 限流(2) tcp/ip(1) 递归(1) update(2) 备份(2)
You might like
PHP数据类型之布尔型的介绍
2013/04/28 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
php绘制一个矩形的方法
2015/01/24 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
通用JS事件写法实现代码
2009/01/07 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
js实现聊天对话框
2020/02/08 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
python设置值及NaN值处理方法
2018/07/03 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
Python 迭代，for...in遍历，迭代原理与应用示例
2019/10/12 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
会计专业的自荐信
2013/12/12 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python