前言
由于内心的不羁,在舒适区待得骨头都软了,于是乎今年年初又跳了,新公司这边用到了一些新技术。
AngularJs 就是其中一种,博客许久没更新了,后续会对 AngularJs 写个小系列。
初识
来点官方的:AngularJS 是 Google 从 2009 年着手开发的,版本 1.0 是在 2012 年发布的,相对来说 AngularJS 还是比较新的技术。
AngularJs 是 基于 JavaScript 框架的,所以写法大致相同,另外 AngularJs 不等于 jQuery ,但是 AngularJs 可以写 jQuery,例如:angular.element(document.getElementById("checkboxId").attr("checked", false));
但是使用 AngularJs 和 jQuery 的思想有些不同, AngularJs 不需要标签中写 id 属性,而是使用标准的 ng-model/ng-bind 指令同步绑定值,省去了取值运算再赋值的操作。
指令 ng-directives 是 angularJs 核心,扩展了 HTML,同时可以自定义指令,我觉得优秀的框架是需要让用户融入进来,而不是单单停留在使用上。
环境
直接引入 AngularJs 文件,然后编辑 index.html 直接来个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br> <br>
姓名: {{firstName + " " + lastName}}
</div>
</body>
</html>
说明
ng-app / ng-controller / ng-model / {{ 表达式 }},这些都是 AngularJs 原生的指令和表达式,还有很多也可以自定义,但这几个是必须的。
ng-app 定义模块,该指令定义了应用,在同一个页面只能有一个,一般项目中的父页面就定义这样一个 ng-app 即可,ng-controller 这个指令一个页面就可以多个了,就像一个作用域一样,它下面的函数和变量只在该 ng-controller 下有用,到哪里为止呢?一般都是绑定在 div 标签中,那 div 标签在哪关闭范围就在哪.
ng-controller 定义控制器,就是用于区分控制域,不允许相同命名,不然找不到了,它可以包含子 ng-controller 就像父页面弹出子页面这种场景。要用父页面的方法可以使用 $scope.$parent.search()
。
**scope** 作用域对象,所有 js 函数和变量都是建立在该对象之上,所以 ng-model="firstName" 在 AngularJs 里面的写法是 scope.firstName,这样对其操作,就能直接在页面中看到变化,所以以后在开发中,要考虑作用域对象传递时,这个值也是会发生变化的,你可以使用 angular.copy(xx),拷贝,这样就可以避免变量一致性。
ng-model 数据绑定,这个就可以替代 jQuery 的 id 获取方式再赋值了,另外还有个是 ng-bind, 相比前者是 动态绑定后者是静态绑定。input,textarea 等类似这种可以输入的用 ng-model,但是在 span 这种就可以用 ng-bind,这种指令只绑定数据,不支持方法。如果是方法就需要使用其他指令了,ng-click,ng-change,ng-init 等.
{{firstName}} 表达式绑定,这个就可以将变量写在页面任何地方了,
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于