AngularJS-MVC

时间 2019-12-01

原文原文链接

前言：html

　　编程是一个很苦恼的工做，由于须要咱们不断的去学习，不断的去专研，我自己就不是一个很喜欢学习的孩子，要否则从小到大也没有成绩好过，可是，我历来没有缺乏过勤奋，仍是让咱们言归正传来讲下咱们这段时间学的东西吧，看着别人可以运转自如，本身连基础的都不知道是否是特傻。angularjs

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的同窗们，会以为代码还能够这么写？编程

让咱们看看在这段代码中咱们遇到的新的写法有哪些？c#

　　1，ng-app="HelloAngular"，这个是程序的入口（c#中的main()方法），代表<html></html>范围内全部标签归angular.js来管理，注意一个程序中只有一个 ng-app。app

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

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

2，MVC-C

好了，看完html代码，咱们再看看js的吧，咱们先引入 angularJS的库文件，不然上面的都不会生效。再引入咱们本身的逻辑代码HelloAngular_MVC.jsspa

// 定义一个模块
var HelloAngularModule = angular.module("HelloAngular",[]); // 模块中定一个控制器
HelloAngularModule.controller("HelloAngularCtl",function($scope){ $scope.greeting={ text:'Hello' } })

就像上面代码注释的同样，咱们先用angular的语法，定义一个模块（注意：咱们如今全部的代码都要模块化，否则MVC的就变得毫无用处，否则咱们是用MVC也好仍是MVVM也好，最终的目的是代码复用和模块化）,而后呢，根据这个模块咱们来定义一个 controller。code

在此有些心细的同窗看出来了，咱们模块定的名称（HelloAngular）和Controller定义的名称（HelloAngularCtl）恰好是咱们前面讲过的html代码中写的ng-app和ng-controller的名称同样的。没错，咱们就是经过这个来指定angular的运行环境的。若是你写错了一个字母，可能整个程序就不能执行了。htm

3，MVC-M

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

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

4，疑问

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

更多相关文章...