AngularJS学习笔记（一）走近AngularJS

时间 2019-11-08

原文原文链接

什么是AngularJS

AngularJS是一款优秀的前端JS框架，是Google多款产品之一，简称ng。javascript

ng有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。html

它可让前端开发人员将获取数据、数据模型和视图隔离进行开发。前端

Angular包括什么

ng包括指令、服务、筛选器和一些经常使用的类库，其中指令是最为让人炫目的功能，它为加强HTML标签的互动性提供了极大的便利。java

ng有一些很是棒的特性，包括控制器、指令、服务、路由、筛选器。设计模式

五大核心

MVVM —— 吸取了传统的MVC设计模式针但又并不执行传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。浏览器

依赖注入 —— AngularJS拥有内建的依赖注入子系统，能够帮助开发人员更容易的开发，理解和测试应用。app

双向数据绑定 —— 实现了把model与view彻底绑定在一块儿，model变化，view也变化，反之亦然。框架

模板 —— 在AngularJS中，模板至关于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当作DOM来操做，去生成一些指令来完成对view的数据绑定。dom

指令 —— 能够用来建立自定义的标签，也能够用来装饰元素或者操做DOM属性。模块化

AngularJS的神奇

在ng中，双向绑定和指令是最为神奇的武器。

双向绑定让咱们不用再考虑数据的同步问题，变量是否被同步，页面元素显示是否正确，这些因为双向绑定和指令的配合，已经确实从原来的Dom优先转向了数据优先。

而指令更是让html标签如虎添翼，极大的加强的html标签的交互能力，而自定义指令则给了咱们造物主的能力，能够开发出更具语意的标签。

运行环境

每一个例子均要经过手工编码，才能知道其中潜在的问题。

开发环境是：win7(64)、VS201三、ng1.3

运行环境是：win7(64)、360极速浏览器。

因本项目主要是学习前台框架，我将全部代码再jsrun.cn上已经备份一份，能够直接访问，查看效果。

来个例子吧

让咱们从例子里来看下ng的应用，在逐步完善的过程当中学习到新的东西。

<!DOCTYPE html>

<!--一个页面仅能有一个ng-app -->
<html ng-app="App">
<head>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
    <script type="text/javascript">

        var App = angular.module("App", []);

        App.controller("ctrl", function ($scope) {
            //初始化为空
            $scope.name = '';
        });
    </script>
</head>
    <body >
        <!--一个页面能够有多个ng-controller-->
        <div ng-controller ="ctrl">
            <input type="text" ng-model="name" /><br />
            hello,{{name}}
        </div>
    </body>
</html>

运行结果：

这个功能若是放在之前的话，咱们须要监听textbox的onchange事件，并及时更新dom元素，显示textbox输入的数据，如今，咱们既没有引用JQuery，也没有编写几行js代码，这些都实现了。

你能够点击这里尝试运行。

我了解了什么

在html元素上标记了ng-app属性，一个页面只能有一个该属性

在div元素上标记了ng-controller属性，该属性的值需在js脚本中定义

数据双向绑定，咱们改动textbox中值的时候，下面文字天然跟着变化

在脚本中初始化值，例如：$scope.name=’’

结束语

本文档是我学习过程当中的笔记，仅是我本阶段的学习心得。

随着学习的深刻，理解加深，我会从新完善该笔记，但愿此笔记不要起到误导的做用。

最后，我附上在学习过程当中参考的手册：《AngularJS 中文API参考手册》。