AngularJs（一）概述_angular干嘛用的-CSDN博客

本文链接：https://blog.csdn.net/qq_25633175/article/details/51464150

1.1. AngularJs简介

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM(其实不管概念怎么炒作，说白了就是MVC)、模块化、自动化双向数据绑定、语义化标签（指令）、依赖注入等等。

1.2. AngularJs能为我们做什么

1. AngularJS将帮助我们构建标准化的web应用结构，并且提供了针对客户端应用的未来开发使用的模板。

也就是说，使用AngularJs为我们构建一个MVC结构，做到像后台一样的开发模式。

2.模块化和依赖注入，AngularJs的核心思想之一就是“一切都起于模块”。

依赖注入则更有点Spring的味道，Angular提供了一个自动管理对象的机制，我们无需主动new一个对象，因为这种机制基于单例模式，它帮助我们管理对象的依赖关系。我们用到哪个对象直接拿来用就是。

3. 通过Angular的指令，你可以把模板编写成 HTML 的形式。之所以可以做到这一点，是因为Angular引入了一款强大的 DOM 转换引擎，可以用它来扩展 HTML的语法

1.3 HelloWorld

HelloAngular.html

<!doctype html>
<html ng-app="HelloAngular">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="helloNgCtrl">
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="angular-1.3.0.js"></script>
    <script src="HelloAngular.js"></script>
</html>

HelloAngular.js

var helloModule=angular.module('HelloAngular', []);
helloModule.controller('helloNgCtrl', ['$scope', function($scope){
   $scope.greeting = {
        text: 'Hello'
    };
}]);

先看html代码，ng-app是一个AngularJs的内置指令，用来声明Angular的边界，就是告诉Angular应该负责页面中的哪个部分。

Js文件中，我们首先通过angular的module方法声明了一个HelloAngular的模块，这个helloModule只是一个名字或者一个句柄，用来对这个模块进行操作。接下来就给这个模块创建了一个名为helloNgCtrl的Controller，并且将$scope作为参数（相当于作用

域），然后给$scope添加了一个属性。

再回到Html当中，我们看到ng-app的值为我们声明的那个模块名称，证明这个页面是由angular的HelloAngular模块来负责的。而后有一个div元素，这个div应用了我们定义过的一个contoller控制器，在定义这个控制器的时候我们曾经传入了一个$scope参数表示作用域，这个作用域的范围就被限制在当前的这个div当中。我们通过双括号的形式来读取greeting这个变量，实现单向绑定，即从模型到视图的绑定。