angularJS的使用

最新推荐文章于 2025-08-20 17:55:57 发布

原创最新推荐文章于 2025-08-20 17:55:57 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularJS #路由机制 #java

angularJS 专栏收录该内容

1 篇文章

订阅专栏

开发如果使用 angular 最基本功能，只需要导入 angular.js

从 angularJS 1.2 版本后，路由功能 js 被单独分离

例如：编写HTML

<body ng-app ng-controller="PhoneListCtrl">
<input ng-model="quer"/>
<select ng-model="sortType">
<option value="name">
按名字排序</option>
<option value="age">
按年龄排序</option>
</select>
<ul>
<li ng-repeat="phone in phones
| filter:quer | orderBy:sortType">
{{phone.name}}
<p>{{phone.snippet}}</p>
<p>{{phone.age}}</p>
<p>
<img ng-src="{{phone.imsrc}}"/>
</p>
</li>
</ul>
</body>

解释如下：

ng-app：AngularJS程序入口，对该标签内的元素进行初始化。
ng-controller：在当前元素范围内绑定指定的控制器(controller)。
ng-model：指定当前元素与数据模型（$scope）中的属性绑定，如果数据模型中没有此属性，会自动新建一个。
ng-repeat：循环$scope中的属性，类似于{{#each beans}}
{{xxx}}：花括号表示读取某一属性值
filter、orderBy：过滤器。filter可以根据指定的属性过滤数据(例子里是quer属性)。orderBy是排序过滤器。这两个过滤器都是内置的。过滤器是可自定义的。

编写控制器controller：

var PhoneListCtrl = ['$scope', '$http',
function($scope, $http) {
$http.get('../json/test-1.json')
.success(function(data) {
$scope.phones = data;
});
$scope.sortType = 'age';
}
];

解释如下：

PhoneListCtrl 控制器。控制器的声明方式是
var c1=['ser1','ser2',function]
c1是控制器的名字，ser1、ser2是控制器所依赖的服务，以声明的方式注入到控制器中。例子中注入了$scope(数据模型)、$http(封装了ajax的服务)。这两个服务都是angularjs内置服务，服务是可以自定义的。
$scope.phones = data; 在这个地方后台返回的数据应用到了数据模型中，这时前台UI会自动响应更新。

angularJS的四大核心就是：MVC、模块化、双向数据绑定以及指令。

模块的简单写法如下：

angular.module('modulename', [x1,x2])//依赖于x1、x2模块
.directive('directiveName', function() {})
.factory('a', function() { return 123; })//创建服务
.filter('b',function(){})//创建过滤器
.value('d', 123)//创建变量，创建后可修改
.contract('c',324)//创建常量创建后不可修改

双向数据绑定：

目前为止，angularJS是js中唯一实现双向数据绑定

例如：

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<input ng-model="greeting.text"/>
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
</html>

指令：

指令是AngularJS用来扩展浏览器能力的技术之一。在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变DOM的结构

如：

E（元素）
<my-directive></my-directive>
A（属性，默认值）
<div my-directive="expression"></div>
C（类名）
<div class="my-directive:expression;"></div>
M（注释）
<--directive:my-directive expression-->

最常用到的是它的路由机制，我们可以使用AngularJS提供的when和otherwise两个方法来定义应用的路由。用config函数在特定的模块或应用中定义路由

路由的写法：