AngularJS的“完整”与“缺省”

最新推荐文章于 2024-11-08 17:24:22 发布

weixin_33725270

最新推荐文章于 2024-11-08 17:24:22 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lglmsgj0331/p/7628998.html

版权

　　本人是今年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.

　这是第一次在这里分享一下自己学习上的发现。因为平时遇到麻烦总是会百度到别人的博客，从别人的博客解决自己的问题。只有这些问题真的是各种找不到办法，最后自己试出来的，那就分享出来吧，不知道有没有萌新也有这样的困扰呢。

转载于:https://www.cnblogs.com/lglmsgj0331/p/7628998.html