当前位置：首页 > 资讯 > 技术文档

AugularJS从入门到实践(必看篇)

时间：2020-04-10 21:50 编辑：来源：阅读：
扫一扫，手机访问

摘要：AugularJS从入门到实践(必看篇)

[b]前言[/b] [b]前端 [/b] AngularJS是为了克服HTML在构建应用上的不足而设计的。（引用百度百科） AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。（引用百度百科） [b]例如： [/b] 使用双大括号{{}}语法进行数据绑定；使用DOM控制结构来实现迭代或者隐藏DOM片段；支持表单和表单的验证；能将逻辑代码关联到相关的DOM元素上；能将HTML分组成可重用的组件。 [b]本篇学习主要有两个部分：[/b] ①【AngularJS 常用指令】 ②【AngularJS 的 mvc 】　 [b]1、AngularJS 常用指令[/b] [b]【常用指令】[/b] 1.na-app:声明angularjs所管辖的区域，一般写在body或者HTML上原则一个一面只写一个 <body ng-app=""> </body> 2.ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 <input type="text" id="input" ng-model="name"/> 3.ng-bind 指令把应用程序数据绑定到 HTML 视图。 ①<div id="div" ng-bind="name"></div> ②<div>{{name}}</div> 4.ng-init 指令初始化 AngularJS 应用程序变量。 <body ng-app="" ng-init="name=123"></body> 5.表达式：{{}}绑定表达式，可以包含数字、运算符和变量。但表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=”代替 {{5+""+5+',Angular'}} [b]【基本感念】[/b] 指令：AngularJS中，通过扩展HTML的属性提供功能 ↓↓↓↓（菜鸟教程中的原话） AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 [b]2、AngularJS 的 mvc　　[/b] [b]【mvc三层框架】[/b] 1、 Model（模型）：应用程序中处于处理属性局的部分。（保存或修改数据到数据库、变量等）。AugularJS中的Model特征的是：数据 view（视图）：用户看到的而用于显示数据的页面 controller（控制器）：应用程序中处理用户交互的部分。负责从视图读取数据，控制用户输入，并项目性发送数据。 2、工作原理：用户从视图层发送请求，controller接收到请求后转发给对应的model处理，medle处理完成后返回结果给controller，并在view成反馈给用户。创建一个angular模块，即ng-app所绑定的部分，需要传递两个参数： ① 模块名称，即ng-app所需要绑定的名称。ng-app="myApp"； ② 数组：需要注入的模块名称，不需要可为空。 var app = angular.module("myApp",[]); 在Angular模块上，创建一个控制器Controller，需要传递两个参数称。 ① ng-controller="myCtrl" ② controller的构造函数：构造函数可以传入多个参数，包括$scope/$roatScope以及各种系统内置对象 [b]【angularJS中的作用域】[/b] ①$scope：局部作用域，声明在$scope上的属性和方法，只能在当前Controller中使用； ②$rootScope：根作用域，声明在$rootscope上的熟悉感和方法可以在ng-app所包含的任何区域使用（无论是否同意controller，或是否在controller包含范围中）。 >>> 若没有使用$scope 声明变量，而直接在html中使用ng-model绑定的变量作用域为： 1.如果ng-model在某个ng-controller中，则此变量会默认绑定到当前Controller的$scope上 2.如果ng-model没有在任何一个ng-controller中，则此变量将绑定在$rootScope上。 [b]效果图如下：[/b] [img]http://files.jb51.net/file_images/article/201707/201707100754132.gif[/img] 代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .div1{
        width: 300px;
        height: 100px;
        background-color: #00BFFF;
      }
    </style>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl">
      <input type="text" ng-model="name"/>
      <div ng-bind="name" class="div1"></div>
      <div ng-bind="age" class="div1"></div>
      <div ng-bind="classes" class="div1"></div>
      <div ng-bind="classes.name" class="div1"></div>
      <div ng-bind="classes.age" class="div1"></div>
      <div ng-bind="classes.sex" class="div1"></div>
      
    </div>
    <div ng-controller="myCtrl1">
      <input type="text" ng-model="name"/>
      <div ng-bind="name" class="div1"></div>
      <div ng-bind="age" class="div1"></div>
    
    </div>
      
  </body>
  <script language="JavaScript" src="angular-1.5.6/angular.js"></script>
  <script type="text/javascript">
    var app = angular.module("myApp",[]);  
    app.controller("myCtrl",function($scope){
      $scope.name = "帅哥" ;
      $scope.age = "18岁";
      $scope.classes = {
          name:"张三",
          age:"16岁",
          sex:"男"
        
      };
      
    });
    
    app.controller("myCtrl1",function($rootScope){
      $rootScope.name = "hahaha" ;
          });
    
  </script>
</html>

以上这篇AugularJS从入门到实践(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：AngularJS中的表单简单入门
下一篇：详解angular2采用自定义指令（Directive）方式加载jquery插件

资讯排行榜
更多>>