如何使用angularJs

2024-02-24 05:57:02 65

本期更新，博主将给大家分享一些AngularJs常用的一些属性和方法，AngularJS是由Google的员工MiškoHevery从2009年开始着手开发。这是一个非常好的构想，该项目目前已由Google正式支持，有一个全职的开发团队继续开发和维护这个库。AngularJS是一个JavaScript框架。它是一个以JavaScript编写的库。因此，有一定JavaScript基础的朋友会更容易理解，其中的一些用法也可参照Javascript的使用方法。

一、AngularJS入门之指令与表达式

AngularJS通过指令扩展了HTML，且通过表达式绑定数据到HTML。

【AngularJS常用指令】

1、ng-app:声明Angular所管辖的区域。一般写在body或html上，原则上一个页面只有一个；

2、ng-model:把元素值（比如输入域的值）绑定到应用程序的变量中。

3、ng-bind:把应用程序变量中的数据绑定到HTML视图中。可用表达式{{}}替代；

4、ng-init:初始化AngularJS应用程序中的变量。

5、表达式：{{}}绑定表达式，可以包含文字、运算符和变量。但表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=""替代

【基本概念】

1、指令：AngularJS中，通过扩展HTML的属性提供功能。所以，ng-开头的新属性，被我们成为指令





AngularJS入门




{{name}}

我的第一个表达式：{{5+""+5+',Angular'}}

//varinput1=document.getElementById("input"); //vardiv=document.getElementById("div"); // //input1.onkeyup=function(){ //div.innerHTML=input1.value; //} //$("#input").keyup(function(){ //$("#div").html($("input").val()); //});

二、AngularJS中的MVC与作用域

[MVC三层架构]

1、Model(模型)：应用程序中用于处理数据的部分。(保存或修改数据到数据库、变量等)。AngularJS中的Model特指的是：数据

View(视图)：用户看到的用于显示数据的页面；

Controller(控制器)：应用程序中处理用户交互的部分。负责从视图读取数据，控制用户输入，并向模型发送数据。

2、工作原理：用户从视图层发出请求，controller接收到请求后转发给对应的model处理，model处理完成后返回结果给controller，并在view层反馈给用户。

主要用于CRUD类应用，不适合游戏开发和DOM操作

创建一个Angular模块，即ng-app所绑定的部分,需传递两个参数：

①模块名称，即ng-app所需要绑定的名称。ng-app="myApp"

②数组：需要注入的模块名称，不需要可为空。

varapp=angular.module("myApp",[]);

在Angular模块上，创建一个控制器Controller，需要传递两个参数

①Controller名称，即ng-controller需绑定的名称。ng-controller="myCtrl"

②Controller的构造函数：构造函数可以传入多个参数，包括$scope/$rootScope以及各种系统内置对象；

[AngularJS中的作用域]

①$scope:局部作用域，声明在$scope上的属性和方法，只能在当前Controller中使用；

②$rootScope:根作用域，声明在$rootScope上的属性和方法，可以在ng-app所包含的任何区域使用(无论是否同一Controller，或是否在Controller包含范围中)。

>>>若没有使用$scope声明变量，而直接在html中使用ng-model绑定的变量作用域为：

1.如果ng-model在某个ng-controller中，则此变量会默认绑定到当前Controller的$scope上；

2.如果ng-model没有在任何一个ng-controller钟，则此变量将绑定在$rootScope上；

app.controller("myCtrl",function($scope,$rootScope){
//$scope.name="name1";
$rootScope.age=14;
$scope.classes={
name:"H51701",
num:"33"
};
});
app.controller("myCtrl1",function(){
});

三、Angular过滤器

AngularJS中，过滤器可以使用一个管道字符（|）添加到表达式和指令中。

>>>系统内置过滤器：

currency 格式化数字为货币格式。

filter 从数组项中选择一个子集。

lowercase 格式化字符串为小写。

orderBy 根据某个表达式排列数组。

uppercase 格式化字符串为大写。











{{"aBcDeF"|uppercase}}
{{"aBcDeF"|lowercase}}
{{123456|currency}}




请输入筛选信息：

{{local}}

将255转为16进制：{{hexafy}}

angular.module("app",[]) .controller("ctrl",function($scope,$location,$timeout,$interval,$hexafy){ $scope.local=$location.absUrl(); $scope.myHeader="HelloWorld!"; $timeout(function(){ $scope.myHeader="Howareyoutoday?"; },2000); $scope.num=0; $interval(function(){ $scope.num++; },1000); $scope.gongneng=$hexafy.$$gongneng; $scope.hexafy=$hexafy.myFunc(255); }) /*自定义服务*/ .service('$hexafy',function(){ this.$$gongneng="将转入的数字，转为16进制"; this.myFunc=function(x){ returnx.toString(16); } }) .filter("filt",function(){ returnfunction(x){ returnx.toString(16); } }) /*在过滤器中，调用自定义服务*/ .filter("filt1",function($hexafy){ returnfunction(x){ return$hexafy.myFunc(x); } })

[功能]
{{gongneng}}

255转成16进制为：{{num}}

[功能]
{{gongneng}}

255转成16进制为：{{num}}

*{ margin:10px; }

您选择的是：{{name}} 序号姓名 {{$index+1}} {{item}}

*{ margin:10px; }

是否同意我是帅哥！点我!

是否显示？

点我!

是否隐藏？

点我!

点我！

说一下感想吧！

.row{ margin-bottom:10px; } .row.col-xs-5{ text-align:center; } .suc{ border-color:#3c763d; -webkit-box-shadow:inset01px1pxrgba(0,0,0,.075); box-shadow:inset01px1pxrgba(0,0,0,.075); } .suc:focus{ border-color:#2b542c; -webkit-box-shadow:inset01px1pxrgba(0,0,0,.075),006px#67b168; box-shadow:inset01px1pxrgba(0,0,0,.075),006px#67b168; } .err{ border-color:#a94442; -webkit-box-shadow:inset01px1pxrgba(0,0,0,.075); box-shadow:inset01px1pxrgba(0,0,0,.075); } .err:focus{ border-color:#843534; -webkit-box-shadow:inset01px1pxrgba(0,0,0,.075),006px#ce8483; box-shadow:inset01px1pxrgba(0,0,0,.075),006px#ce8483; }

用户注册

用户名：

用户名必须填写！！！用户名最少包含4个字符！！！用户名最多包含10个字符！！！

邮箱：

邮箱必须填写！！！邮箱格式不合法！！！

密码：

密码应为6-18位，且只能为字母、数字、下划线

确认密码：

两次密码输入不一致！！！

{{user.pwd}}

如何使用angularJs

热门推荐

随机推荐