AngularJS 入门介绍（一）

刺骨的言语ヽ痛彻心扉 2023-10-17 09:54 35阅读 0赞

一、什么是 AngularJS

AngularJS是一个为**动态WEB应用设计的结构框架**。它能让你使用HTML作为模板语言，通过扩  
展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用**数据绑定**和**依赖  
注入**，它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现，这也使得它能够完

美地和任何服务器端技术结合。

通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：

类库 \- 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等

框架 \- 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。

AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为 指令(directives)的结构，让浏览器能够识别新的语法。例如：

使用双大括号\{ \{\}\}语法进行数据绑定；

使用DOM控制结构来实现迭代或者隐藏DOM片段；

支持表单和表单的验证；

能将逻辑代码关联到相关的DOM元素上；

能将HTML分组成可重用的组件。

### 二、AngularJS的历史 ###

AngularJS 1.0在2012年的时候就已经发布了。

Miško Hevery是Google的一名员工，他从2009年就开始AngularJS的开发工作。

AngularJS的想法和思路非常好，该项目仍在继续当中，目前由Google提供官方技术支持。

三、AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

AngularJS是一个JavaScript框架，它是由JavaScript语言编写的类库。
    AngularJS以JavaScript文件的形式进行发布，我们可以通过script标记将它添加到web页面中：
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

说明：当网页加载完毕，AngularJS 自动开启。

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

四、AngularJS指令

AngularJS指令就是一组以ng开头的HTML属性。
    　　通过ng-init指令可以将AngularJS Application的变量进行初始化。

五、AngularJS 表达式

AngularJS 表达式写在双大括号内：\{ \{ expression \}\}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 \{ \{ 15 + 20 \}\} 或 \{ \{ firstName + " " + lastName \}\}

六、AngularJS 应用

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
    <body>
     <div ng-app="my" ng-controller="myCtrol">
      uname:<input type="text" ng-model="uname"/><p/>
      upass:<input type="text" ng-model="upass"/><p/>
       <br/>
         FullName={
       {uname+","+upass}}
     </div>
    </body>
    </html>
    
    <script>
       /* AngularJS模块定义applications：var app = angular.module('my', []);*/
        var app = angular.module("my",[]);
      /* AngularJS控制器控制AngularJS Applications的行为：*/
        app.controller('myCtrol',function($scope){
            $scope.uname="zhangsan";
            $scope.upass="123456";
        });
    </script>

![Center][]

[Center]: https://img-blog.csdn.net/20161230155823851?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGx4MjAwODA4MDg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center