angularjs基础教程  更新时间:2014年12月25日 16:59:37   投稿:hebedich   AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。 很久没有写过东西了,感觉写东西都不知道从哪里开始了,现在还是先写点技术性的吧,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的作用域范围,你可以如下使用 复制代码 代码如下: …  来让angularjs渲染整个页面,也可以使用 复制代码 代码如下: …… 来渲染其中的一部分。 2.ng-model ng-model,当你的数据模型被改变的时候,譬如ng-model=’test’,其中这个test的数值被改变的时候,{{test}}的数值也将跟随改变,也就是连接到ng-model中的test也跟随改变,如下 复制代码 代码如下:                     learing argularjs–widuu             {{test}}     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是控制器构造函数,我们利用一段代码来说明 复制代码 代码如下:                             learing argularjs–widuu             {{test}}     5.value value也是angular.Module中的方法value(name, object);其中name是service的名称,object是服务器实例对象,这个时候我们就可以把上边的代码修改正成这样 复制代码 代码如下:                             learing argularjs–widuu             {{test}}     5.factory factory也是angular.Module中的方法factory(name, providerFunction);;其中name是service的名称,providerFunction是函数用于创建新的服务器对象,这个时候我们就可以把上边的代码修改正成这样 复制代码 代码如下:                             learing argularjs–widuu             {{test}}             {{output}}     6.provider provider也是angular.Module中的方法provider(name, providerType);其中name是service的名称,providerFunction是函数用于创建新的服务器对象,这个跟factory差不多,我们现在用provider重写 复制代码 代码如下:                             learing argularjs–widuu             {{test}}             {{output}}     7.service service也是angular.Module中的方法service(name, constructor);其中name是service的名称,constructor一个将被实例化的构造函数,这个跟factory差不多,我们现在用service重写 复制代码 代码如下:                             learing argularjs–widuu             {{test}}             {{output}}     8.constant constant也是angular.Module中的方法constant(name, object);其中name是常量的名称,而object是常量的值,我们可以这样写的 复制代码 代码如下:                             learing argularjs–widuu             {{test}}             {{output}}     今天就写到这里,然后以后继续. 您可能感兴趣的文章: AngularJS基础知识笔记之表格 AngularJS基础知识笔记之过滤器 Angularjs基础知识及示例汇总 AngularJS基础知识 Angularjs 基础入门 AngularJS基础 ng-options 指令详解 AngularJS基础 ng-include 指令示例讲解 AngularJS基础 ng-init 指令简单示例 angularJS 入门基础 AngularJS学习第一篇 AngularJS基础知识 angularjs 基础教程 相关文章 AngularJS实现星星等级评分功能 这篇文章主要为大家详细介绍了AngularJS实现星星等级评分功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-09-09 angularjs的一些优化小技巧 这篇文章主要介绍了angularjs的一些优化小技巧,本文总结了5种优化技巧,如一次绑定、尽可能少调用 ng-repeat、尽量在指令里写原生语法、页面内尽量少用filters等,需要的朋友可以参考下 2014-12-12 AngularJS 双向数据绑定详解简单实例 这篇文章主要介绍了AngularJS 双向数据绑定详解简单实例的相关资料,需要的朋友可以参考下 2016-10-10 浅谈angular懒加载的一些坑 下面小编就为大家带来一篇浅谈angular懒加载的一些坑。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-08-08 AngularJS中的路由使用及实现代码 本篇文章主要介绍了AngularJS中的路由使用及实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-10-10 详解angularjs中如何实现控制器和指令之间交互 本篇文章主要介绍了详解angularjs中如何实现控制器和指令之间交互,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-05-05 Angular2内置指令NgFor和NgIf详解 Directive的概念在Angular 1.x就存在了,我对它的认识比较模糊,所以直接通过一些例子来说明。Angular提供的内置执行有很多,这次使用两个:ngFor、ngIf。 2016-08-08 基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码 这篇文章主要给大家介绍基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动的实例代码,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧 2016-05-05 剖析Angular Component的源码示例 本篇文章主要介绍了剖析Angular Component的源码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-03-03 详解Angular路由动画及高阶动画函数 本文主要讲解了Angular的路由动画和高阶动画函数,对此感兴趣的同学,可以把代码亲自实验一下,理解其原理。 2021-05-05 最新评论

很久没有写过东西了,感觉写东西都不知道从哪里开始了,现在还是先写点技术性的吧,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>

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>

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>

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基础知识笔记之过滤器
  • Angularjs基础知识及示例汇总
  • AngularJS基础知识
  • Angularjs 基础入门
  • AngularJS基础 ng-options 指令详解
  • AngularJS基础 ng-include 指令示例讲解
  • AngularJS基础 ng-init 指令简单示例
  • angularJS 入门基础
  • AngularJS学习第一篇 AngularJS基础知识
张贴在3