• AngularJS-MVC


    前言:

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

    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的属性或则方法?

     

  • 相关阅读:
    poj 2528 Mayor's posters (线段树+离散化)
    poj 1201 Intervals (差分约束)
    hdu 4109 Instrction Arrangement (差分约束)
    poj 1195 Mobile phones (二维 树状数组)
    poj 2983 Is the Information Reliable? (差分约束)
    树状数组 讲解
    poj 2828 Buy Tickets (线段树)
    hdu 1166 敌兵布阵 (树状数组)
    Ubuntu网络配置
    Button控制窗体变量(开关控制灯的状态)
  • 原文地址:https://www.cnblogs.com/zhiyuan-2011/p/4237685.html
Copyright © 2020-2023  润新知