• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > angularjs基础教程

angularjs基础教程

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs基础教程等相关知识,希望在学习及工作中可以帮助到您

很久没有写过东西了,感觉写东西都不知道从哪里开始了,现在还是先写点技术性的吧,angularjs–我兄弟把它叫成“俺哥啦js”

1.下载

官方网址:https://angularjs.org/
CDN:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js

</div>

2.简单介绍使用 1.ng-app

决定了angularjs的作用域范围,你可以如下使用

<html ng-app>
… 
</html>
</div>

来让angularjs渲染整个页面,也可以使用

<div ng-app='myapp'>
……
</div>

</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>
</div>

3.angular.module

这个主要是做模块的注册,创建和索引,譬如我们ng-app想把这个注册成为一个服务就要用,当我们引用索引一个模块的时候也要使用

angular.module(name, [requires], [configFn]);
#name       类型string创建的检索模块的名称
#requires   简单理解就是你需要包含的使用模块,譬如ngRoute路由模块
#configFn   可以选配的功能模块,功能和module.config类似
</div>

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>
</div>

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>
</div>

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;
                    }

您可能想查找下面的文章:

相关文章

  • 2017-05-30AngularJS入门教程之过滤器用法示例
  • 2017-05-30分享使用AngularJS创建应用的5个框架
  • 2017-05-30关于AngularJs数据的本地存储详解
  • 2017-05-30AngularJS 最常用的功能汇总
  • 2017-05-30如何在AngularJs中调用第三方插件库
  • 2017-05-30angular实现商品筛选功能
  • 2017-05-30AngularJS双向绑定和依赖反转实例详解
  • 2017-05-30简介可以自动完成UI的AngularJS工具angular-smarty
  • 2017-05-30深入浅析AngularJS和DataModel
  • 2017-05-30Angularjs中$http以post请求通过消息体传递参数的实现方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Angular 输入框实现自定义验证功能
    • Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
    • AngularJs Understanding the Model Component
    • 模板视图和AngularJS之间冲突的解决方法
    • AngularJS模板加载用法详解
    • 使用AngularJS处理单选框和复选框的简单方法
    • AngularJS实现数据列表的增加、删除和上移下移等功能实例
    • AngularJS自定义指令之复制指令实现方法
    • AngularJS实现使用路由切换视图的方法
    • Angularjs之filter过滤器(推荐)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有