Angular JS从入门基础  mvc模型 常用指令

最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

   

  1、常用指令

    AngularJS 通过指令扩展了HTML,且通过表达式绑定数据到 HTML。下面我们看一下AngularJS中的常用指令。
    

  

   (1)、基本概念

      指令:AngularJS中,通过扩展HTML的属性提供功能。所以,ng-开头的新属性,被我们成为指令。

   (2)、AngularJS常用指令

  

      1、ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个。
      2、ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中。
 <input type="text" ng-model="name"/>

      3、ng-bind:把应用程序变量中的数据绑定到HTML视图中,可用表达式替代。   

<div id="div1" ng-bind="name"></div><!--等效于--><div id="div1" >{{name}}</div>

      4、ng-init:初始化 AngularJS应用程序变量。

<body data-ng-app="" ng-init="name=123">

      5、表达式:{{}}绑定表达式,可以包含文字,运算符和变量。

      但是表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=""替代。
      eg:{{ 5 + "" + 5 + ',Angular' }}

      

  2、mvc三层架构

    model(模型):应用程序中用于处理数据的部分。(保存或修改数据到数据库、变量等)。AngularJS中的Model特指的是:数据。

    View(视图):用户看到的用于显示数据的页面。

    Controller(控制器):应用程序中处理用户交互的部分。负责从视图读取数据,控制用户输入,并向模型发送数据。

  (1)、工作原理:

    用户从视图层发出请求,controller接收到请求后转发给对应的model处理,model处理完成后返回结果给controller,并在View层反馈给用户.

  (2)、创建一个Angular模块

    即ng-app所绑定的部分 ,需传递两个参数:
      ①模块名称:即ng-app所需要绑定的名称,ng-app="myApp"
      ②数组:需要注入的模块名称,不需要可为空。
var app= angular.module("myApp",[]);

  (3)创建一个控制器

    在Angular模块上,创建一个控制器Controller,需要传递两个参数。
    ①Controller名称,即ng-controller需要绑定的名称。ng-controller="myCtrl"
    ②Controllerd的构造函数:构造函数可以传入多个参数,包括$scope/$rootScope以及各种系统内置对象;

      说的终究不清楚,看我们灵魂画手的图片你就明白mvc是怎么回事了

 

最后,补充一下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上。

本次分享就到这里

谢谢大家的观看

 
觉得不错请点赞
 

希望能对大家有所启发

有更好的方法或不同的意见请在留言区跟我交流

  

Angular JS从入门基础 mvc三层架构 常用指令的更多相关文章

  1. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  2. MVC三层架构编程(Dao、service、servlet 之间的关系)

    木哈哈~先开心一会儿,人生的第一篇博客aaa.我一定好好写.不过之前也没怎么看别人写过,还是有点小激动呢,加油.好好总结,会总结的宝宝才会有提高! 今天想总结一下mvc三层架构模型编程,宝宝学习不怎么 ...

  3. MVC三层架构搭建

    MVC三层架构搭建 项目主要是用三层来搭建项目,三层分为表现层,数据层和业务层.项目用了目前比较流行的IOC架构.目前流行的IoC 框架有AutoFac,Unity,Spring.NET等,项目中选用 ...

  4. Asp.Net MVC三层架构之autofac使用教程

    开发环境:vs2015..net4.5.2.mvc5.ef6 Autofac简介 IOC控制反转(Inversion of Control,缩写为IOC),Autofac是一个开源的依赖注入框架,Au ...

  5. MVC三层架构模式编程思想 JSP-Servlet-JavaBean

    MVC(Mdodel-View-Controller)编程模式.把一个Java应用分成三层:模型层.视图层.控制层,各层分别实现各层的功能,整个过程见下图就一目了然了. watermark/2/tex ...

  6. angular.js快速入门 hello world

    我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服 ...

  7. angular.js简单入门。

    小弟刚接触angular js  就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> ...

  8. MVC——三层架构笔记、1

    三层架构MVC笔记1. DAL——数据访问层:(专门与数据库交互,增删查改的方法都在这:需引用MODEL层) BLL——业务逻辑层:(页面与数据库之间的桥梁:需引用DAL.MODEL层) MODEL— ...

  9. ASP.NET MVC5基础 – MVC文件架构

    创建MVC项目 首先,我们使用Visual Studio2019创建一个MVC架构的应用程序.步骤如下:首先打开VS2019,在启动页选择[创建新项目].然后选择创建 ASP.NET Web 应用程序 ...

随机推荐

  1. 七牛整合 ueditor (拦住那头牛,七牛又如何)

    最近遇到个项目,要求所有图片都必须整合到七牛上,看了把你谈文档踩在前辈们的基础上终于把他完成了,恰巧本屌丝最近刚好有时间,本着天下屌丝是一家的原则,和小朋友们一同学习 闲话少说入正题. 第一 :下载编 ...

  2. ThinkPHP框架的增删改

       使用TP框架主要是比较简单一些,之前我们写增删改,代码量相对来说还是比较多的,这里利用tp框架写起来是非常简单的,大大的减少了代码量    这里我是以数据库的nation表为例的,nation表 ...

  3. linux服务器性能(网卡流量、CPU、内存、磁盘使用率)监控

    广义的网站的监控涵盖所有的非业务行为的数据采集与管理,包括数据分析师和产品设计师使用的网站用户行为日志.业务运行数据,以及供运维工程师和开发工程师使用的性能统计数据等. 本文主要是通过shell脚本来 ...

  4. 对象克隆(clone)实例详解

    <?php class Staff { public $name; public $age; public $salary; public function __construct($name, ...

  5. H5 canvas圆形的时钟

    今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...

  6. Thinkphp3.2———配置模块

    一.配置格式 Thinkphp框架中的所有配置都是数组形式定义的的格式为: //项目配置 return array( 'DEFAULT_MODULE'=>'Index',//默认模块 'URL_ ...

  7. python中从文件中读取数据

    # average5.py def main(): fileName = input("What file are the numbers in?") infile = open( ...

  8. 使用fontawesome图标

     我每次找图标时都是在阿里的开源图标库中找的,但是使用起来不是很方便.而我发现了fontawesome之后,觉得实在不错,所以分享给大家.  这是一些参考的文档. fontawesome下载与使用介绍 ...

  9. C#集合之并发集合

    .NET 4 开始,在System.Collection.Concurrent中提供了几个线程安全的集合类.线程安全的集合可防止多个线程以相互冲突的方式访问集合. 为了对集合进行线程安全的访问,定义了 ...

  10. JavaScript之通用addLoadEvent代码源码

    在执行javascript代码时 很多情况下 我们是希望代码在网页加载完毕后立刻进行的 大家可能会立刻想到使用window.onload时间处理函数,然后通过 window.onload=functi ...