zoukankan      html  css  js  c++  java
  • 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的属性或则方法?

     

  • 相关阅读:
    Reflector7.5.2.1(最新免费破解版)
    linux shell中变量的特殊处理
    linux中什么是shell?
    关于sql server中主键的一点研究
    根据数据库连接,登录操作系统的一个方法
    无图片取得圆角效果
    结对编程作业(java实现)
    第三章、android入门
    第七章:android应用
    javascript编辑excel并下载
  • 原文地址:https://www.cnblogs.com/zhiyuan-2011/p/4237685.html
Copyright © 2011-2022 走看看