angular(二)

首页 > 代码库 > angular(二)

2024-08-17 07:04:27 219人阅读

angularjs第二章

自定义指令

scope

控制器

AngularJS控制器控制AngularJS应用程序的数据，是常规的JavaScript对象。
ng-controller指令就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上。
所谓作用域就是一个指向应用模型的对象，它是表达式的执行环境，作用域有层次结构，这个层次和相应的DOM几乎是一样的，作用域能监控表达式和传递事件并且可以从父作用域继承属性。
每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。一个应用可以有多个作用域，因为有一些指令会生成新的子作用域，当新作用域被创建的时候，他们会被当成子作用域添加到父作用域下，这使得作用域会变成一个和相应DOM结构一个的树状结构。
控制器上的属性：
现在我们就用ng-controller指令来创建一个简单的控制器定义，如下所示：
<div ng-app=“” ng-controller=“MyController”>
请输入一个名字：<input type=“text” ng-model=“person.name”>
Hello <span ng-bind=“person.name”></span>
</div>
<script>
function MyController($scope) {
$scope.person = {
name: “yuanyingke”
};
}
</script>
如上所述，我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性，那参数$scope是什么呢，代表什么意思呢。
现在我们就来解答MyController对象参数 —— $scope。
$scope就是把一个DOM元素连结到控制器上的对象，它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。
要明确创建一个$scope对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性。
所有$scope都遵循原型继承，这意味着它们都能访问父$scope们,对任何属性和方法，如果AngularJS在当前$scope上找不到，就会到父$scope上去找，如果在父$scope上也没找到，就会继续向上回溯，一直到$rootScope上，这个$rootScope是最顶级的$scope，它对应着含有 ng-app指令属性的那个DOM元素，也就是说根作用域关联的DOM就是ng-app指令定义的地方。
也就是说，拥有了$scope，我们就可以操作作用域内任何我们想要获取的对象数据。
控制器上的方法：
控制器不仅声明属性也可以声明方法，如下所示：
<div ng-app=“” ng-controller=“MyController”>
名称:
<input type=“text” ng-model=“username”>
<button ng-click=“sayHello()”>打招呼</button>
<hr>
{{greeting}}
</div>
<script>
function MyController($scope) {
$scope.username = ‘yuanyingke’;
$scope.sayHello = function() {
$scope.greeting= ‘Hello ‘ + $scope.username + ‘!’;
};
}
</script>
注意事项：
不要试图去复用controller,一个控制器一般只负责一小块视图
不要在controller中操作DOM，这不是控制器的职责，是指令的职责。
不要在controller里做数据格式化，ng有很好用的过滤器实现此功能。
不要在controller里面做数据过滤操作，ng有$filter服务
一般来说，controller是不会互相调用的，控制器这间的交互是通过事件进行的。

创建指令

<head>
<meta charset=“UTF-8”>
<title></title>
<script src=“angular.min.js” type=“text/javascript” charset=“utf-8”></script>
<style type=“text/css”>
.directive{
color:red;
}
</style>
</head>
<body ng-app=“myApp”>
<!—<runoob-directive></runoob-directive>—>
</body>
<script type=“text/javascript”>
var app = angular.module(“myApp”, []);
app.directive(“runoobDirective”, function() {
return {
template : “<h1><a href=http://www.mamicode.com/‘###’ class=‘directive’>我是a</a></h1>”
};
});
</script>
指令定义对象的常用属性如下：
template : string
使用template指定的HTML标记替换指令内容（或指令自身）
restrict : string
用来限定指令在HTML模板中出现的位置。
replace : true|false
使用这个属性指明template的替换方式。
<head>
<meta charset=“UTF-8”>
<title>Title</title>
<script type=“text/javascript” src=http://www.mamicode.com/“angular.min.js”></script>
</head>
<body ng-controller=“testController”>
<test-directive></test-directive>
</body>
<script type=“text/javascript”>
//
var app = angular.module(“myApp”,[]);
app.controller(“testController”, function ($scope) {

$scope.title = “myApplication”;
});
app.directive(“testDirective”,function(){
return {
replace:true,//替换
restrict:”EA”,//限制指令的出现位置
/*
* E - 指令可以作为HTML元素使用
   A - 指令可以作为HTML属性使用
   C - 指令可以作为CSS类使用
   M - 指令可以在HTML注释中使用
* */
template:”<div>name:{{name}}</div>”
}
});

</script>

mvvm-延伸阅读

简介

针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC(Model-View-Controll)设计模式针对不同的人可能意味不同的东西 ,AngularJS并不执行传统意义上的MVC，更接近于MVVM。
MVVM模式是Model-View-ViewMode模式的简称。由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。
Model将和ViewModel互动(通过$scope对象)，将监听Model的变化。这些可以通过View来发送和渲染，由HTML来展示你的代码。
Model与MVC模式一样，Model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。它具有对数据直接访问的权利，例如对数据库的访问，Model不依赖于View和ViewModel，也就是说，模型不关心会被如何显示或是如何被操作，模型也不能包含任何用户使用的与界面相关的逻辑。
ViewModel是一个用来提供特别数据和方法从而维护指定view的对象,。ViewModel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。
Controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。
View是AngularJS解析后渲染和绑定后生成的HTML。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。

