没时间解释了，快上车！AngularJs入门第一讲：AngularJs入门。

来源：互联网发布：苹果电脑ui设计软件编辑：程序博客网时间：2024/04/29 02:21

AngularJs第一车：AngularJs入门及第一个实例

AngularJs简介
特性简介
术语讲解
语法讲解

实例讲解

    摘要：主要给大家介绍了AngularJS及其特性，并以3个实例来做说明。    本教程使用AngularJs版本：1.6.4    开发应用软件博主推荐：WebStorm    AngularJs下载地址：http://docs.angularjs.org

一、AngualrJs简介

AngularJs

   AngularJS是由谷歌开发出来的，它是为了克服HTML在构建应用上的不足而设计的。   AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。   AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：        （1）使用双大括号{{}}语法进行数据绑定；        （2）使用DOM控制结构来实现迭代或者隐藏DOM片段；        （3）支持表单和表单的验证；        （4）能将逻辑代码关联到相关的DOM元素上；        （5）能将HTML分组成可重用的组件。    AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。    以其数据和展现分离、MVVM、MVC、DI等强大的特性活跃于前端开发市场，是前端敏捷开发使用的主流的必须掌握的框架之一。

二、特性

 1. 数据绑定    数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。    一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定使得代码更少，你可以专注于你的应用。    一方面，model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。     这个在用户互动中更加复杂，因为开发人员需要处理和解析这些互动，然后融合到一个model中，并且更新View。    这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。2. 模板    在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。    HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。     所有的指令都负责针对view来设置数据绑定。    数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。    使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。 3. MVC    针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。     AngularJS并不执行传统意义上的MVC，更接近于MVVM（Model-View-ViewModel)。其中MVC原理图可以看看下面的图片。4、依赖注入（Dependency Injection，即DI）    AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。    DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。5、Directives（指令）    指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情？那么AngularJS可以做到。    指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。

三、术语讲解

    模板(template):                       包含了Angular特殊扩展标记的HTML代码.

    指令(directive):                    扩展的HTML代码，自定义的标签、属性等等.

    模型(model):                       保存在JS中，用来和用户交互的数据.

    作用域(scope):                   模型数据在HTML页面中产生作用的范围.

    表达式(expression):                  AngularJS在HTML页面中可以运算的语法.

    编译器(compiler):                    被用来解释HTML代码中的Angular代码.

    过滤器(filter):                对HTML页面中输出的数据进行指定格式展示.

    视图(view):            统称用户看到的HTML视图页面.

    数据绑定(data binding):             JS中特定的数据和HTML页面上的数据的关联关系.

    控制器(controller):                给视图view提供功能支持的东东.

    依赖注入(dependency injection):             Angular自动创建对象并传递对象的一种方式.

    注入器(injector):            专门用来实现依赖注入（DI）的容器.

    模块(module):             Angular用来对项目进行最高层次封装的东东.

    服务(service):                Angular用来对视图view提供业务功能支持的东东.

    组件(component):              用于对网页的公共部分进行封装重用的Angular代码通常会包含模板、指令、服务等等.

四、语法讲解

1.引导程序    任何应用程序，运行过程中都会有一个运行的入口。    AngularJS应用程序也是一样，正常情况下，引导Ag应用的入口程序有两种：ng-app指令，bootstrap手工引导。    常规模式下，是通过ng-app指令引导Angular应用进行工作的。    网页中引入Angular之后，程序运行时会自动查找ng-app指令并从这个入口开始加载编译并解释执行。    代码：通常，页面中会定义ng-app熟悉来指定入口在script中通过angular的 module来加载ng-app指定的模块：

    <html ng-app=”myApp”>    <script>       angular.module(“myApp”, []);    </script>    </html>

代码：某些特殊情况下，也可以通过脚本来动态控制加载启动Angular应用通过angular.bootstrap(dom, module)来启动应用：

<html><div id=”myDiv”></div><script>    angular.module(“myApp”, []);    var _div = document.getElementById(“myDiv”);    angular.bootstrap(_div, “myApp”);</script></html>

2.基础语法结构

    1.开始深入学习AngularJS之前，先简单认识AngularJS中的各个部分都是怎么定义和使用的，方便解决后续学习过程中的一些困扰。

     ng-app

    2.Angular应用运行的入口指令，常规情况下，是写在我们前端项目的入口文件的跟标签上的，用于在项目启动的时候引导Angular应用

    angular.module(..)

    3.Angular是通过模块来管理我们前端项目中的数据的，通常情况下一个项目中会包含各种各样的数据，如管理员、新闻、公告等等.    模块时需要在应用启动的时候就需要加载的，所以Angular在设计的过程中对于入口指令进行了改造可以绑定一个值，这个值就是系统的主模块

