首页
所有分类
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中判断控件是否存在
Aug 25 Javascript
潜说js对象和数组
May 25 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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) SRF-S84(1) S2000(3) Panasonic(1) 松下(1) SRF-S83(1) ICF-SW55(1) PL660(1) 根德(2)
You might like
简化php模板页面中分页代码的解析
2009/02/06 PHP
php的ajax简单实例
2014/02/27 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
Python如何定义接口和抽象类
2020/07/28 Python
如何用python 操作zookeeper
2020/12/28 Python
茵宝(Umbro)英国官方商店：英国足球服装生产商
2016/12/29 全球购物
美国旅游网站：Tours4Fun
2017/02/17 全球购物
地球上最先进的胡子和头发修剪器：Bevel
2018/01/23 全球购物
奇怪的鱼：Weird Fish
2018/03/18 全球购物
linux面试相关问题
2013/04/28 面试题
《搭石》教学反思
2014/04/07 职场文书
作风年建设汇报材料
2014/08/14 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
先进人物事迹材料
2014/12/29 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS