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>

AngularJS学习笔记二,布布扣,bubuko.com

AngularJS学习笔记二

上一篇:js延迟加载,提升网页加载速度


下一篇:Vue3+Module功能+指定Getter模块+获取不到资源