angularjs应用骨架

时间 2019-12-08

原文原文链接

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

　　调用Angular

　　为了使用angular，全部的引用都必须作两件事情：css

　　一、加载angular库。html

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

　　加载脚本

　　加载类库的操做很是简单，与其余javascript类库遵循一样的规则。angularjs

　　使用ng-app声明Angular的边界

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

　　<html ng-app>浏览器

　　……服务器

　　</html>app

　　若是只想管理页面中某一个部分，那么能够这样写：框架

　　<html>

　　　　　　……

　　　　</div>

　　</html>

　　Model View Controller

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

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

　　二、用来展现数据的一些试图。

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

　　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

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

View Code

　　模版和数据绑定

　　angular中的模版只是一些HTML的一些片断而已，咱们能够从服务器上加载，也能够在<script>标签中定义，处理方式与其余全部静态资源相同

　　基本的运做流程以下：

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

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

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

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

　　五、链接到服务器去加载须要展现给用户的其余数据。　

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

　　显示的文本

　一、ng-bind指令

　二、{{}}方式

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

　　表单输入　　

　 Angular表单元素很是方便。如：

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

View Code

　这样作的含义是：

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

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

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

 1 <!DOCTYPE html>
 2 <html ng-app="myapp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="static/js/angular.js" type="text/javascript"></script>
 7     <script src="static/app/controller/form.js" type="text/javascript"></script>
 8 </head>
 9 <body>
10 <form ng-controller="myController">
11     Staring: <input type="text" ng-change="computerNeeded()" ng-model="fundaing.starting"/>
12     Recommendation:{{fundaing.needed}}
13 </form>
14 </body>
15 </html>

View Code

1 var app=angular.module('myapp',[]);
2 app.controller('myController', function ($scope) {
3     $scope.fundaing={starting:0};
4     computerNeeded= function () {
5         $scope.fundaing.needed=$scope.fundaing.starting * 10;
6     };
7 
8     $scope.$watch('fundaing.starting',computerNeeded);
9 });

View Code

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

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

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

 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>
10 <div ng-controller="repeatController">
11     <li ng-repeat="item in items">
12         <a href="">{{item.name}}</a>
13         <span>{{item.age}}</span>
14     </li>
15 </div>
16 </body>
17 </html>

View Code

 1 !(function (){
 2     var app= angular.module('textApp',[]);
 3 
 4     app.controller('repeatController', function ($scope) {
 5             var items=[
 6                 {name:"张三",age:20},
 7                 {name:"李四",age:22},
 8                 {name:"王五",age:24}
 9             ];
10             $scope.items=items;
11     });
12 
13 }());

View Code

　隐藏和显示

　ng-show、ng-hide这两条指令的功能是等价的，可是运行效果正好相反，它们均可以经过你所传递的表达式来显示和隐藏元素。

　css类和样式　

　假若有的一段css样式

　.menu-disabled-true{

　　　color:#ccc;

　}

　使用如下模版：

1 <div ng-controller="deathMenuController">
2     <ul>
3         <li class="menu-disabled-{{isDisabled}}">菜单</li>
4     </ul>
5 </div>

View Code

1 app.controller('deathMenuController', function ($scope) {
2         $scope.isDisabled=true;
3     });

View Code

效果以下:

可是这种方法一点也很差，虽然灵活性比较好，可是在大型项目中根本很差维护，进而没法建立CSS。

正由于这个缘由，angular提供了ng-class和ng-style指令，表达式的结果，多是以下取值之一：

一、表示CSS类名的字符串，一空格分割

二、CSS类名数组

三、CSS类名到布尔值的映射

首先，咱们来想象一下，若是想在页面的头部获得操做信息

.error{background-color:#f00;}.warning{background-color:yellow;}使用ng-class应该怎么作？

代码以下：

1 <div ng-controller="HeaderController">
2     <div ng-class="{error:isError,warning:isWarn}">{{messageText}}</div>
3     <button ng-click="showError()">Error</button>
4     <button ng-click="showWarn()">Warn</button>
5 </div>

View Code

 1    app.controller('HeaderController', function ($scope) {
 2         $scope.isError=false;
 3         $scope.isWarn=false;
 4         $scope.showError= function () {
 5             $scope.messageText="this is error";
 6             $scope.isError=true;
 7             $scope.isWarn=false;
 8         };  
 9         $scope.showWarn= function () {
10             $scope.messageText="this is warn";
11             $scope.isError=false;
12             $scope.isWarn=true;
13         };
14     });

View Code

咱们还能够作一些更炫的事情：如表格列表把选中的行高亮显示。

.selected{

　　background-color: #78FA89;

}

代码以下：

<table ng-controller="TableController">
    <tr ng-repeat="item in items" ng-class="{selected:$index==selectrow}" ng-click="selected($index)">
        <td>{{item.name}}</td>
        <td>{{item.cuisine}}</td>
    </tr>
</table>

View Code

 1     app.controller('TableController', function ($scope) {
 2         var items=[
 3             {name:'Heifer',cuisine:'BBQ'},
 4             {name:'Green',cuisine:'Salads'},
 5             {name:'Fish',cuisine:'Seafood'}
 6         ];
 7 
 8         $scope.items=items;
 9         $scope.selected= function (row) {
10             $scope.selectrow=row;
11         };
12     });

View Code

效果所示：

反思src和href属性

当在<img>或者<a>标签上进行数据绑定时，在src或者href属性上简单的使用{{}}没法很好的运行。因为浏览器会使用并行的方式来加载图片和其余内容，全部angular没有机会拦截到数据绑定请求。<img>最天然的用法是<img src="images/{{currentname}}"> 但其实，这里应该使用ng-src指令：<img ng-src="images/{{currentname}}">,固然对于<a>标签，应该使用ng-href指令：

表达式

在模版中使用表达式是为了以充分的灵活性在模版、业务逻辑和数据之间创建联系，同时又能避免业务逻辑渗透到模版中。

表达式是经过angualr内置解析器执行的，在这关解析器中你找不到循环结构、流程控制操做符，以及修改数据的操做符。当你须要这些类型的操做时，请你在控制器中执行或者在指令中执行。