模块化

模块之间如何依赖，依赖注入
angular.module()创建、获取、注册angular中的模块
// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
var createModule = angular.module(“myModule”, []);
// 只有一个参数(模块名),代表获取模块
// 如果模块不存在,angular框架会抛异常
var getModule = angular.module(“myModule”);
该函数既可以创建新的模块，也可以获取已有模块，是创建还是获取，通过参数的个数来区分。
angular.module(name, [requires], [configFn]);
- name：字符串类型，代表模块的名称；
- requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可；
- configFn：用来对该模块进行一些配置。
现在我们知道如何创建、获取模块了，那么模块究竟是什么呢？
官方的Developer Guide上只有一句话：You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.
模块是一些功能的集合，如控制器、服务、过滤器、指令等子元素组成的整体。

服务

AngularJS提供了一些功能的封装，但是当你试图通过全局对象angular去访问这些功能时，却发现与以往遇到的库大不相同。
$http
比如，在jQuery中，我们知道它的API通过一个全局对象：$ 暴露出来，当你需要进行ajax调用时，使用$.ajax()就可以了。这样的API很符合思维的预期。
AngularJS也暴露了一个全局对象：angular，也对ajax调用进行封装提供了一个 $http对象，但是，但是，当你试图沿用旧经验访问angular.$http时，发现不是那么回事！在angular中是以一个参数的形式传递到控制器中，如果要使用它，需要在 controller 中定义。
$http服务

<head>
<meta charset=“UTF-8”>
<title></title>
<script src=“angular.min.js” type=“text/javascript” charset=“utf-8”></script>
<script src=“http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js”></script>
</head>
<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<!—{{content}}—>
<span ng-bind-html=“content”></span>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[‘ngSanitize‘]);
app.controller("myCtrl",function ($scope,$http){
$http.get("content.html").success(function (res){
$scope.content = res;
});
});
</script>
angular-sanitize.js

<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
{{url}}
</div>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$location){
console.log($location);
// $scope.url = $location.absUrl();
});
</script>
location
定时器

var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$timeout){
$timeout(function (){
alert(‘a’);
},2000);
});
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$interval){
//循环定时器
$interval(function (){
alert(‘a’);
},2000);
});

实例

百度下拉列表

<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
{{userinfo.user}}
</div>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$http){
$http.jsonp(“http://localhost/SH-2/jsonp/jsonp.php?wd=xx&callback=JSON_CALLBACK”).success(function (res){
// console.log(res);
$scope.userinfo = res;
});
});
</script>

百度的接口

<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<input type=“text” ng-model=“wd” />
<ul>
<li ng-repeat=“x in s”>{{x}}</li>
</ul>
</div>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$http){
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=w&cb=
$http.jsonp(“https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=w&cb=JSON_CALLBACK”).success(function (res){
// console.log(res);
$scope.s = res.s;
});
});
</script>
<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<input type=“text” ng-change=“change()” ng-model=“wd” />
<ul>
<li ng-repeat=“x in s”>{{x}}</li>
</ul>
</div>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$http){
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=w&cb=
$scope.change=function (){
$http.jsonp(“https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=JSON_CALLBACK”,{
params:{
wd:$scope.wd
}
}).success(function (res){
$scope.s = res.s;
});
}
});
</script>

过滤器

简介

过滤器可以使用一个管道字符（|）添加到表达式和指令中。
AngularJS 过滤器
AngularJS 过滤器可用于转换数据：
过滤器
描述
currency
格式化数字为货币格式。
filter
从数组项中选择一个子集。
lowercase
格式化字符串为小写。
orderBy
根据某个表达式排列数组。
uppercase
格式化字符串为大写。

html

<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<span>相乘</span>
<input type=“text” ng-model=“num1” />
<input type=“text” ng-model=“num2” /><br />
<!—currency:”￥” 中文—>
结果为：{{myFn() | currency}}
</div>
</body>

var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope){
$scope.num1=5;
$scope.num2=10;
$scope.myFn = function (){
return $scope.num1*$scope.num2;
}
});

<body ng-app=“”>
<div>
<!—{{‘HelloWorld’ | lowercase}}—>
{{‘HelloWorld’ | uppercase}}
</div>

筛选

<body ng-app=“” ng-init=“arr=[‘tangcaiye’,’zhangsan’,’lisi’]”>
搜索：<input type=“text” ng-model=“name” />
<ul>
<li ng-repeat=“x in arr | filter:name”>{{x}}</li>
</ul>

筛选加排序

<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<ul>
<li ng-repeat=“x in friends |filter:’a’ | orderBy:order:true”>{{x}}</li>
</ul>
</div>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope){
$scope.friends = [{name:’John’, phone:’555-1212’, age:21},
{name:’Mary’, phone:’555-9876’, age:19},
{name:’Mike’, phone:’555-4321’, age:10},
{name:’Adam’, phone:’555-5678’, age:35},
{name:’Julie’, phone:’555-8765’, age:29}];
$scope.order=“phone”;
});
</script>

angular(二)

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > angular(二)

angular(二)

看完仍有疑问？有类似问题直接问程序猿