AngularJS 初识

本贴最后更新于 2704 天前,其中的信息可能已经渤澥桑田

前言

由于内心的不羁,在舒适区待得骨头都软了,于是乎今年年初又跳了,新公司这边用到了一些新技术。

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}} 表达式绑定,这个就可以将变量写在页面任何地方了,

  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 474 关注

相关帖子

3 回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 88250

    标签 Angular 拼错了,原谅我是处女座 😂

  • ZhijianZhang

    其实我还是比较建议你学 Angular2.0,虽说 Angular1.x 并没有淘汰,但是毕竟 1.x 还是有很多做的不是很好的设计。而且现在目前最新的 4.0 与 2.0 差距并没有很大,意味着如果跟着 Angular 官方走,2.0 起步岂不是美滋滋。

  • someone

    刚开始接触 Angular,2.0 后续再学习。