angularjs这个框架出来也很长时间了,可惜之前的项目都没用到它,所以也没有深入研究。闲暇之余写几个小demo,体验一下这个框架的特性吧。
关于如何使用这个框架就不详细说明了,网上教程一大堆。angularjs作为一个典型的MVC框架,一切都是从模块(module)出发,模块下对应各自控制数据显示的控制器(controller),通过指令(directive)实现对DOM修改,绑定事件等操作,下面简单体验一下它的特性。
双向数据绑定
先贴一段简单代码:
<div>
<input type="text" ng-model="string.text">
<p>{{string.text}}</p>
<p ng-bind="string.text"></p>
</div>
创建一个input,使用内置指令ng-model绑定输入框的值到$scope变量中,然后通过{{}}或置指令ng-bind同步显示数据。
ng-bind是从scope−>view的单向绑定;ng−modle是scope <-> view 的双向绑定。
ng-model指令需要和input、select等指令进行配合使用。当在元素加上ng-model指令后,框架会负责数据和视图的自动同步。
在输入框输入任意值都能同步显示在下方p标签中:
这里推荐使用内置指令ng-bind来同步数据,用{{}}在网络不稳定时,页面会显示代码内容:
双向数据绑定当然不仅仅用来数据同步显示,某些场景用户对表单任意修改都能自动同步到$scope对象中,提交时只需我们把绑定的$scope对象内的数据直接发送到后台。(想起早先用jQuery时,还要自己获取表单内的值,保存在自定义对象中,再提交后台……)双向数据绑定甚至可以用来直接操作css。
<div ng-controller="bg-color">
<input type="text" ng-model="color">
<p class="bg-{{color}}">测试css样式</p>
</div>
app.controller('bg-color', ['$scope', function($scope) {
$scope.color = 'red';
}]);
<style type="text/css">
.bg-red {
background: red;
}
.bg-green {
background: green;
}
</style>
通过在input内输入red,green控制背景颜色:
无需类似jQuery那样,通过增加class内标签来修改css样式。
路由
通过URL哈希属性可以实现页面无刷新跳转,从而给用户流畅的体验,angularjs也提供了路由模块。
<body>
<ul>
<li><a href="#!">首页</a></li>
<li><a href="#!computer">电脑</a></li>
<li><a href="#!hello">欢迎</a></li>
<li><a href="#!books/list">书架</a></li>
<li><a href="#!blabla">其他</a></li>
</ul>
<div ng-view></div>
</body>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
var app = angular.module('myapp', ['ngRoute', 'bookStoreCtrls']); //依赖注入ngRoute路由模块,自定义模块
//在config配置文件中,配置$routeProvider,用来定义路由规则
//angularJS模块中的config函数用于配置路由规则,通过使用configAPI,我们请求把$routerProvider注入到我们的配置函数,
//并使用routeProvider.when 来定义我们的路由规则
//template:string,字符串被添加到ng-view中,templateUrl:string, url地址中的文件被添加到ng-view中
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
template: '首页'
})
.when('/computer', {
template: '电脑'
})
.when('/hello', {
templateUrl: 'tpls/hello.html',
// 调用的控制器名称
controller: 'HelloCtrl'
})
.when('/books/list', {
templateUrl: 'tpls/list.html',
controller: 'BooksList'
})
.otherwise({
redirectTo: '/'
});
}]);
var bookStoreCtrls = angular.module('bookStoreCtrls', []);
// 新建一个自定义模块bookStoreCtrls,需要在入口依赖注入
// 创建该模块下的控制器
bookStoreCtrls.controller('HelloCtrl', ['$scope', function($scope) {
$scope.greeting = {
text: 'Hello'
};
}]);
bookStoreCtrls.controller('BooksList', ['$scope', function($scope) {
$scope.books = [{
name: '第一本书'
}, {
name: '第二本书',
author: '8899'
}, {
name: '第三本书',
author: 'sda'
}];
}]);
通过改变哈希可以实现页面无刷新跳转。
ng-route只能用于简单层次的路由,对于深层嵌套路由,我们可以通过ui-route来实现。
.state('booklist', {
url: '/{bookType:[0-9]{1,4}}',
views: {
'': {
templateUrl: 'tpls/bookList.html'
},
'booktype@booklist': {
templateUrl: 'tpls/bookType.html'
},
'bookgrid@booklist': {
templateUrl: 'tpls/bookGrid.html'
}
}
})
主视图页面设置容器,通过templateUrl加载不同的页面,可以更好的实现多人开发。
指令
angularjs通过指令操作DOM,给DOM绑定事件。
var app = angular.module('myapp', []);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.console = function() {
console.log('鼠标移入第一个控制器');
}
}]);
app.controller('MyCtrl2', ['$scope', function($scope) {
$scope.console2 = function() {
console.log('鼠标移入第二个控制器');
}
}]);
app.directive('mouseenter', function() {
return {
restrict: 'EA',
// ==========================================================
// restrict---匹配模式说明, 英文意思是"限制;约束;限定",这里指的是匹配我自定义的标签
// ==========================================================
// •E 元素(element) <hello></hello>
// •A 属性(attribute) <div hello></div>
// •C 样式类(class) <div class="hello"></div>
// •M 注释 <!-- directive:hello --> 注意!!!(不常用)
// 温馨tips: 推荐使用EC或EA匹配模式
// template: '<p>Hello Angular</p>',
// templateUrl: '',
// replace: true,
// 若此配置为 true 则替换指令所在元素,若为 false 或不指定,则把当前指令追加到所在元素内。
// 配合template或templateUrl使用
link: function($scope, element, attrs) {
element.bind('mouseenter', function(event) {
// mouseenter标签或属性所在对象绑定事件
// 鼠标移入后触发其对象上的howconsole属性赋值的方法
$scope.$apply(attrs.howconsole);
});
}
};
});
<div ng-controller="MyCtrl">
<div mouseenter howconsole="console()">鼠标移入触发事件</div>
</div>
<div ng-controller="MyCtrl2">
<mouseenter howconsole="console2()">鼠标移入触发事件</mouseenter>
</div>
angularjs还有很多知识点,事件的传递,指令的嵌套等……如果要用angularjs开发项目还需要更深入的学习。