AngularJS的“完整”与“缺省”
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS的“完整”与“缺省”相关的知识，希望对你有一定的参考价值。
本人是今年7月才认识angularJS的，还算是萌新一枚，所以这里谈谈我个人的发现吧。
7月的时候上课学到了angularJS，感觉这是一款神奇的js框架，初学时候觉得最大的亮点就是实时更新数据。在绑定了ng-model的输入框随意输入值，视图中与它同名的表达式的值就会与它同步更新，十分有趣。这样甚至不需要在页面中加上<script>标签写上自己的js代码就可以实现。对angularJS，最基本的使用，就是在外层加上ng-app和ng-model.
后来，又知道了angularJS是一款MVC框架，angularJS应用配合上控制器才算完整，于是完完整整地写上了ng-app，和ng-controller，还乖巧地写上了名字。这是一个非常简单的例子，语法非常简单，甚至不用写js代码，感觉是没什么毛病的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>angularJS练习</title> <script type="text/javascript" src="js/angular.min.js" ></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> 姓名：<input ng-model="name" /> <p>{{name}}</p> </div> </body> </html>
结果就报错了：[Web浏览器] "Uncaught object" /angularJS练习/js/angular.min.js (38)
报错的地方还是angularJS框架的代码！我当时就抓狂了！百度了一堆，在贴吧上求助都找不到答案。唯一有点启发的是，看到有人说jQuery有遇到过类似的情况，使用到了就必须初始化，所以我又在<body>下面添加了：
<script> var app=angular.module("myApp",[]);//初始化angularJS应用 </script>
结果还是有错，而且最让小白烦恼的是完全不知道错在哪里：
angular.min.js:107 Error: [ng:areq] http://errors.angularjs.org/1.4.6/ng/areq?p0=myCtrl&p1=not%20a%20function%2C%20got%20undefined
at angular.min.js:6……
根本找不到相关资料。然后我开始了一系列瞎探索，各种修改各种查看效果，大概弄了一个多小时，后来比对老师的代码，发现老师在一开始并没有ng-controller，去掉ng-controller以后就不再报错，还显示正常了。
总结如下：有使用angularJS,就要在所需要的范围添加ng-app属性，它可以没有名字，或者名字为空字符串；如果有使用到控制器，过滤器，服务等等必须要添加js代码的时候，ng-app才一定要有值，并且在js代码进行初始化（命名和初始化必须是“共存亡”的）；同理的还有ng-controller，在简单到不需要控制器，不需要js代码的简单应用，不需要“乖巧”地写出它，写出它来是可是要负“初始化”的责任的。
我不知道会不会也有初学者在这里困惑了，我当时遇到问题的时候真的没有看到解释，希望能给初学者一点帮助吧。有的时候，老师也会一不小心出现了这种手误，看着语法没什么问题啊，最诡异问题恰恰就出在看起来最简单的细节上了。
以下是最近类似的发现：
最近学到了angularJS路由，于是我跟着老师一起敲与$routeProvider有关的代码，老师说到$routeProvider后面有.when表示各种路径对应的情况，最后是.otherwise表示路径当前路径并没有设置路由配置对象。乍一看这样写，有when,也有otherwise，很齐全很专业啊！
<script> //初始化app的时候要引入ngRoute作为依赖 var app=angular.module("myApp",[‘ngRoute‘]); //路由配置 app.config([‘$routeProvider‘,function($routeProvider){ //引用$routeProvider是为了用它的when方法，when方法有多个，最后一个是otherwise $routeProvider .when("/",{"template":"这里是列表"}) .when("/add",{"templateUrl":"02_add.html"}) .when("/edit",{"templateUrl":"02_edit.html"}) .otherwise(); }])//设置结束 </script>
然而又报错了！特别诡异，显示的错误信息是：
angular.min.js:sourcemap:40 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?……（此处省略n行）这个时候我只能勉强辨认出说的是“注入错误”。然而哪里注入错误了？不知。上课的时候老师也出现了这种错误，检查一圈，看着都没问题啊，各种调试未果，最后只好把之前成功的代码拷进来，绕过这个尴尬。于是我也是同样的做法，把原先的代码拷回来以后，又觉得还是要用otherwise()才算完整，手贱又在最后一个when后面补上了.otherwise();，于是同样的错误又出现了……
等一下，刚才成功的代码好像是没有otherwise()的！因为当时没有考虑到路径错误的情况啊！果然，这里的otherwise()去掉以后就万事大吉了！然后在otherwise里面加上它该做的事情：路径错误的时候应该重定向到某处，即.otherwise({redirectTo:"/"});就不再报错了，路由功能正常，路径错误的时候也会有重定向。原来这里的otherwise()跟之前的ng-controller一样，也是该“要么完完整整地出现，要么完全缺省”，只能“完整”或“缺省”地出现，我想这可能是angularJS这款框架的“脾气”吧，我想有这种“脾气”的应该也不止angularJS.
这是第一次在这里分享一下自己学习上的发现。因为平时遇到麻烦总是会百度到别人的博客，从别人的博客解决自己的问题。只有这些问题真的是各种找不到办法，最后自己试出来的，那就分享出来吧，不知道有没有萌新也有这样的困扰呢。
以上是关于AngularJS的“完整”与“缺省”的主要内容，如果未能解决你的问题，请参考以下文章
[Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作