前言：

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

1，MVC-V

<!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></html>范围内所有标签归angular.js来管理，注意一个程序中只有一个 ng-app。

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

3，{{greeting.text}}，双括号是赋值属性。

2，MVC-C

好了，看完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的运行环境的。如果你写错了一个字母，可能整个程序就不能执行了。

3，MVC-M

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

好了，最后给展示下运行的效果：

4，疑问

　　我们如何在 控制器1调用控制2的属性或则方法？

AngularJS-MVC的更多相关文章

  1. 2.AngularJS MVC

    AngularJs的MVC全部借助于$scope(作用域)实现 1.ng指令 <!doctype html> <html ng-app> <head> <me ...

  2. [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

    MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...

  3. angularjs MVC、模块化、依赖注入详解

    一.MVC <!doctype html> <html ng-app> <head> <meta charset="utf-8"> ...

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

    1.延续MVC的观念:包括路由映射的编写,Controller的内容,具体View页面js的分离. 2.结合AngularJS做前端,后端使用Node.Js的写法,引入MVC框架,进行快速的开发. 步 ...

  5. AngularJs MVC 详解

    为什么在前端也需要MVC 1.代码规模越来越大,切分职责是大势所趋 2.为了复用 3.为了后期维护方便 MVC的目的是为了模块化和复用 前端实现MVC的困难 1.操作DOM必须等整个页面加载完 2.多 ...

  6. angularJS MVC及$scope作用域

  7. 如何在 ASP.NET MVC 中集成 AngularJS（2）

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

  8. MVC+angularjs

    angularjs可以解决开发人员不擅长HTML的问题,采用模块化配置,但是不支持样式的微调和修改 angularjs+MVC开发的协同办公平台,贴下图 编辑页面+附件 列表页 一个页面涉及另一个子表 ...

  9. angularjs笔记(一)

    简介 AngularJS API angularjs是javascript框架,通过指令(指令就是自定义的html标签属性)扩展了HTML,并且可以通过表达式(表达式使用)绑定数据到HTML. 1.a ...

  10. HTML5手机APP开发入(3)

    HTML5手机APP开发入(3) 课程内容: 按照AngularJs MVC框架进行代码重构,新建一个DataService服务类使用SQLite插件实现储存对通讯录的本地存储. 涉及的知识点: An ...

随机推荐

  1. 获取radio和select的值，获取select的值

    获取radio的值 var val=$('input:radio[name="_objId"]:checked').val(); jQuery中获得选中select值 第一种方法$ ...

  2. IPC之PIPE

    管道是一种只允许用在有亲属关系的进程间通信的方式,由函数pipe创建一个管道,read,write进行读写操作. #include <unistd.h> ]); 参数pipefd[2]数组 ...

  3. [译]OpenStack Object Storage Monitoring

    注:翻译的不完整,主要是有些地方翻译后反而妨碍理解,有些不知道怎么翻,anyway,需要时拿来用用也是可行的,顺便共享啦.欢迎提意见. 一个OpenStack Object Storage(OSOS) ...

  4. ASP.NET URL伪静态重写实现方法

    ASP.NET URL伪静态重写实现方法 首先说下,ASP.NET URL伪静态只是将~/a_1.html指向到了~/a.aspx?ID=1,但a.aspx还是真实存在的,你不用./a_1.html来 ...

  5. [cocos2dx]让CCScrollView支持分页

    [cocos2dx]让CCScrollView支持分页 做过IOS开发的朋友, 肯定知道UIScrollView有一个isPaged属性. 当设置其为true的时候, 滑动会自动分页. 即, 每次滑动 ...

  6. EDM总结

    1.  使用table 布局,align="center" 2.  尽量不要用padding-left ,padding-right 样式: 3.  CSS的浮动定位: 4.  不 ...

  7. 简单的抓取淘宝关键字信息、图片的Python爬虫|Python3中级玩家：淘宝天猫商品搜索爬虫自动化工具（第一篇）

    Python3中级玩家:淘宝天猫商品搜索爬虫自动化工具(第一篇) 淘宝改字段,Bugfix,查看https://github.com/hunterhug/taobaoscrapy.git 由于Gith ...

  8. HDU 2602 Bone Collector --01背包

    这种01背包的裸题,本来是不想写解题报告的.但是鉴于还没写过背包的解题报告.于是来一发. 这个真的是裸的01背包. 代码: #include <iostream> #include < ...

  9. HDU 1896 Stones --优先队列+搜索

    一直向前搜..做法有点像模拟.但是要用到出队入队,有点像搜索. 代码: #include <iostream> #include <cstdio> #include <c ...

  10. AC日记—— codevs 1031 质数环（搜索）

    题目描述 Description 一个大小为N(N<=17)的质数环是由1到N共N个自然数组成的一个数环,数环上每两个相邻的数字之和为质数.如下图是一个大小为6的质数环.为了方便描述,规定数环上 ...