AngularJS学习笔记(一)
在刚开始接触AngularJS的时候,并不觉得有什么吸引我的地方,因为它奇怪的编码方式让我感觉陌生,然而与它接触一段时间后,我感觉我喜欢上了这种简洁,干净的编码方式,虽然目前理解的并不是很深入,。。。
AngularJS的原理
Angularjs 是google开源的一套web前端框架,它的优势在于它的五大特性:双向数据绑定(Two Way Data-Binding),MVC(model-view-controller), 模型(model),指令(Directives),依赖注入(Dependency Inject)等等。
下面通过一个小demo(index.html)了解一下Angularjs的运行机制:
<!DOCTYPE html>
<html lang="en" ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="hello" ng-controller="HelloCtrl">
Hello, {{name}}!
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
angular.module("myApp", [])
.controller('HelloCtrl', function($scope) {
$scope.name = "World";
});
</script>
</body>
</html>
在上面的例子中,当浏览起尝试去访问index.html时,依次会进行一下步骤:
> 加载html,然后解析成DOM;
>加载angular.js脚本;
>Angularjs等待DOMContentLoaded事件的触发;
>寻找ng-app指令,根据该指令确定应用程序的边界;
>使用ng-app指定的模块配置$injector;
>使用injector创建compile服务和$rootscope;
>使用compile编译DOM并把它链接到rootscope上;
>通过controllerl对scope里面的变量name进行赋值;
>对{{name}}表达式进行替换,模板显示
Hello, World!
这个只是在本地运行的一个示例,如果在实际应用中的话可以直接调用后端提供的接口,从而访问服务器端的数据
比如通过'DOMAINNAME + “/login”'接口,用户可以将用户名和密码传递到服务器并保存起来,以便接下来的访问。
Say hello to: <input type="text" ng-model="name"><h1>Hello, {{name}}!</h1>