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'
    });
});