zoukankan      html  css  js  c++  java
  • angularJs入门篇-hello world 开头

        AngularJS 采用了完全不同的解决方案,它创建实时视图模板代替视图,而不是将数据合并进模板之后更新DOM。

    任何一个独立视图组件中的值都是 动态替换的。这个功能可以说是AngularJS中最重要的功能之一。

    自动数据绑定使我们可以将视图理解为 模型状态的映射

    MCV 是一种软件架构设计模式,它将表现从用户交互中分离出来。通常来讲,模型中包含应用的数据和与数据进行交互的

    方法,视图将数据呈现给用户,而控制器则是二者之间的桥梁

    //那么如下 就是我们第一个AngularJS的例子

    <input ng-model="name" type="text" placeholder="hello world">

    <h1>Hello {{ name }}</h1>

     

    在AngularJS中如果遇到了$符号,你都可以只把它看作是一个AngularJS对象

    AngularJS中最特别的就是双向绑定,这就意味着如果视图改变了某个值,数据模型会通过脏检查观察到这个变

    化,而如果数据模型改变了某个值,视图也会依据变化重新渲染。

     

    那么应该讲解下什么是控制器了,那么接下来就写我们的第一个控制器

    //////////// HTML

    <div ng-controller="FirstController">

        <input ng-model="person.name" type="text" placeholder="your name">

        <h1>HELLO {{ person.name }}</h1>

    </div>

    //////////// SCRIPT

    <script type="text/javascript">  

        angular.module("myApp", [])

          .controller("FirstController", function($scope) {

            $scope.person = {

              "name": "M-lin"

            };

        });

    </script>

    通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
  • 相关阅读:
    练习5
    图例设置了却不显示
    easyui中多级表头,主表头不能添加field字段,否则不居中
    springboot热部署
    ReactDom.render调用后没有渲染
    webpack打包配置模板
    overridePendingTransition
    multiDex分包时指定主dex的class列表
    android实现手势锁
    动态补丁构建工具nuwa中的“坑”
  • 原文地址:https://www.cnblogs.com/mcat/p/4184534.html
Copyright © 2011-2022 走看看