angularjs学习笔记之三大模块（modal，controller，view）

今天主要跟大家详细讲解一下angularjs的三大模块： modal，controller，view。

首先跟大家说一下这三个模块之间的关系。

1.数据模型（modal）主要提供数据。它不会和视图（view）直接操作。

2.controller保存modal提供的数据，与视图进行操作。

3.view是视图，也就是页面展示。

4.总而言之，controller负责数据和视图之间的通信，就是两者的接口人。他们分工明确，实现了模块化。

一.如何使用数据模型（modal）？

讲到数据模型，我们再来看一下上一节教程的例子：

<!DOCTYPE html>
 <html ng-app="app">
   <head>
   <meta charset="UTF-8">
   <title>Document</title>
     <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
     <script src="controll.js"></script> //引入控制器
   </head>
   <body>
     <div ng-controller="controller">
       <input type="text" ng-model="text">
       <b>{{greeting.text}} {{text}}</b>
     </div>
   </body>
 </html>

1.首先引入，angularjs包，启动的时候先是去找ng-app指令，也就指定了整个的作用域；

2.然后会继续找具体的指令，这里会找到ng-model，定义了一个“text”的数据模型。

3.下面使用了text的这个模型，所以实现了双向绑定。（只要是在ng-app的作用域内，都能直接使用text）

二.如何使用控制器（controller）？

首先说一下使用控制器的几个要点：

1.不要视图复用controller，一个控制器一般只负责一小块视图（一一对应）；

2.不要在controller中直接操作DOM，这不是控制器的职责，操作DOM要使用指令derective（见上节教程）；

3.不要在controller中进行数据过滤的操作，有专门的filter服务来实现这一块；

4.一般来说，不同的controller之间是不互相调用的，控制器的交互一般通过事件进行。

然后我们来看上面代码蓝色的部分，controll.js的内容是：

 function controller($scope){
   $scope.greeting = {
     text : 'hello'
   };
 }

angularjs找到一个ng-controller的指令，然后会找到定义这个指令的地方，就是controll.js文件，然后可以使用greeting.text直接获取到他的值。

三.如何使用视图（view）？

说到如何使用视图，就必须提到directive。（这里是新的知识了哟！！！！）

下面来看一段代码：

var appModule = angular.module('app', []); //app是html中ng-app指令的名称

appModule.directive('hello', function() { //定义一个指令，名称叫hello
  return {
    restrict: 'E',
    template: '<div>Hi there</div>',
    replace: true
  };
});

上面的代码定义了一个指令标签，你可以直接在html中试试<hello></hello>，看看会发生什么吧！！！

然后我再讲解一下每个属性的含义：

1.restrict ：（字符串）可选参数，指明指令在DOM里面以什么形式被声明。取值有：E(元素),A(属性),C(类),M(注释)；上面的例子设置为元素形式（<hello></hello>）；

2.template： （字符串或者函数）可选参数，返回的内容，上面的例子返回的是一个div；

3.templateUrl: 同上，通过url返回内容，如果返回内容很多，则建议使用此属性。

4.relace：（布尔值），默认值为false。上面的例子设为了true：页面使用hello标签后会被返回的div代替。

5.transclude：（布尔值），当设为true时。这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置，与ng-transclude合用。

6.还有一些其他属性，具体大家再慢慢了解吧。。。

OK，以上就是对这3个主要模块的使用说明了。希望对大家的学习有帮助啦。。。如果对于上面的笔记有不懂的地方，尽管问我，我肯定会给大家解答的。祝大家生活愉快！

赞 (0)

相关推荐

  • Angularjs中controller的三种写法分享

    前言 在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中controller其实就是一个方法,它有三种写法,下面来一起看看吧. 第一种: <pre name="code" class="javascript">var AppController = ['$scope', function($scope){ $sco

  • AngularJs Injecting Services Into Controllers详解

    把service当作被依赖的资源加载到controller中的方法,与加载到其他服务中的方法很相似. 由于javascript是一个动态语言,DI不能弄明白应该通过static types(like in static typed languages)注入哪一个service.因此,我们需要通过$inject属性指定service名称, 它是一个包含需要注入的service名称的字符串数组.service ID顺序的重要性:工厂方法中的参数顺序,与service在数组中的顺序一致.工厂方法的参数

  • AngularJS入门心得之directive和controller通信过程

    AngularJS入门心得之directive和controller通信过程

    AngularJS 通过新的属性和表达式扩展了 HTML.Angularjs学习起来也非常的简单. 1.AngularJS是何方神圣 Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.这里AngularJS就应运而生

  • AngularJS Controller作用域

    AngularJS Controller作用域

    $scope代表视图与数据模型的中间桥梁:scope域中的对象都model和view都可以共享,并且数据是双向同步controller的作用域:主要负责controller标签包裹的元素的数据处理,如果子元素嵌套Controller,则相应的子元素的作用Controller以距离子元素最近的为准(这种最近作用的原则在Jmeter测试框架,avalon的ms-controller同样体现) HTML正文: <!-- 指定应用名及控制器 --> <body ng-app="myAp

  • AngularJS实践之使用NgModelController进行数据绑定

    AngularJS实践之使用NgModelController进行数据绑定

    前言 在Angular应用中,ng-model指令时不可缺少的一个部分,它用来将视图绑定到数据,是双向绑定魔法中重要的一环.ngModelController则是ng-model指令中所定义的controller.这个controller包含了一些用于数据绑定,验证,CSS更新,以及数值格式化和解析的服务.它不用来进行DOM渲染或者监听DOM事件.与DOM相关的逻辑都应该包含在其他的指令中,然后让这些指令来试用ngModelController中的数据绑定功能. 注意:本篇文章不是对NgMode

  • AngularJS控制器controller正确的通信的方法

    AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$ro

  • AngularJs根据访问的页面动态加载Controller的解决方案

    用Ng就是想做单页面应用(simple page application),就是希望站内所有的页面都是用Ng的Route,尽量不用location.href,但是这样的webapp好处是很多,但是美中不足的是当你的webapp随着时间的推移,用户变多,功能变得更丰富,controller也变得越来越多,你不得不把所有的controller当作全局模块进行加载,以使得在站内任何一个页面中按F5刷新后能route到任意一个其他页面,而不会发生找不到controller的错误,加载所有的control

  • AngularJS ng-controller 指令简单实例

    AngularJS ng-controller 指令 AngularJS 实例 为应用变量添加控制器: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head&g

  • AngularJS利用Controller完成URL跳转

    具体写法举例: 1.js定义一个controller function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; } 2.html里面应用controller <div ng-controller='MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button

  • AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    Controller的创建 AngularJs controller使用无处不在,在里代码演示比较简单的创建工作. <!DOCTYPE html> <html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset

随机推荐