使用典型的类库时,你可以选择并使用你所喜欢的功能;而对于angularjs框架来说,必须把它看成一个完整的套件来使用,框架中的所有的东西都包含在里面,接下来将会介绍angular的基础模块,这样你就可以理解它们是如何被装配在一起的。

  调用Angular

  为了使用angular,所有的引用都必须做两件事情:

  1、加载angular库。

  2、使用ng-app指令告诉angular应该管理DOM中的那一部分。

  加载脚本

  加载类库的操作非常简单,与其他javascript类库遵循同样的规则。

  使用ng-app声明Angular的边界

  你可以使用ng-app指令告诉angular管理页面的那一块。如果你正在构建一个纯angular应用,那么你应该把ng-app写在html标签中,如:、

  <html ng-app>

  ……

  </html>

  如果只想管理页面中某一个部分,那么可以这样写:

  

  <html>

    <div  ng-app>

      ……

    </div>

  </html>

  

  Model View Controller

  angular本身是支持MVC风格的应用设计。尽管angular有很大的灵活性,但是一下的风格会经常涉及:

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

  2、用来展示数据的一些试图。

  3、用来管理数据和模型之间的一些控制器。

  eg. var sometext='you hava started your journey.';

  你将会使用对象的属性来创建数据模型,甚至只用数据基本类型来存储数据;你可一编写一个HTML页面来创建试图,然后把它和你数据中的模型融合起来

  eg.<p>{{sometext}}</p>

  我们把这叫做双括号插值语法

  把以上东西整合起来就有了如下内容:

  

 1 <!DOCTYPE html>
 2 <html ng-app="textApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World!</title>
 6     <script src="static/js/angular.js" type="text/javascript"></script>
 7     <script src="static/app/controller/controller.js" type="text/javascript"></script>
 8 </head>
 9 <body ng-controller="TextController">
10 <p>{{sometext}}</p>
11 </body>
12 </html>
View Code

相关文章:

  • 2021-10-27
  • 2022-02-03
  • 2022-01-08
  • 2022-12-23
  • 2021-06-13
  • 2021-08-23
  • 2021-09-20
  • 2021-12-17
猜你喜欢
  • 2021-08-11
  • 2021-09-27
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-05
  • 2021-12-06
相关资源
相似解决方案