angularjs 初学者的坑

有关controller的定义

从angularjs1.3开始，已经不允许定义全局的controller， 所以网上好多老的demo在运行的时候会报没有注册对应的controller。所以，1.3以后的angrularjs 必须如下定义：

angular.module('pro01App2' , [])
.controller('AboutCtrl', function () {

});

有关ngroute

再用yoman生成的angrularjs项目，头部的导航条点击没有相应。

看浏览器的地址，多了一个感叹号，但是在index.html 里面是如下的显示：

<ul class="nav navbar-nav">
<li class="active"><a href="#/">Home</a></li>
<li><a ng-href="#/about">About</a></li>
<li><a ng-href="#/">Contact</a></li>
</ul>

有如下的处理方法：

将上面的链接里面添加一个感叹号。 --- 这个方法太挫了

<ul class="nav navbar-nav">
<li class="active"><a href="#!/">Home</a></li>
<li><a ng-href="#!/about">About</a></li>
<li><a ng-href="#!/">Contact</a></li>
</ul>

由于 ng-route 从1.6以后，$locationProvider 添加了“！” 感叹号的前缀。具体的链接如下： https://docs.angularjs.org/api/ng/provider/$locationProvider

修改办法：
在 app.js里面，添加如下的代码：

$locationProvider.hashPrefix('');

完整的实例：

app.config(function ($routeProvider , $locationProvider) {

$locationProvider.hashPrefix('');

$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrlTest',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrlTest',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/about'
});
});