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

网络编程 2024/9/22 佚名

3 1 2

前言

前端

AngularJS是为了克服HTML在构建应用上的不足而设计的。（引用百度百科）

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

例如：

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

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

支持表单和表单的验证；

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

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

本篇学习主要有两个部分：

①【AngularJS 常用指令】

②【AngularJS 的 mvc 】
　

1、AngularJS 常用指令

【常用指令】

1.na-app:声明angularjs所管辖的区域，一般写在body或者HTML上原则一个一面只写一个

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

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

①<div id="div" ng-bind="name"></div>
②<div>{{name}}</div>

4.ng-init 指令初始化 AngularJS 应用程序变量。

5.表达式：{{}}绑定表达式，可以包含数字、运算符和变量。但表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=”代替

【基本感念】

指令：AngularJS中，通过扩展HTML的属性提供功能 ↓↓↓↓（菜鸟教程中的原话）

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

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

2、AngularJS 的 mvc　　

【mvc三层框架】

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以及各种系统内置对象

【angularJS中的作用域】

①$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上。

效果图如下：

代码如下：

<!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="/UploadFiles/2021-04-02/angular.js">

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

AugularJS从入门到实践

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“AugularJS从入门到实践(必看篇)”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

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

vue.js实现备忘录功能的方法

基于easyui checkbox 的一些操作处理方法

评论“AugularJS从入门到实践(必看篇)”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接