首页> 翱翔就业 > 在线学习 > angularjs应用骨架

angularjs应用骨架

发布时间：2019-10-20作者：邯郸翱翔

使用典型的类库时，你可以选择并使用你所喜欢的功能；而对于angularjs框架来说，必须把它看成一个完成度套件来使用，框架中的所有的东西都包含在里面，接下来将会介绍angular的基础模块

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

　　调用Angular

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

　　1、加载angular库。

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

　　加载脚本

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

　　使用ng-app声明Angular的边界

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

　　……

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

　　　　　　……

　　Model View Controller

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

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

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

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

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

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

　　eg.

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

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

DOCTYPE html>
<html ng-app="textApp">
<head>
   <meta charset="UTF-8">
   <title>Hello World!title>
   <script src="static/js/angular.js" type="text/javascript">script>
   <script src="static/app/controller/controller.js" type="text/javascript">script>
head>
<body ng-controller="TextController">
<p>{{sometext}}p>
body>
html>

!(function (){
   var app= angular.module('textApp',[]);
   app.controller('TextController', function ($scope) {
       $scope.sometext = 'you hava started your journey.';
   });
}());

　　模版和数据绑定

　　angular中的模版只是一些HTML的一些片段而已，我们可以从服务器上加载，也可以在 <script> 标签中定义，处理方式与其他所有静态资源相同

　　基本的运作流程如下：

　　1、用户请求用户起始页。

　　2、用户的楼兰其向服务器发起一次HTTP连接，然后加载页面，这个页面里面包含了模版。

　　3、angular被加载到页面中，等待页面加载完成，然后查找ng-app指令用来定义模版边界。

　　4、angular遍历模版，查找指令和绑定关系，这将出发一系列动作：注册监听器、执行一些DOM操作、从服务器获取初始化数据。这项工作的最后结果是，应用将会启动起来，最后模版会转换成dom视图

　　5、连接到服务器去加载需要展示给用户的其他数据。　

　　对于每一个angularjs应用来说，步骤1到步骤3都是必须的，但是步骤4和步骤5是可选的。　

　　显示的文本

　 1、ng-bind指令

　 2、{{}}方式

　　对于输出的内容是等价的。那么为什么还要出现ng-bind指令呢？我们使用{{}}会是代码阅读起来更加简洁，但是在angular使用数据来替换化括号之前，{{}}有可能会被用户看到，而第一种则不会遭遇这种问题。造成这种现象的原因是，浏览器需要先加载HTML页面，渲染它，然后angular才会有机会去把她解释成你期望看到的内容。

　　表单输入　　

　 Angular表单元素非常方便。如：

<form ng-controller="someController">
   <input type="checkbox" ng-model="youCheckedIt"/>
form>

　这样做的含义是：

　1、当用户选择了复选框之后，SomeController中的$scope中的youCheckedIt的属性就会变成true，而反选复选框youCheckedIt的属性就会变成false。

　2、如果在控制器中把$scope.youCheckedIt的值设置为false时，UI中复选框就会反选。反之，则勾选复选框。　

　当一个文本框被改变的时候，某个方法就会被调用做出一些列的逻辑操作，可以使用ng-change来指定一个控制器方法，如：

DOCTYPE html>
<html ng-app="myapp">
<head>
   <meta charset="UTF-8">
   <title>title>
   <script src="static/js/angular.js" type="text/javascript">script>
   <script src="static/app/controller/form.js" type="text/javascript">script>
head>
<body>
<form ng-controller="myController">
   Staring: <input type="text" ng-change="computerNeeded()" ng-model="fundaing.starting"/>
   Recommendation:{{fundaing.needed}}
form>
body>
html>

var app=angular.module('myapp',[]);
app.controller('myController', function ($scope) {
   $scope.fundaing={starting:0};
   computerNeeded= function () {
       $scope.fundaing.needed=$scope.fundaing.starting * 10;
   };

   $scope.$watch('fundaing.starting',computerNeeded);
});

　其中最基本的一点就是watch，就是你可以调用watch函数来监视一个表达式，当这个表达式发生变化时，就会调用这个函数。

　列表、表格以及其他迭代型元素　

　 ng-repeat可能是最有用的angular的指令了，它可以根据集合中的元素一次创建多份拷贝。不管在什么地方，只要想创建一组事物的列表，你就可以使用这条指令。如：

DOCTYPE html>
<html ng-app="textApp">
<head>
   <meta charset="UTF-8">
   <title>Hello World!title>
   <script src="static/js/angular.js" type="text/javascript">script>
   <script src="static/app/controller/controller.js" type="text/javascript">script>
head>
<body>
<div ng-controller="repeatController">
   <li ng-repeat="item in items">
       <a href="">{{item.name}}a>
       <span>{{item.age}}span>
   li>
div>
body>
html>

!(function (){
   var app= angular.module('textApp',[]);

   app.controller('repeatController', function ($scope) {
           var items=[
               {name:"张三",age:20},
               {name:"李四",age:22},
               {name:"王五",age:24}
           ];
           $scope.items=items;
   });

}());