angular学习笔记系列一

时间 2019-11-26

原文原文链接

　　首先咱们要明确一点，angular在web应用的角色，在传统的多页面web应用程序中，服务器根据输出数据和html模板渲染好页面所需的html输出到页面(所谓的服务器装配程序)，随着单页面应用程序和ajax化的流行，页面应用程序开始利用ajax技术实现局部刷新的页面体验和快速响应的效果；可是这一切或是大可能是的html渲染都是服务器来处理（固然也有各类js模板技术实如今客户端组装数据），每次发送的html片断会根据数据量的多少变化。 angular实现了服务器只须要将数据和html模板片断输出到客户端，让客户端进行装配数据，即减小了服务器cpu时间，又及大的下降了单次响应页面的大小。javascript

再说关于mvc，传统的mvc被普遍的应用在c++/java/php/net等后端技术，因为前端技术不断的发展，js由单一的提交表单到大量应用于校验、与服务器通信和各类提升体验等场景的应用而被不断的完善。它不在是浏览器上的一个小特性，而是一门流行的网站脚本语言（固然js也包括服务器开发场景nodejs，只不过咱们熟知的场景多应用于网站开发），所以angular的应用中将前端代码引入了mvc（固然它不是第一个基于mvc的前端框架，例如ember也采用mvc，相似的基于事件监听、依赖注入和数据绑定的方式工做），angular中view层是html片断，Controller则是javascript类（在js中能够是function的体现也能够是angular中控制器的实现），model被存储在($scope)对象的属性中php

引入三个新词汇html

　　一、数据绑定：把UI中部分须要变动dom映射到js属性上，让他们根据更改自动同步到显示界面的过程前端

<html ng-app><!--若是须要angular解析应用，必须加入ng-app，不过根据angular须要操做的html片断能够选择写在其余标签内-->
<script src="js/angular.js"></script>
<script>
    function databinding($scope) {
        $scope.say = 'hello';
    }
</script>
<body>
    <div ng-controller="databinding">
        <input type="text" ng-model="say">
        <span>{{say}}, world</span>
    </div>
</body>
</html>

二、依赖注入：给一个对象传入一个实例，并对该实例进行操做(http://www.cnblogs.com/xingyukun/archive/2007/10/20/931331.html)java

　　三、指令：angular内置了不少非html规范中的属性，来实现数据绑定、视图和控制器的功能，以ng-开头node