Angular JS从入门基础 mvc三层架构 常用指令

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

本次分享就到这里

谢谢大家的观看

觉得不错请点赞

希望能对大家有所启发

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

  

时间: 06-16

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

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

MVC(Mdodel-View-Controller)编程模式,把一个Java应用分成三层:模型层.视图层.控制层,各层分别实现各层的功能,整个过程见下图就一目了然了. JSP.JavaBean.Servlet三层架构即MVC编程模式是现在我们学习web应用编程的基础思想,上图是经本人总结后做出的图,有不对的地方望各位朋友多提意见.

angular.js快速入门 hello world

我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服务. http://www.bootcdn.cn/ 我们找到 1.3.8的angular.js cdn地址,引用到页面 index.html中 http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js 初识 angular.js : 它是一个前端的

asp.net mvc 三层架构之dal层查询方法

分享分享分享!!! 首先,MVC和三层架构,是不一样的. 三层架构中,DAL(数据访问层).BLL(业务逻辑层).WEB层各司其职,意在职责分离. .net的三层结构中,并没有action这个概念. asp.net mvc 是微软新发布的一种网站开发架构.为了解决传统asp.net开发中不能分离Model,View和Controller而设计的. 普通的网站为了解决可移植,可维护,可扩展等问题,会把网站设计成三个独立的模块,Model负责数据库部分,View负责网页的界面,而Controller

angular.js简单入门。

小弟刚接触angular js  就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> <head> <title>angularJS</title> </head> <script type="text/javascript" src="./js/angular.min.js"></s

SpringMVC学习一、MVC三层架构与SpringMVC原理

SpringMVC SSM:Mybatis + Spring + SpringMVC MVC MVC是模型(Model).视图(View).控制器(Controller)的简写,是一种软件设计规范. 是将业务逻辑.数据.显示分离的方法来组织代码 MVC主要作用是降低了视图与业务逻辑间的双向耦合 MVC不是设计模式,是一种架构模式.不同的MVC存在差异 Model(模型):数据模型,提供要展示的数据,因此包含数据和行为,可以认为是领域模型或JavaBean组件(包含数据和行为),不过现在一般都分离

MVC三层架构在各框架中的特征

转一篇写得很棒的文章:https://my.oschina.net/win199176/blog/208171?p=7&temp=1495894148424 1.基于web开发中最原始的jsp+Servlet   图形化理解jsp+servlet结构: 1.从结构上分析jsp+servlet图解原理: 在基于mvc设计模式下的最原始的jsp+Servlet框架,在某种程度上是不能够达到mvc最直观的体现.当客户端发送请求到服务器时,服务器会将从客户端接收到的信息通过封装技术进行解析,在交给web

公共增删改查(MVC+三层架构)

1.建立数据访问层:新建一个项目,选择类库,命名为XXXDAL,然后把新生成的类删除,重新建一个类BaseDal,代码如下: public class BaseDal<T> where T : class,new() { syEntities1 db = new syEntities1(); /// <summary> /// 添加 /// </summary> /// <param name="model"></param>

JSP--JSP语法--指令---九大隐式对象--四大域对象--JSP内置标签--JavaBean的动作元素--MVC三层架构

一.JSP 原理:JSP其实就是一个servlet. Servlet负责业务逻辑处理,JSP只负责显示.开发中,JSP中不能有一行JAVA代码 二.JSP语法 1. JSP模板元素:JSP中HTML标签及文本 2. 脚本:写JAVA代码,<% %> 3. 表达式:用于输出变量及表达式,<%= %> 4. 注释:分为三种 a) <!-- --> :JSP翻译成Servlet时也将进行翻译.页面中也有. b) <% /*.......*/ %>:JSP翻译成Se

2017年前端开发Angular.JS从入门到上手企业开发视频

文后附录下载链接: 课时名称 1体验angular 2ng-init初始化变量 3获取应用程序 4控制器定义作用域 5使用事件 6显隐页面 7插值表达式 8插值过滤器 9filter过滤器 10日期过滤器 11新闻日期案例 12字符串过滤器 13数字过滤器 14数组过滤器 15自定义过滤器 16脏值检测 17注册系统 18disabled指令 19readonly指令 20checked指令 21change指令 22submit事件指令 23run方法与全局作用域 24href动态绑定 25s