本篇文章介绍了angularjs的框架知识点汇总，里面有完整的实例，还有完整标签的详细解释。接下来就让我们一起来看这篇文章吧
1. angularjs是什么？
它是google开发的一款具有mvc结构的前端框架。在angular应用中，视图层就是dom，控制器就javascript类，模型数据存储在对象属性中。
2. 数据绑定
通过声明界面的某一部分映射到 javascript 的属性，让他们自动的同步，这种编程方式就是数据绑定。不需要对字段注册监听器，就可以做到对象属性与界面显示同步变化。
3. 依赖注入
不需要重新创建对象，将需要使用的对象$scope或$loaction按照以下方式注入到构造函数中。这就是依赖注入。
function hellocontroller($scope, $location) {$scope.greeting = { text: 'hello' };// use $location for something good here...}
4. 指令
框架的核心层有一个强大的 dom 转换引擎，可以让你 扩展 html 语法。html中的ng-controller是用来指定哪个控制器来服务哪个视图，ng-model将一个输入框绑定到模型部分。 我们称这些叫 html 扩展指令。
5. 依据示例解释各个标签
<!doctype html><html ng-app><head><base/><title>your shopping cart</title><script src="../frm/angular/angular.js"></script></head><body ng-controller='cartcontroller'><h1>your order</h1><p ng-repeat='item in items'><span>{{item.title}}</span><input ng-model='item.quantity'/><span>{{item.price | currency}}</span><span>{{item.price * item.quantity | currency}}</span><button ng-click="remove($index)"> remove </button></p><script>function cartcontroller($scope) {////@formatter:off$scope.items = [{title : 'paint pots',quantity : 8,price : 3.95}, {title : 'polka dots',quantity : 17,price : 12.95}, {title : 'pebbles',quantity : 5,price : 6.95}];////@formatter:on$scope.remove = function(index) {$scope.items.splice(index, 1);};}</script></body></html>
依照上面的代码，对关键内容做个解释：
1）<html ng-app>
ng-app 属性告诉 angular它应该管理页面的哪一部分。由于我们把它放在html元素上，告知angular管理整个页面。如果你正在集成angular和一个已存在的使用其他方式管理页面的应用，那么你可能需要放在应用的p上。
2） <body ng-controller='cartcontroller'>
在 angular 中，用javascript类管理的页面区域叫做控制器。通过在body标签中包含一个控制器，声明的cartcontroller将管理body标签之间的任何东西。
3） <p ng-repeat='item in items'>
ng-repeat 代表为 items数组中每个元素拷贝一次这p中的dom。在p每次拷贝中，同时设置了一个叫item的属性代表当前的元素，所以我们能够在模板中使用。正如你看到的，每个p中都包含了产品名称，数量，单价，总价和一个移除按钮。
4） <span>{{item.title}}</span>
正如演示的‘hello world’示例，数据绑定是通过{{ }}把变量的值插入到页面某部分和保持同步。完整的表达式{{item.title}}检索迭代中的当前项，然后将当前项的titile属性值插入到dom中。
5） <input ng-model='item.quantity'>
ng-model 定义创建了输入字段和 item.quantity之间的数据绑定。span标签中的{{ }}建立了一个单向联系，在这里插入值。但是应用程序需要知道当用户改变数量时，能够改变总价，这是我们想要的效果。通过使用ng-model我们将与我们的模型保持同步更改。ng-model申明将item.quantity的值插入到输入框中，无论何时用户输入一个新值将自动更新item.quantity。
6） <span>{{item.price | currency}}</span>
我们希望单价格式化成美元形式。angular 带有一个叫过滤器的特性，能够让我们转换文本，有一个叫 currency 的过滤器将为我们做这个美元形式格式化。
7）<button ng-click="remove($index)"> remove </button>
点击这个按钮就可以调用 remove()函数。同时传递了$index，这个包含了ng-repeat的迭代顺序，以便知道要移除哪一项。
8）function cartcontroller($scope) {
cartcontroller 管理这购物车的逻辑。通过这个我们告知 angular控制器
需要一个叫$scope 的对象。$scope就是用来把数据绑定到界面上的元素的。
9）$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
我们希望 remove()函数能够绑定到界面上，因此我们也把它增加到$scope中。对于这
个内存中的购物车版本，remove()函数只是从数组中删除了它们。因为通过ng-repeat创建
的这些<p>是数据捆绑的，当某项消失时，列表自动收缩。记住，无论何时用户点击移除
按钮中的一个，都将从界面上调用 remove()函数。（想看更多就到angularjs开发手册中学习）
6. 调用 angular
任何应用使用 angular 必须做两件事：
1）加载 angular.js
2）使用 ng-app告知angular管理哪一部分的dom
7. 加载脚本
很简单：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
推荐使用 google 的cdn。google的服务器是非常快的，脚本是跨应用缓存的。那就是说，如果你的用户有多个使用angular的应用，它只下载一次。同样，如果用户访问过使用google angular的cdn链接，那么当他访问你的站点时没有必要再次下载。
8. 模块
<html ng-app='myapp'><body ng-controller='textcontroller'><p>{{sometext.message}}</p><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script><script>var myappmodule = angular.module('myapp', []);myappmodule.controller('textcontroller',function($scope) {var sometext = {};sometext.message = 'you have started your journey.';$scope.sometext = sometext;});</script></body></html>
在这个模板中，我们告知 ng-app 元素我们的模块名，myapp。然后我们调用了angular对象创建一个名为myapp的模块，传递了控制器函数给模块的控制器函数。
只要记住，远离全局命名空间是一件好事。模块化这是我们通用的机制。
9. 模板和数据绑定
angular 应用中的模板只是那些我们从服务器加载的 html文档或者是定义在<script>标签中的一些静态资源。你在模板中定义界面，在界面组件中使用标准的html加上angular标识符。
基本的启动流程就像这样：
1）用户请求应用的第一页面。
2）用户的浏览器发出一个 http链接到你服务器，加载包含模板的index.html页面。
3）angular加载到页面，等待页面完全加载完成，然后寻找ng-app定义模板的边界。
4）angular经过模板寻找标识符和捆绑。这样的结果是监听器和dom操作完成了注册，同时从服务器查询初始化数据。这块工作的最终结果是应用完成了自举（启动完成，计算机专业用语），就像dom一样将模板转换成是视图。
5）你连接到服务器按需加载你额外需要展示给用户的数据。
通过使用 angular 结构化你的应用，应用程序的模板和填充它们的数据是分离开的。这样的好处就是这些模板现在可缓存了。在第一次加载后，只有新数据加载到浏览器。只有javascript，图片，css和其他资源，缓存这些模板可以给应用更好的性能。
10. ng-bind 标识符显示和更新文本
ng-bind与{{}}等两种方式在显示文本上是等价。不同的是ng-bind方式是直到数据加载，用户才能看到内容。
11. src 和 和 href属性的建议
当数据绑定到一个<img>或<a>标签时，在src或者href中使用{{}}的路径不能够正常运行。
然而，你应该用 ng-src 属性，与之类似，<a>标签，你应该使用ng-href
12. $route服务
route 可以为一个给定的浏览指向url详细指定angular能够加载和显示一个模板，实例化一个控制器为模板提供上下文。
当url是/find/activitydetail时，angular将加载模板地址为：find/views/activitydetail.html。otherwise()告诉路由如果没有匹配到就走这一段。
13. 用指令修改dom
var appmodule = angular . module ( 'app' , []);appmodule . directive ( 'ngbkfocus' , function () {return {link : function ( scope , element , attrs , controller) {element [ 0 ]. focus ();}};});
14. 校验用户输入
模板代码：
<h1> sign up </h1><form name='adduserform' ng-controller= "addusercontroller" ><p ng-show='message'>{{message}}</p><p> first name: <input name= 'firstname' ng-model= 'user.first' required ></p><p>last name: <input ng-model='user.last' required ></p><p>email: <input type='email' ng-model='user.email' required ></p><p>age: <input type= 'number'ng-model= 'user.age' ng-maxlength= '3'ng-min= '1' ></p><p><button ng-click='adduser()'ng-disabled= '!adduserform.$valid' > submit </button>< /ng-form>
控制器：
function addusercontroller ( $scope ) {$scope . message = '' ;$scope . adduser = function () {// todo for the reader: actually save user to database...$scope . message = 'thanks, ' + $scope . user . first + ', we added you!' ;};}
说明：
使用了来自 html5 的required属性，email类型、number类型的输入
框，在一些字段上做我们的校验。
在控制器内部，可以通过$valid 属性来访问表单的校验状态。当表单中所有的请求都是合法时，angular 会把它设置成 true。我们可以使用$valid属性来做额外的事，比如当表单还未完成时禁用提交按钮。
通过个体提交按钮添加 ng-disbaled，能够阻止非法状态的提交。
15. ‘use strict’是什么意思
“use strict”是一个指令，指示解释器用更严格的方式检查代码。use strict开启严格模式以后，一些js糟糕的特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值。严格模式下的eval函数的行为和非严格模式的也不相同。
16. factory,service,provider自定义服务，services.js
1) 用 factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把 service传进controller之后，在controller里这个对象里的属性就可以通过factory使用了。
2) service 是用new关键字实例化的。因此，你应该给this添加属性，然后service返回this。你把service传进controller之后，在controller里this上的属性就可以通过service来使用了。
3) providers 是唯一一种你可以传进 .config() 函数的service。当你想要在service对象启用之前，先进行模块范围的配置，那就应该用provider。
好了，本篇文章到这就结束了（想看更多就到angularjs使用手册中学习），有问题的可以在下方留言提问。
以上就是angularjs的到底怎么用的？angularjs的框架实例详细解析（附完整实例）的详细内容。