AngularJS-MVC之Controller

前言:

  编程是一个很苦恼的工作,因为需要我们不断的去学习,不断的去专研,我本身就不是一个很喜欢学习的孩子,要不然从小到大也没有成绩好过,但是,我从来没有缺少过勤奋,还是让我们言归正传来说下 我们这段时间学的东西吧,看着别人能够运转自如,自己连基础的都不知道是不是特傻。

1,hello world

<!doctype html>
<html ng-app="HelloAngular">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="HelloAngularCtl">
            <p>{{greeting.text}},world</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_MVC.js"></script>
</html>

先看看这段代码,如果从来没有接触过angular的同学们,会觉得代码还可以这么写?

让我们看看在这段代码中我们遇到的新的写法有哪些?

  1,ng-app="HelloAngular",这个是程序的入口(c#中的main()方法),如果在html里面有这个话,就表明,在这个dome元素范围内归angular.js来管理,是不是很奇妙,当然,我们可以把这个放到 body标签内也可以,值得注意的是一个程序中只有一个 ng-app,后面的 HelloAngular是后面的模块名称,可以不写这个东西。

2,ng-controller="HelloAngularCtl",这个是本章讲的重点,也就是MVC中的C(controller),顾名思义就是控制器的意思,那么到底控制什么?根据我的理解,是控制下面的元素依据什么来显示,这里的什么等下后面会讲到。

3,{{greeting.text}},如果会Php或则使用html模板的同学应该知道,这两个大花括号呢,是表示程序里面的变量或则属性,在此可以直接引用,这个很有意思啊,因为我们知道如果要给一个dome赋值,首先要根据 JS获得这个dome的对象,然后再通过value属性给其赋值,那是何其麻烦,但是在这里却这么简单。

好了,看完html代码,我们再看看js的吧,我们先引入 angularJS的库文件,否则上面的都不会生效。再引入我们自己的逻辑代码HelloAngular_MVC.js

// 定义一个模块
var HelloAngularModule = angular.module("HelloAngular",[]);

// 模块中定一个控制器
HelloAngularModule.controller("HelloAngularCtl",function($scope){
        $scope.greeting={
            text:‘Hello‘
        }
})

就像上面代码注释的一样,我们先用angular的语法,定义一个模块(注意:我们现在所有的代码都要模块化,不然MVC的就变得毫无用处,不然我们是用MVC也好还是MVVM也好,最终的目的是代码复用和模块化),然后呢,根据这个模块我们来定义一个 controller。

在此有些心细的同学看出来了,我们模块定的名称(HelloAngular)和Controller定义的名称(HelloAngularCtl)刚好是我们前面讲过的html代码中写的ng-app和ng-controller的名称一样的。没错,我们就是通过这个来指定angular的运行环境的。如果你写错了一个字母,可能整个程序就不能执行了。

在此,我们再来讲一个比较重要的属性,那就是 控制器中 $scope,我们称之为作用域。这个$scope是很神奇的东西,可以说是整个angularjs的运行都是在这个上面的,是angularjs实现数据模型的方式,我们可以看到前面(html代码)中{{}}引用数据,就是$scope对象的属性。

好了,最后给展示下运行的效果:

最后补充下,我们的$scope的作用域是在 controller的范围下的,也就是说,如果我们html代码中controller1调用了controller2中的$scope对象的属性和方法是取不到值的,那么有人会说了,如果两个非要用到一个东西怎么办呢?别着急我们后面会讲到,我看别人的都是写一个公用的controller把1和2给放进去,其实这是一个错误的方法,我们要建立一个service,后面再说。

时间: 2024-11-15 00:09:13

AngularJS-MVC之Controller的相关文章

angularJS MVC理解

AngularJS   MVC 简单理解 什么是MVC? MVC其实就是一种开发模式,有模型(model).视图(view).控制器(controller)3部分构成,采用这种方式为合理组织代码提供了方便,降低了代码间的耦合度,功能结构清晰可见. Model:一般用来处理数据,包括读取和设置数据,一般指的是操作数据库. View: 一般用来展示数据,就是放数据,比如通过HTML来展示. Controller:因为一个模块里面可能有多个视图和模型,控制器就起到了连接模型和视图的作用.   MVC指

Angularjs MVC 以及 $scope 作用域 Angularjs 模块 的 run 方法 以及依赖注入中代码压缩问题

Angularjs MVC 以及 $scope 作用域 Angularjs 模块的 run 方法 以及依赖注入中代码压缩问题 1. Angularjs MVCModel:数据模型层View:视图层,负责展示Controller:业务逻辑和控制逻辑优点: 代码模块化 代码逻辑比较清晰.可移值性高,后期维护方便.代码复用,代码规模越来越大的时候,切分职责是大势所趋缺点:运行效率稍微低一些2. Angularjs $scope 作用域1. $scope 多控制器单独作用域<!DOCTYPE html>

框架开发之——AngularJS+MVC+Routing开发步骤总结——5.14

1.延续MVC的观念:包括路由映射的编写,Controller的内容,具体View页面js的分离. 2.结合AngularJS做前端,后端使用Node.Js的写法,引入MVC框架,进行快速的开发. 步骤总结如下: 1.view页面修改,文件夹名称,文件名称,名称的大小写规范,在base文件夹中的main.ejs文件中记得注册. 注意使用angular.js进行前端页面的编写,以及相应页面代码的编写,相关angular.Js用法的收集. 2.view对应js文件的编写,文件夹的名称,文件名称,名称

Spring MVC的Controller统一异常处理:HandlerExceptionResolver

出现异常并不可怕,可怕的是出现了异常,你却不知道,也没有进行异常处理. Spring MVC的Controller出现异常的默认处理是响应一个500状态码,再把错误信息显示在页面上,如果用户看到这样的页面,一定会觉得你这个网站太LOW了. 要解决Controller的异常问题,当然也不能在每个处理请求的方法中加上异常处理,那样太繁琐.Spring MVC提供了一个HandlerExceptionResolver接口,可用于统一异常处理. HandlerExceptionResolver接口 pu

MVC中Controller间的传值、Controller到View的传值方法

从做了考试以来,和别人也进行了交流,发现系统内部的传值算是一个比较费劲的问题.这篇博客讲解两种传值的情况--MVC中Controller间的传值,这里包括了第二种Controller到View的传值. 示例:我有两个Controller:C1和C2,我想把C1中的课程实体的课程ID传到C2中.方案是先把C1中的课程ID传到C2对应的View页面的地址栏中,然后C2从自己的View页面中获取. 来看代码: //下面是一个easyUI的表格,执行ScoringManagementCotroller下

Asp.net MVC 中Controller返回值类型ActionResult

内容转自 http://blog.csdn.net/pasic/article/details/7110134 Asp.net MVC中Controller返回值类型 在mvc中所有的controller类都必须使用"Controller"后缀来命名并且对Action也有一定的要求: 必须是一个public方法 必须是实例方法 没有标志NonActionAttribute特性的(NoAction) 不能被重载 必须返回ActionResult类型 如: [csharp] view pl

Spring mvc框架 controller间跳转 ,重定向 ,传参

 一.需求背景 1. 需求:spring MVC框架controller间跳转,需重定向.有几种情况:不带参数跳转,带参数拼接url形式跳转,带参数不拼接参数跳转,页面也能显示. @RequestMapping(value = "/activityType", method = RequestMethod.GET) public String activityType(HttpServletRequest request, ModelMap model,RedirectAttribut

Spring MVC Test -Controller

http://www.petrikainulainen.net/programming/spring-framework/unit-testing-of-spring-mvc-controllers-configuration/ Writing unit tests for Spring MVC controllers has traditionally been both simple and problematic. Although it is pretty simple to write

Asp.net MVC的Controller激活理解

DefaultControllerFactory 是MVC默认的Controller查找和激活工厂类我们可以通过自定义ControllerFactory替换DefaultControllerFactory类来实现IOC的引入 public class DefaultControllerFactory : IControllerFactory{    //其他成员    public DefaultControllerFactory();    public DefaultControllerFa

Spring MVC 从 Controller向页面传值的方式

Spring MVC 从 Controller向页面传值的方式 在实际开发中,Controller取得数据(可以在Controller中处理,当然也可以来源于业务逻辑层),传给页面,常用的方式有:   1.利用ModelAndView页面传值 后台程序如下: @RequestMapping(value="/reciveData",method=RequestMethod.GET) public ModelAndView StartPage() { ModelMap map=new Mo