zoukankan      html  css  js  c++  java
  • AngularJS学习笔记二

    调用Angular

    为了使用Angular,所有应用都必须首先做两件事:

    1.加载Angular.js库。

    2.使用ng-app指令告诉Angular应用管理DOM中的哪一部分。

    加载脚本

    加载类库的操作非常简单,与其他JavaScript类库遵循同样的规则。示例如下:

       1:  <script src=“xxx/angular.min.js>
       2:   
       3:  </script>

    你可以吧script标签里的src换成你自己的。

    使用ng-app声明Angular的边界

    你可以使用ng-app指令告诉Angular应该管理页面中的那一块。如果你正在构建一款纯

    Angular应用,那么你应该把ng-app指令写在<html>标签中,实例如下:

       1:  <html ng-app>
       2:   
       3:  </html>

    这样就会告诉Angular去管理页面上所有的DOM元素。

    如果你有一款现存的应用,该应用正在用其他一些技术(如Java或Rails)来管理DOM,那么

    你可以让Angular只管理页面中的一部分,只要在页面中放入一些<div>之类的元素即可。

       1:  <html>
       2:   
       3:  <div ng-app>
       4:   
       5:  </div>
       6:   
       7:  </html>

    Model View Controller

    尽管Angular有很大的灵活性,但是一下这些风格你将会经常涉及:

    1.用来容纳数据的模型,模型代表应用当前状态。

    2.用来展示数据的一些视图。

    3.用来管理视图和模型之间关系的一些控制器。

    你将会使用对象的属性来创建数据模型,甚至只用基本数据类型来储存数据。模型属性并没有什么特殊的东西。如果

    你想给客户展示一些文本,你可以使用字符串,示例如下:

    var someText="You have started your journey.";
     
     

    你可以编写一个HTML页面来创建视图,然后把它和你的模型中的数据融合起来,正如我们前面看到的,你可以在DOM

    中插入占位符,然后像下面这样设置其中的文本:

    <p>{{someText}}</p>
     

    我们把这叫做双括号插值语法,因为可以把新的内容插入到现有模型中。

    控制器就是编写的类或者类型,它的作用是告诉Angular该模型有那修对象或者基本数据构成,只要把这些对象或者基本数据

    设置到$scope对象上即可,$scope对象会被传给控制器:

       1:  function TextController($scope){
       2:     $scope.someText=someText;
       3:  }

    把上面所用东西整合起来,我们就获得如下内容:

       1:  <html ng-app>
       2:  <body ng-controller="TextController">
       3:       <p>{{someText}}</p>
       4:       <script src="xxx/angular.min.js">
       5:       </script>
       6:       <script>
       7:            function TextController($scope){
       8:                 $scope.someText="You have started your journey"
       9:            }      
      10:       </script>
      11:  </body>
      12:  </html>

    把内容加载到浏览器上,你将会看到:

    You have started your journey

    数据模型也可以这样编写:

       1:  var messages={};
       2:  messages.someText="You have started your journey";
       3:  function TextController($scope){
       4:       $scope.messages=messages;
       5:  }

    然后再模板中:

    <p>{{messages.someText}}</p>
  • 相关阅读:
    java构造方法和重写equals
    JVM,Java虚拟机基础知识新手入门教程(超级通熟易懂)
    ExtJS用Grid显示数据后如何自动选取第一条记录
    java 各种数据类型的互相转换
    提升思考力的8种日常训练法
    Java时间为什么从1970-01-01 00:00:00 000开始
    extjs计算两个DateField所间隔的月份(天数)
    如何快速理解他人代码,提高开发效率
    mybatis使用collection标签配置某个对象中的List集合类型的属性例子 <collection >
    将原有的Maven项目复制成另一个新名称的项目(包括:访问链接的时候也是使用的是新改的名称,而不是使用被复制项目的名称)
  • 原文地址:https://www.cnblogs.com/zsplove/p/3651150.html
Copyright © 2011-2022 走看看