3.基本指令

    指令是Angular中使用比较多的一个部分，Angular中的内置指令都是ng-开头的一种特殊的语法结构，    如:ng-app等，常见的基本指令如下：    ng-app=”myApp”:程序运行的入口，通过名称绑定一个模块    ng-init:用于在程序运行的过程中，初始化一些变量的数据的操作    ng-model=”param”:数据绑定的指令，主要用于表单元素上的数据绑定    ng-bind:数据绑定的指令，用于将变量的数据显示到页面上，用于替代mustache语法的    ng-controller:控制器指令，用于在页面中指定控制器作用范围，通常作为属性出现    ng-[event]:事件指令，用于在页面中发生某些事件时调用指令的函数

4.基本语法

    var app = angular.module(“name”, []):用于定义一个angular的模块    name是模块的名称    []中可以添加其他的模块    app.controller(“name”, function() {}):用于定义一个angular的控制器    name是控制器的名称    function(){}是这个控制器要处理功能的函数    $scope作用域       $scope是放在控制器函数中的一个参数。这个参数不需要传值，而是angular自动赋值.    在操作的过程中$scope就相当于一个容器，可以在$scope上声明变量或者函数，      $scope上的变量和函数会自动和视图页面中的变量进行绑定，称为$scope挂载数据。    $rootScope作用域       $rootScope是AngularJS的根作用域，也是全局作用域，放在控制器函数中的一个参数，     参数不需要传值，angular会自动赋值，挂载在$rootScope上的数据，会被Angular应用中的所有模块下的子模块和控制器公用。    run()函数          配合$rootScope使用，用于声明和初始化全局数据    app.run(function($rootScope) { // 处理代码})    $scope.$watch()         挂载在$scope上，用于监控数据的变化    监控单个变量：$scope.$watch(“name”, function() {// 处理代码})    监控多个变量：$scope.$watch(“name1 + name2 + ..” + function() {})

5.angular事件处理

    AngularJS中的事件操作，由于它自己虚拟DOM结构所以不支持普通事件，     通常通过它自己的事件指令来调用通过$scope挂在到控制器中的函数执行完成，     事件指令其实就是对于常见事件的封装，以ng-开头，加上事件名称即可，如鼠标单击事件ng-click。

五、实例讲解

（1）入门实例一

<!DOCTYPE html>  <html lang="en" ng-app="">  <head>      <meta charset="UTF-8">      <title>AngularJS入门学习</title>      <script type="text/javascript"  src="./1.5.3/angular.min.js"></script>  </head>  <body>      <p><input  type="text" ng-model = "inputValue">请输入内容</p>      <h1>您输入的内容为：{{inputValue}}</h1>  </body>  </html>

注意事项：    文本输入指令<input ng-model="inputValue" />绑定到一个叫inputValue的模型变量。    双大括号标记将yourname模型变量添加到问候语文本。    你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！    这个页面非常简洁，如果用Jquery写，那么就得设置input框的chang中事件，    然后更新内容。这一过程比AngularJS来得繁琐多了。

（2）入门实例2

<!DOCTYPE html>  <html lang="en" ng-app="myApp">  <head>      <meta charset="UTF-8">      <title>AngularJS入门学习</title>      <script type="text/javascript"  src="./1.6.4/angular.min.js"></script>  </head>  <body ng-controller = "myController">      <p><input  type="text" ng-model = "inputValue">请输入内容</p>      <h1>您输入的内容为：{{inputValue}}</h1>  </body>  <script type="text/javascript">  var app = angular.module('myApp', []);//获得整个angularJS影响的html元素  //控制器  app.controller('myController', function($scope) {      $scope.inputValue = "离衬";  });  </script>  </html>

    注意，ng-app="myApp",这个不能少，还有ng-controller=“”也不能少，    这两个分别批明了AngularJS有效的范围和Controller层有效的范围。

(3)入门实例3

<!DOCTYPE html>  <html lang="en" ng-app="myApp">  <head>      <meta charset="UTF-8">      <title>AngularJS入门学习</title>      <script type="text/javascript"  src="./1.6.4/angular.min.js"></script>  </head>  <body ng-controller = "myController">      <button ng-click= "myClick()" ></button>      <h1 ng-if = "!flag"> 离衬</h1>  </body>  <script type="text/javascript">  var app = angular.module('myApp', []);//获得整个angularJS影响的html元素  //控制器  app.controller('myController', function($scope) {      $scope.flag = false;      $scope.myClick = function(){          console.log($scope.flag);          $scope.flag  = !$scope.flag ;          console.log($scope.flag);      }  });  </script>  </html>

2 0