AngularJS 入门介绍（一）

最新推荐文章于 2024-07-11 15:59:35 发布

原创最新推荐文章于 2024-07-11 15:59:35 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

Angularjs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了AngularJS的基本概念和发展历史，并详细讲解了如何使用AngularJS扩展HTML语法，包括指令、表达式及控制器等核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是 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>

  <div ng-app="" >
   <p>Name: <input type="text" ng-model="name"></p>
    {{name}}, <p ng-bind="name"></p>
</div>

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

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

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

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

四、AngularJS指令

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

<div ng-app=""  ng-init="FirstName='John'">
<p>this name <span ng-bind="FirstName"></span></p>
</div>

五、AngularJS 表达式

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

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

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

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

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

<div ng-app="">
     <p>表达式： {{ 15 + 20 }}</p>
</div>

六、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>